I have the following script.js code
var app = angular
.module("Demo", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "Templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "Templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "Templates/students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server"];
})
.controller("studentsController", function ($scope, $http) {
$http.get("StudentService.asmx/GetAllStudents")
.then(function (response) {
$scope.students = response.data;
})
})
and the following is the html :
<body ng-app="Demo">
<table style="font-family: Arial">
<tr>
<td colspan="2" class="header">
<h1>
WebSite Header
</h1>
</td>
</tr>
<tr>
<td class="leftMenu">
Home
Courses
Students
</td>
<td class="mainContent">
<ng-view></ng-view>
</td>
</tr>
<tr>
<td colspan="2" class="footer">
<b>Website Footer</b>
</td>
</tr>
</table>
The routing does not work for the above href links. My partial pages consumes the properties of $Scope in the script.js file. But home.html never get loaded after clicking the link. Please help with why ng-app, ng-view, and ngRoute do not work for me.
Drop the hashes in your <a> tags.
it works now since I updated the code as following:
var app = angular.module('Demo', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');//this helped fix a bug with angular 1.6.1 http://stackoverflow.com/questions/41211875/angularjs-1-6-0-latest-now-routes-not-working the routing links were not working but this $locationProvider variable change fixed it.
$routeProvider
.when('/home', {
templateUrl: 'Templates/home.html',
controller: 'homeController'
})
.when('/courses', {
templateUrl: 'Templates/courses.html',
controller: 'coursesController'
})
.when('/students', {
templateUrl: 'Templates/students.html',
controller: 'studentsController'
});
})
Related
This question already has answers here:
angularjs 1.6.0 (latest now) routes not working
(5 answers)
Closed 3 years ago.
when I set ui-sref for anchor tag is unable to click but it will work well when I replaced with href attribute
<table>
<tr>
<td class="sideMenu">
<a ui-sref="#/Home">Home</a>
<a ui-sref="#/Course">Course</a>
<a ui-sref="#/Student">Student</a>
</td>
<td class="mainMenu">
<ui-view></ui-view>
</td>
</tr>
</table>
</div>
</body>
</html>
when I set ui-sref for anchor tag is unable to click but it will work well when I replaced with href attribute
and this is my angularjs code
/// <reference path="angular-1.7.8/angular.js" />
/// <reference path="angular-1.7.8/angular-route.js" />
var myApp = angular
.module('myModule', ['ui.router'])
.config(function ($stateProvider,$urlRouteProvider) {
$stateProvider
.state('Home', {
url: '/Home',
templateUrl: 'Template43/Home.html',
controller: 'homeController',
controllerAs: 'homeCtr'
})
.state('Course', {
url: '/Course',
templateUrl: 'Template43/Course.html',
controller: 'courseController',
controllerAs: 'courseCtr'
})
.state('Student', {
url: '/Student',
templateUrl: 'Template43/Student.html',
controller: 'studentController',
controllerAs: 'studentCtr',
resolve: {
studentList: function ($http) {
return $http.get('WebService43RouteUi.asmx/getData')
.then(function (response) {
return response.data;
});
}
}
});
$locationProvider.hashPrefix('');
})
You need angular-ui-router.js for ui-router, not angular-route.js.
In the HTML, replace #/Home with Home.
In the Javascript replace url: '/Home' with url: '#/Home'.
This code works correctly.
HTML:
<tr>
<td class="sideMenu">
<a ui-sref="Home">Home</a>
<a ui-sref="Course">Course</a>
<a ui-sref="Student">Student</a>
</td>
<td class="mainMenu">
<ui-view></ui-view>
</td>
</tr>
script.js:
/// <reference path="angular-1.7.8/angular.js" />
var myApp = angular
.module('myModule', ['ui.router'])
.config(function ($stateProvider) {
$stateProvider
.state('Home', {
url: '#/Home',
templateUrl: 'Template43/Home.html',
controller: 'homeController',
controllerAs: 'homeCtr'
})
.state('Course', {
url: '#/Course',
templateUrl: 'Template43/Course.html',
controller: 'courseController',
controllerAs: 'courseCtr'
})
.state('Student', {
url: '#/Student',
templateUrl: 'Template43/Student.html',
controller: 'studentController',
controllerAs: 'studentCtr',
resolve: {
studentList: function ($http) {
return $http.get('WebService43RouteUi.asmx/getData')
.then(function (response) {
return response.data;
});
}
}
});
})
I want to load the data from the api when i click the route instead of the button i have atm.
i tried calling the function with ng-click on the index.html but it didnt work.
routes:
import { app } from "../index";
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix("!");
$routeProvider
.when("/drivers", {
templateUrl: "./src/pageDetails/drivers.html",
})
.when("/teams", {
templateUrl: "./src/pageDetails/teams.html",
})
.when("/races", {
templateUrl: "./src/pageDetails/races.html",
});
});
app controller:
import {app} from '../index';
app.controller("api", function($scope, $http) {
$scope.Naziv = "Driver Championship Standings - 2013";
$scope.TopDrivers = function () {
console.log("i been pressed");
$http.get("https://ergast.com/api/f1/2013/driverStandings.json")
.then(function successCallback(response) {
$scope.drivers = response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings;
console.log("response.data.MRData.StandingsTable.StandingsLists.0.DriverStandings");
console.log(response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings);
}, function errorCallback(response) {
console.log("Unable to perform get request");
});
}
});
my ng-repeat
<div ng-controller="api">
<p>{{Naziv}}</p>
<button ng-click="TopDrivers()">Test Rest</button>
<div ng-repeat="x in drivers | orderBy: '+Points'">
<div id="divRow">
<table>
<tr id="tableRow">
<td id="td1">Nb: {{x.position}}</td>
<td id="td2">
{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}
</td>
<td id="td3">{{x.Constructors[0].name}}</td>
<td id="td4">Points{{x.points}}</td>
</tr>
</table>
</div>
</div>
</div>
index.html how the route is called
<p class="leftText" id="firstPLEft">
<img class="leftPictures" src="img/drivers.png" alt="DriversPng">
Drivers
</p>
i want to load the api and have it give me the ng-repeat results when i switch to the route instead of when i click the button in the route.
How about using ng-init
<div ng-controller="api" ng-init="TopDrivers()">
<p>{{Naziv}}</p>
<buttonTest Rest</button>
<div ng-repeat="x in drivers | orderBy: '+Points'">
<div id="divRow">
<table>
<tr id="tableRow">
<td id="td1">Nb: {{x.position}}</td>
<td id="td2">
{{x.Constructors[0].nationality}} {{x.Driver.givenName}} {{x.Driver.familyName}}
</td>
<td id="td3">{{x.Constructors[0].name}}</td>
<td id="td4">Points{{x.points}}</td>
</tr>
</table>
</div>
</div>
</div>
Or, you can use resolve in $routeProvider:
app.factory("someService", function($http){
return {
getData: function(){
return $http.get("https://ergast.com/api/f1/2013/driverStandings.json");
}
};
});
and in config:
$routeProvider
.when("/drivers", {
templateUrl: "./src/pageDetails/drivers.html",
controller: "api",
resolve: {
message: function(someService){
return messageService.getData();
}
})
.when("/teams", {
templateUrl: "./src/pageDetails/teams.html",
})
.when("/races", {
templateUrl: "./src/pageDetails/races.html",
});
A sample demo on how to use it
can someone help me with this nested views in angular js.
I use this dot notation
$stateProvider
.state('contacts/:id', {
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ name: 'Alice' }, { name: 'Bob' }];
}
})
.state('contacts/:id.list/:id', {
templateUrl: 'contacts.list.html'
});
function MainCtrl($state){
$state.transitionTo('contacts/:id.list/:id' );
}
In html I call state change also like this
<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>
But always I get
angular.js:12477 Error: Could not resolve 'contact/2.list/2' from state 'contact/:id'
Thnx
EDIT:
I make a change like #Maxim Shoustin answered. Now state changed, but in child navigation when I click on item, parent ui-view is full refreshed (child navigation and ui-view) not only child
now my state looks like this
.state('client', {
url: '/client/info/:itemID',
templateUrl: 'clientInfo.html',
controller: 'detailControllerClient as vm',
})
.state('client.detail', {
url: '/detail/:itemID',
templateUrl: 'itemInfoById.html',
controller: 'detailControllerClient as vm',
})
And html is here. (infoDisplay.html is parent view inside index.html. This ui-view in code bellow is child view (client.detail))
infoDisplay.html
<div class="new_nav col-lg-1 col-md-1 col-sm-2 col-xs-12">
<table class="table-hover">
<thead>
<tr>
<th>item ID</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in clientDetail">
<td><a ui-sref=".detail({'itemID': value.id})">{{value.id}}</a></td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>
<a ui-sref="contacts/{{value.id}}.list/{{value.id}}">get<\a>
You cannot use id.list with id because Angular determines like duplicated name id in pattern. But id_list is ok. For example
See ui-sref Docs
Where state is:
.state('contacts', {
url: '/contacts/:id_list/:id',
templateUrl: 'contacts.html'
})
and HTML:
<a ui-sref="contacts({'id_list': value.id, 'id': value.id})" >contacts</a>
Demo Plunker
I want to show the object in view. The object itself is the controller, but the html does not have access to its properties (probably not see the model)! Maybe the problem ui routing?
app.js
(function () {
'use strict';
angular
.module('hawk', [
'ngWebsocket',
'ui.bootstrap',
'ui.router',
'hawk.controllers',
'hawk.services',
'hawk.directives'
])
.config(['$stateProvider', '$urlRouterProvider', router])
.run(['$rootScope', main]);
angular.module('hawk.services', []);
angular.module('hawk.directives', []);
angular.module('hawk.controllers', []);
function router($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/list');
// CARDS OBJECT VIEW
$stateProvider
.state('list', {
abstract: true,
url: '/list',
templateUrl: '/app/app-eng/controllers/list.html',
controller: 'ListController as dc'
})
.state('list.cards-list', {
url: '/cards-list',
templateUrl: '/app/app-eng/controllers/object-card/cards-list.html',
controller: 'CardsListController as dc',
})
.state('list.contract', {
url: '/contract',
templateUrl: '/app/app-eng/controllers/object-card/contract.html',
controller: 'ContractController as dc',
})
}
function main ($rootScope) {
$rootScope.object = {};
}
})();
The submittion list.cards-list I have access to the object (from model), but submitting list.contract I get the object and can not access its properties (in model). Why?
list.html
<div class="list-group col-md-2 sidebar-offcanvas">
<uib-tabset active="activePill" vertical="true" type="pills">
<uib-tab index="0" heading="Cards list" ui-sref="list.cards-list"></uib-tab>
<uib-tab index="1" heading="Contract" ui-sref="list.contract"></uib-tab>
</uib-tabset>
</div>
<div class="col-md-10">
<div ui-view></div>
</div>
contract.html
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Contract #{{ 2222222}}</h3>
</div>
<table class="table table-condensed">
<tr>
<td width="10%" align="right"><strong>№ contract:</strong></td>
<td>{{dc.data.id}}</td>
</tr>
<tr>
<td align="right"><strong>Date start:</strong></td>
<td>{{dc.data.cdstart}}</td>
</tr>
<tr>
<td align="right"><strong>Date end:</strong></td>
<td>{{dc.data.cdend}}</td>
</tr>
<tr>
<td align="right"><strong>Type name:</strong></td>
<td>{{dc.data.tyonames}}</td>
</tr>
<tr>
<td align="right"><strong>Category.:</strong></td>
<td>{{dc.data.ccategory}}</td>
</tr>
<tr>
<td align="right"><strong>Police department:</strong></td>
<td>{{dc.data.rpnames}}</td>
</tr>
</table>
</div>
contract.js
(function() {
'use strict';
angular
.module('hawk.controllers')
.controller('ContractController', ContractController);
ContractController.$inject = ['$scope', 'Websocket'];
function ContractController ($scope, Websocket) {
var vm = this;
vm.data = {};
init();
function getContracts (id) {
console.log('getContracts-id', id);
Websocket.getContracts({ id: id }).then(function(data) {
console.log('getContracts-data', data);
vm.data = data.data;
console.log('getContracts-vm.data', vm.data);
});
}
function getAddress (id) {
Websocket.getAddress({ id: id }).then(function(data) {
console.log('getAddress', data);
vm.address = data.data;
});
}
function init () {
$scope.$watch('object.id', function(newValue, oldValue) {
console.log('cc', newValue, oldValue, $scope.object.id);
getContracts($scope.object.id);
});
}
}
})();
you have to access your variables with the "vm." inside your html -> "{{vm.data}}" etc.
//EDIT:
If you want to access them without the "vm" you have to put your variables into the "$scope" in your controller.
I have this code:
Var myApp = angular.module('myApp', ['ui.router', 'credit-cards']);
myApp.filter('yesNo', function () {
return function (boolean) {
return boolean ? 'Yes' : 'No';
}
});
myApp.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home", {
redirectTo: 'home.index',
url: "/home",
templateUrl: 'templates/home.html',
controller:'profileCtrl',
access: {restricted: true}
})
.state("home.index",{
url: "/inicio",
templateUrl: 'templates/index.html',
controller:'schedulerController',
access: {restricted: true}
})
.state("home.canchas",{
url: "/canchas",
templateUrl: 'templates/canchas.html',
access: {restricted: true}
})
.state("home.usuarios",{
url: "/usuarios",
templateUrl: 'templates/usuarios.html',
controller:'usuarioController',
access: {restricted: true}
})
.state("home.torneos",{
url: "/torneos",
templateUrl: 'templates/torneos.html',
access: {restricted: true}
})
$urlRouterProvider.otherwise("/home/inicio");
});
This is the template:
<Div class="container">
<form name="ccForm">
<div class="form-group">
<label for="card-number">Card Number</label>
<input type="text" class="form-control" id="cardNumber" cc- number cc-eager-type name="ccNumber" ng-model="card.number">
</div>
<table class="table">
<tr>
<th>Valid</th>
<th>Eager Type</th>
<th>Type</th>
</tr>
<tr>
<td>
{{ccForm.ccNumber.$valid | yesNo}}
</td>
<td>
{{ccForm.ccNumber.$ccEagerType || 'Unknown'}}
</td>
<td>
{{ccForm.ccNumber.$ccType || 'Unknown'}}
</td>
</tr>
</table>
</div>
And then I have the routes and states.
My problem is, if I use the filter in the principal index.html, the filter works ok, but when I put the html code in other nested view, the code does not work!
Thank in advance!