I tried to make the 'getting started' tutorial from Angular JS, but I have a problem when setting the route of a link: the controller of that route does not get called when the user clicks on the link.
Here is my code:
angular.module('phonecat', []).
config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}
]);
function PhoneDetailCtrl($scope, $routeParams, $http) {
$scope.phoneId = $routeParams.phoneId;
$scope.total = 4;
$http.get('phones/' + $routeParams.phoneId + '.json').success(function (data) {
$scope.phone = data;
});
}
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
What angularjs version did you use? I follow the tutorial too, and it use angular-1.0.0rc7.js and if I look up in the app.js file, it use template rather than templateUrl:
$routeProvider.when('/phones', {
template: 'partials/phone-list.html',
controller: PhoneListCtrl
});
so by looking your code, you might want to use angular-1.0.3.js or prior version above the RC
This should work but you need to be sure the link is inside the DOM element which is the root of your app; ie (ng-app='my-app').
It's hard to tell without seeing the page markup.
The problem was solved by the asker:
I fixed the problem - actually I had the HTML of the next step of this tutorial and it was messing up with the app, mainly because it had binding with attribute that did not exist in the model yet.
Related
I want pass the value to one nerds controller to geek controller but unable to pass in ng-router.
<button type="Submit" ng-click="showUser()">Show Details</button>
.when('/geeks', {
templateUrl: 'views/geek.html',
controller: 'GeekController'
})
.when('/nerds', {
templateUrl: 'views/nerd.html',
controller: 'NerdController'
})
In Nerds controller I have this function
$scope.showUser=function(){
$rootScope.$broadcast('btnName',{message:"msg"})
}
In geek controller I receiving the value on page load itself but i am not getting the value pls help me to find the solution
$rootScope.$on('btnName',function(event,args){
$scope.msg=args.message;
console.log("$scope.message nnnn",$scope.msg)
})
The NerdController and the GeekController are in two separate pages, only one of the controllers can be active at a time, since angular has only one page open in the tab. So what I suggest is, pass the variable as a parameter to the route, you can see this in the example below.
JSFiddle Demo
JS:
var routingExample = angular.module('Example.Routing', []);
routingExample.controller('NerdController', function ($scope, $location) {
$scope.showUser = function(){
console.log("show");
$location.path('/geek/1');
}
});
routingExample.controller('GeekController', function ($scope, $routeParams) {
$scope.id = $routeParams.id;
});
routingExample.config(function ($routeProvider) {
$routeProvider.
when('/nerds', {
templateUrl: 'home.html',
controller: 'NerdController'
}).
when('/geek/:id', {
templateUrl: 'blog.html',
controller: 'GeekController'
}).
otherwise({
redirectTo: '/nerds'
});
});
I have project which is a single page application.So that I am using angular js route.
In the first controller I have a $scope value.The same value i have to use in the other controller
here is my controller.js file
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: 'http://localhost/MyfirstApp/welcome',
controller: 'RouteController1'
}).
when('/route2', {
templateUrl: 'http://localhost/MyfirstApp/result',
controller: 'RouteController2'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("RouteController1", function($scope)
{
$scope.value="Athira"
})
module.controller("RouteController2", function($scope) {
$scope.text=$scope.value + "Sandeep"
})
In the result page it should show as 'Athira Sandeep'
thank you for any kind of help
Use a service to share data among controllers .
Another option could be event emitters which i personally am not a fan because it populates the rootScope (in this case) with a lot of events.
What you could do it
angular.module('app',[])
.factory('SharedScope',function(){
var fac = this;
var scope = "";
var sharedScope = {
getScope : function(){
return fac.scope;
},
setScope: function(scope){
fac.scope = scope
}
};
return sharedScope;
})
.controller('Ctrl1',function('SharedScope'){
SharedScope.setScope("Angular");
})
.controller('Ctrl2',function('SharedScope'){
var data = SharedScope.getScope();
$scope.text = data + " is awesome"; //would get Angular is awesome
});
Hope this helps.
When the page loads, the alert fires twice. I am expecting it to fire only once.
This is causing duplicate data insertion in an array inside init function.
Why is this happening. Is it something to do with the routing definitions. How to stop it.
indexctrl.js:
app.controller("indexctrl", function ($scope, $routeParams) {
var uPId = $routeParams.pqid;
var uCId = $routeParams.cid;
if (uPId != null && uCId != null) {
//some other code
}
else {
alert('test');
init();
}
var init = function(){
//some code
}
}
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'App/views/index.html',
controller: 'indexctrl'
})
.when('/Index', {
templateUrl: 'App/views/index.html',
controller: 'indexctrl'
})
.when('/Index/pqid/:pqid/cid/:cid', {
templateUrl: 'App/views/index.html',
controller: 'indexctrl'
})
.otherwise({
redirectTo: '/'
});
}]);
1. Check your controller is declared in html file as well.
2.The link which is referring to routes should be like this <a href="#/Index">
3.If your working with another frame works like ionic. it has aleardy angular.js file.so check how many time your loading script file.
There are 2 views with respective controllers.
The links are in View1.Clicking on this link should load View2 and also read the parameters.
This is what I have tried but the alert says - undefined.
View2 can load with/without params - each case having a different workflow.
View1.html:
<div ng-controller="view1ctrl">
<a href="#/view2/pqid/775/cid/4" >Link1</a>
</div>
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'App/views/view1.html',
controller: 'view1ctrl'
})
.when('/view2', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.when('/view2/:pqid/:cid', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.otherwise({
redirectTo: '/view1'
});
}]);
view2ctrl.js:
app.controller("view2ctrl", ['$scope','$routeParams',function ($scope, $routeParams) {
var init = function () {
alert($routeParams.pqid);
}
init();
}]);
You are nearly there:
.when('/view2/:pqid/:cid'
maps to a URL in this format :
view2/1234/4567
1234 being the pqid and 4567 the cid.
So your routing, I think is working, just change the link to #/view2/775/4.
Or if you want to keep the same link change your routing to:
#/view2/pqid/:pqid/cid/:cid
Sorry if this isn't a particulary enlightening question, but I am at a loss as to why I can't get angularjs to run on my page.
I've stripped it down to the following jsfiddle: http://jsfiddle.net/Inigo/CvWE5/1/
Here is my code:
var app = angular.module('iwd-cms', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
controller: 'TourManager'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
app.controller('TourManager', function($scope){
alert('hello world');
});
As according to an issue on AngularJS's github repo, you must include a template to match up with your controller:
$routeProvider.
when('/', {
templateUrl: 'TourManager.html',
controller: 'TourManager'
}).
See issue 1838 issue on their github repo: https://github.com/angular/angular.js/issues/1838
It seems to be an ongoing issue; please look for alternative code solutions at the Url.