I currently have an AngularJS application with routing built in.
It works and everything is ok.
My app.js file looks like this:
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });
$routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });
$routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });
$routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });
$routeProvider.otherwise({ redirectTo: '/' });
}]);
My app has a CMS built in where you can copy and add new html files within the /pages directory.
I would like to still go through the routing provider though even for the new dynamically added files.
In an ideal world the routing pattern would be:
$routeProvider.when('/pagename', { templateUrl: '/pages/pagename.html', controller: CMSController });
So if my new page name was "contact.html" I would like angular to pick up "/contact" and redirect to "/pages/contact.html".
Is this even possible?! and if so how?!
Update
I now have this in my routing config:
$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })
and in my CMSController:
function CMSController($scope, $route, $routeParams) {
$route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];
This sets the current templateUrl to the right value.
However I would now like to change the ng-view with the new templateUrl value. How is this accomplished?
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/page/:name*', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.name + '.html';
},
controller: 'CMSController'
});
}
]);
Adding * let you work with multiple levels of directories dynamically.
Example: /page/cars/selling/list will be catch on this provider
From the docs (1.3.0):
"If templateUrl is a function, it will be called with the following
parameters:
{Array.} - route parameters extracted from the current
$location.path() by applying the current route"
Also
when(path, route) : Method
path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.
Ok solved it.
Added the solution to GitHub - http://gregorypratt.github.com/AngularDynamicRouting
In my app.js routing config:
$routeProvider.when('/pages/:name', {
templateUrl: '/pages/home.html',
controller: CMSController
});
Then in my CMS controller:
function CMSController($scope, $route, $routeParams) {
$route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
$.get($route.current.templateUrl, function (data) {
$scope.$apply(function () {
$('#views').html($compile(data)($scope));
});
});
...
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];
With #views being my <div id="views" ng-view></div>
So now it works with standard routing and dynamic routing.
To test it I copied about.html called it portfolio.html, changed some of it's contents and entered /#/pages/portfolio into my browser and hey presto portfolio.html was displayed....
Updated
Added $apply and $compile to the html so that dynamic content can be injected.
I think the easiest way to do such thing is to resolve the routes later, you could ask the routes via json, for example. Check out that I make a factory out of the $routeProvider during config phase, via $provide, so I can keep using the $routeProvider object in the run phase, and even in controllers.
'use strict';
angular.module('myapp', []).config(function($provide, $routeProvider) {
$provide.factory('$routeProvider', function () {
return $routeProvider;
});
}).run(function($routeProvider, $http) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).otherwise({
redirectTo: '/'
});
$http.get('/dynamic-routes.json').success(function(data) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
// you might need to call $route.reload() if the route changed
$route.reload();
});
});
In the $routeProvider URI patters, you can specify variable parameters, like so: $routeProvider.when('/page/:pageNumber' ... , and access it in your controller via $routeParams.
There is a good example at the end of the $route page: http://docs.angularjs.org/api/ng.$route
EDIT (for the edited question):
The routing system is unfortunately very limited - there is a lot of discussion on this topic, and some solutions have been proposed, namely via creating multiple named views, etc.. But right now, the ngView directive serves only ONE view per route, on a one-to-one basis. You can go about this in multiple ways - the simpler one would be to use the view's template as a loader, with a <ng-include src="myTemplateUrl"></ng-include> tag in it ($scope.myTemplateUrl would be created in the controller).
I use a more complex (but cleaner, for larger and more complicated problems) solution, basically skipping the $route service altogether, that is detailed here:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
Not sure why this works but dynamic (or wildcard if you prefer) routes are possible in angular 1.2.0-rc.2...
http://code.angularjs.org/1.2.0-rc.2/angular.min.js
http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js
angular.module('yadda', [
'ngRoute'
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/:a', {
template: '<div ng-include="templateUrl">Loading...</div>',
controller: 'DynamicController'
}).
controller('DynamicController', function ($scope, $routeParams) {
console.log($routeParams);
$scope.templateUrl = 'partials/' + $routeParams.a;
}).
example.com/foo -> loads "foo" partial
example.com/bar-> loads "bar" partial
No need for any adjustments in the ng-view. The '/:a' case is the only variable I have found that will acheive this.. '/:foo' does not work unless your partials are all foo1, foo2, etc... '/:a' works with any partial name.
All values fire the dynamic controller - so there is no "otherwise" but, I think it is what you're looking for in a dynamic or wildcard routing scenario..
As of AngularJS 1.1.3, you can now do exactly what you want using the new catch-all parameter.
https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5
From the commit:
This allows routeProvider to accept parameters that matches
substrings even when they contain slashes if they are prefixed
with an asterisk instead of a colon.
For example, routes like edit/color/:color/largecode/*largecode
will match with something like this
http://appdomain.com/edit/color/brown/largecode/code/with/slashs.
I have tested it out myself (using 1.1.5) and it works great. Just keep in mind that each new URL will reload your controller, so to keep any kind of state, you may need to use a custom service.
Here is another solution that works good.
(function() {
'use strict';
angular.module('cms').config(route);
route.$inject = ['$routeProvider'];
function route($routeProvider) {
$routeProvider
.when('/:section', {
templateUrl: buildPath
})
.when('/:section/:page', {
templateUrl: buildPath
})
.when('/:section/:page/:task', {
templateUrl: buildPath
});
}
function buildPath(path) {
var layout = 'layout';
angular.forEach(path, function(value) {
value = value.charAt(0).toUpperCase() + value.substring(1);
layout += value;
});
layout += '.tpl';
return 'client/app/layouts/' + layout;
}
})();
Related
I have an Angular app which makes some calls (POST and GET for now) to a backend service (powered by node.js with a REST interface). While developing the app itself I noticed it makes two requests to the backend each time a button is pressed or a page is loaded. Curiously everything works but each time I press some button the backend gets two requests. I am not using any fancy package only ngRoute, ngResource and routeStyles for css partials. Anybody has an idea of what could be the reason why the app behaves like that?
I actually found another question similar to this one but the OP there was using express aside of Angular and there is no answer...
EDIT added some code.
in app.js:
'use strict';
var cacheBustSuffix = Date.now();
angular.module('myApp', ['myApp.controllers', 'myApp.services', 'myApp.filters', 'ngRoute', 'ngResource', 'routeStyles'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider
.html5Mode({enabled: true,
requireBase: false})
.hashPrefix('!');
$routeProvider
.when('/', {redirectTo: '/myApp'})
.when('/myApp', {
templateUrl: '/partials/home.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrlHome'
})
.when('/myApp/search', {
templateUrl: '/partials/search.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrlSearch'
})
.when('/myApp/list/', {
templateUrl: '/partials/list.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrlList'
})
// a bunch of other redirections
.otherwise({
templateUrl: '/partials/404.html?cache-bust=' + cacheBustSuffix,
controller: 'ctrl404'});
}]);
from services.js:
'use strict';
var app = angular.module('myApp.services', ['ngResource']).
factory('List', function ($resource) {
return $resource(WSROOT + '/search', {}, {get: {method: 'GET', isArray: false}});
});
from controllers.js, one controller that makes multiple requests
var controllers = angular.module('myApp.controllers', []);
var ctrlList = controllers.controller('ctrlList', function ($scope, $window, List) {
$window.document.title = 'myApp - List';
List.get({}, function (data) {
// $scope.res is an array of objects
$scope.res = data.response;
$scope.nitems = data.response.length;
});
});
ctrlList.$inject = ['$scope', 'List'];
And the network call when loading the index+home and navigating to some other page. As you can see, it first loads the index page, the scripts and styles listed there (not shown), then the home where I have a controller similar to the one above and suddenly two wild request to my web server:
Can we see your HTML files? I had this problem a while back. My solution was that by declaring a controller in the routing, and in the pages, a double post was created as each controller was loaded twice.
//Home
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl' // <-- This goes away
}
}
})
Wondering if there's an 'angular specific' way to try and achieve this.
I have a page with some views. When a user clicks an anchor, the views change, simple enough. What I'm curious is, if when the user clicks, is it possible to store a variable (say the span) then pass it to the $routeProvider to load the content a bit more dynamically?
so for anchor tag #name1, when that view is displayed, I can pass "name1" into nameHolder as a variable to load some files with same name.
HTML
<span>name1</span>
JS
var nameHolder = [];
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/' + nameHolder, {
templateUrl: 'templates/individkcd.html',
controller: 'individ',
nameofuser: nameHolder
}).
when('/', {
templateUrl: 'templates/home.html'
});
}]);
sampleApp.controller('individ', function($scope, $route) {
$scope.img = $route.current.nameHolder;
});
Thanks for any info.
UPDATED:
Solution at new thread.
angular js - passing a variable into $routeProvider
You need to add the parameter to your $routeProvider template:
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/' + nameHolder, {
templateUrl: 'templates/individkcd/:nameHolder',
controller: 'individ'
}).
when('/', {
templateUrl: 'templates/home.html'
});
}]);
Then in your target controller use $routeParams:
sampleApp.controller('individ', function($scope, $routeParams) {
$scope.img = $routeParams.nameHolder;
});
From the $routeProvider docs linked above:
path can contain named groups starting with a colon: e.g. :name. All
characters up to the next slash are matched and stored in $routeParams
under the given name when the route matches
I need to update a variable on a per template basis.
My main index file (the layout file) displays this value. I can use ng-init, but that only works if I call ng-init before the expression.
If I use ng-init on the template pages, it does not work (I suspect due to code order).
ng-ignit
<div ng-init="amount='4'"></div>
Index.html (layout file)
<span class="amount">{{amount}}</span>
Main_controller.js
$scope.amount = 1; //default value
How can I have multiple templates with different values of the amount variable?
There are so many ways of achieving what you desire. But the most relevant way to what you're looking for is using a resolve.
Use a resolve in your routeProvider
var sampleApp = angular.module('phonecatApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'templates/page1.html',
controller: 'myController',
resolve: {
data: 1
}
}).
when('/showOrders', {
templateUrl: 'templates/page2.html',
controller: 'ShowOrdersController',
resolve: {
data: 2
}
}).
otherwise({
redirectTo: '/page1'
});
}]);
In your controller
sampleApp.controller('myController', function($scope, data){
$scope.amount = data;
})
This question already has answers here:
AngularJS - How to use $routeParams in generating the templateUrl?
(8 answers)
Closed 3 years ago.
I am building an angularjs app, my app.js looks like this. However, it throws Unknown provider: $routeParams error. Any idea why?
var angularSite = angular.module('angularSite', [
'ui.router',
'ngRoute',
'siteController',
'siteDirectives'
])
.config(['$routeProvider', '$routeParams',
function($routeProvider,$routeParams) {
$routeProvider.
when('/Projects', {
templateUrl: 'partials/projects.html',
controller: 'ProjectController'
}).
when('/Projects/:projectId', {
template: 'partials/pages/'+$routeParams.projectId+'.html',
controller: 'ProjectDetailController'
}).
otherwise({
redirectTo: '/About'
});
}]);
$routeParams is a service and can not be injected in .config.
If you want to set your templateUrl from URL params, the correct way is to use a function to set the templateUrl (as following):
.when('/Projects/:projectId', {
templateUrl: function(params) { // <--
return 'partials/pages/' + params.projectId + '.html'
},
controller: 'ProjectDetailController'
})
Available in AngularJS 1.2 access route params at a configuration level replace.
template: 'partials/pages/'+$routeParams.projectId+'.html',
with:
templateUrl: function(params){ return 'partials/pages/' + params.projectId + 'html'; }
source - AngularJS - How to use $routeParams in generating the templateUrl?
In the config of an Angular module is not allowed to use services. $routeParams is a Service so you can not use it there.
I would recommend you to include one template or another through your controller ProjectDetailController.
In this controller you can inject and use the service $routeParams, in order to choose one template or another. Something like:
So, your config:
when('/Projects/:projectId', {
template: 'partials/pages/main.html',
controller: 'ProjectDetailController'
}).
Your controller:
Controller.$inject = ['$routeParams'];
/* #ngInject */
function Controller($routeParams) {
var vm = this;
vm.template = 'partials/pages/'+$routeParams.projectId+'.html';
}
And your main.html template:
<ng-include src="vm.template"/>
I'm trying to build a myApp.config module to store some settings for my app, I wrote a config.js file:
angular.module('myApp.config', [])
.constant('APP_NAME','My Angular App!')
.constant('APP_VERSION','0.3');
I added it to my app.js (angular-seed):
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'myApp.config']).
I added it to the index.html file, and now I'm trying to figure out how to get it in my controllers, I tried:
angular.module('myApp.controllers', ['myApp.config'])
.controller('ListCtrl', ['$scope', 'myApp.config', function($scope, $config) {
$scope.printme = $config;
}])
but I'm getting:
Unknown provider: myApp.configProvider <- myApp.config
I'm probably doing something wrong here, any ideas ?
I don't think it is valid to use the module name in an injection like that. You can simply inject the constants by name, though:
angular.module('myApp.controllers', ['myApp.config'])
.controller('ListCtrl', ['$scope', 'APP_NAME', function($scope, appName) {
$scope.printme = appName;
}]);
I think the simplest approach is to add a constant using an object literal. This fits most application configuration use cases I think, because it supports a complex config object. The constant step also runs early, before other providers are registered.
angular.module('myApp').constant('cfg', {
url: 'https://myapi.com/v1/',
httpTimeout: 5000
})
To use it you just inject cfg:
angular.module('myApp').factory('user', function(cfg, $http){
// cfg and $http together at last
})
It should also be noted that SimplGy's solution means that the 'cfg' object is a constant, however the properties of that object are not. This means, that you cannot reassign 'cfg' like so:
cfg = { randomProperty: randomValue };
You CAN reassign the properties of the 'cfg' object like so:
cfg.url = 'BrandNewURL.com';
cfg.httpTimeout = 30;
Check out the use of constants in this example:
angular
.module('abp001App', ['ngRoute'])
.constant("myConfig", {
"url": "http://localhost",
"port": "80"
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.controller('MainCtrl', function (myConfig) {
// Do something with myConfig...
});