Below is my code ,written for ngRoute navigation
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a1', {
templateUrl: 'basic.html',
controller: 'c1'
});
}]);
app.controller('c1', function($scope) {
$scope.hello = "BOOOO!";
});
Navigation is not happening to basic.html with this code.
I have tried solution in few links but thats not working.
My whole intention behind this is performing a parameterized navigation,like from first page I will be passing id and on the second page I will be displaying the data corresponding to that.
Related
So I'm trying to learn how to use Angulars routing, following tutorials online, and I can't seem to figure out where I'm going wrong. I have the following code:
var app = angular.module('gamersplane', ['controllers', 'ngCookies', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList'
}).when('/pms', {
controller: 'pmList'
}).otherwise({
controller: 'pmList'
});
}])
var controllers = angular.module('controllers', []);
controllers.controller('pmList', function ($scope, $cookies, $http, $routeParams) {
console.log($routeParams);
});
However, no matter what I do, the controller doesn't get hit. I have otherwise in the router, so isn't that where it should hit if all else fails?
Yes it will hit otherwise but you can only define the redirect path into it and that redirect path will tell the url and the controller to set for the $route.current :-
redirectTo: '/pms'
Doc
You need to add a template to each route:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList',
template: 'test.html'
}).when('/pms', {
controller: 'pmList',
template: 'test.html'
}).otherwise({
controller: 'pmList',
template: 'test.html'
});
}])
squiroids suggestion regarding otherwise was correct, you won't see a change in your test application though.
Routing is meant to be used to navigate between regions of your application. You could have an app with two routes: pms which shows a list of PMs and pms/:box zu view a particular PM Box. The main task for ngRoute is to replace a placeholder in your application (ng-view) with a given template. Without using a template on the individual routes, your $routeProvider will not navigate as expected.
Given you have two views for the regions (pmBox.html and pmList.html), you could configure your $routeProvider zu setup routing like this: https://gist.github.com/kpko/bd0231ccefbaf8c415c7
I am trying to get rid of the url looking like http://example.com/#/album/0 and have it look more like http://example.com/album/0.
I have the following code
(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/directory.html',
controller: 'ProjectsCtrl'
}).
when('/album/:id', {
templateUrl: 'partials/album.html',
controller: 'ProjectDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
var projectControllers = angular.module('projectControllers', []);
projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.projects = albums;
$scope.filters = { };
}]);
projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
function($scope, $routeParams, $sce) {
$scope.project = albums[$routeParams.id];
})();
but this is causing my app the break entirely once I add in $locationProvider in the three places shown. Any idea as to why this is not working for me? Also I am including angular-route.js just after jquery and angular.js so that cant be the problem
At a glance it looks all right to me, but you must make sure your server is set up to serve http://example.com/index.html for any route, otherwise it will try to load http://example.com/album/0/index.html before bootstrapping your angular application. What do you see when you enable html5? 404 not found? Console error?
You might also need to add
<base href="/" /> inside <head></head> in your index.html file
I'm developing my first AngularJS app.
master.html is the shell/main page which will load child pages and has it's own logic (i.e. users, search, etc).
The following image shows conceptual structure of my project-
My app.js -
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/',
{
templateUrl: '/app/views/blogslist.html'
controller: 'BlogListController'
})
});
I want a controller for master.html also. I know I can use ng-controller anywhere. But How and where I'll configure the controller for this page?
Thanks.
May be you are looking for something like this:
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.controller('masterCtrl', ['$scope', function($scope){
// all your logic here
}]);
myApp.config(function ($routeProvider, $locationProvider) {
.........
});
and you can use ng-controller attribute to the wrapper div or body.
Use Angular UI Router instead of ngRoute. It allows nested views and states - exactly what you need here.
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route
I'm trying to implement routing into a empty Angular project but the routing doesn't seem to react to the different urls.
index.html, index.html#/, index.html#/audience just seems to load the index page and the only console output is "routing".
I've been testing this in Chrome and Firefox on Ubuntu 13.10 and Angular version 1.2.7
app.js
var App = angular.module('analyticsApp', [
'ngRoute',
'analyticsControllers',
]);
App.config(['$routeProvider', function($routeProvider) {
console.log("routing");
$routeProvider.when("/audience", {
templateUrl: 'partials/audience.html',
controller: 'AudienceCtrl'
}).
otherwise ({
redirectTo: '/audience'
});
}]);
controllers/audience_controller.js
var analyticsControllers = angular.module('analyticsControllers', []);
analyticsControllers.controller('AudienceCtrl', ['$scope', '$http', function($scope, $http){
console.log("audienceCtrl");
}]);
<div ng-view></div>
in index.html was required to make the routing work as intended.