I am just getting started with an angular project. We have a number of simple views and controllers, and have been using the mechanism provided by $routeProvider to map controllers to views. Upon updating to angular v1.2.0 the $routeProvider mechanism appears to be gone and replaced with something better. However, I have not been able to find a coherent code example showing how to make the switch.
What I have looks like this:
theApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})...
What has that changed to?
Thanks
It is still $routeProvider, but they moved it out into a module. You need to add it to the list of dependencies for your app by injecting 'ngRoute'.
You can get the routing module with the others for http://code.angularjs.org/1.2.0-rc.2/
here.
Related
I am relative new to angular and tried to create a new webapp with a yeoman generator. All good but then I try to add a new route,
angular
.module('App', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/reset', {
templateUrl: 'views/test.html',
controller: 'TestCtrl',
controllerAs: 'test'
})
});
However when I try to access the route like:
http://localhost:8081/#/reset
It keeps getting replaced with:
http://localhost:8081/#!#%2Freset
Take a look at this answer and see if it solves your problem. It looks like you may need to add $locationProvider.hashPrefix(''); to the route config.
I am using $routeProvider with an angular app so I have a configuration like so:
$routeProvider
.when '/compilations',
templateUrl: 'angular/templates/player_compilation.html'
controller: 'compilationController'
.when '/news',
templateUrl: 'angular/templates/player_news.html'
controller: 'newsController'
.otherwise
redirectTo: '/compilations'
So this will give me the pages: www.mydomain.com/#/ compilations and www.mydomain.com/#/news
Is it possible for me to use the url: www.mydomain.com? If so, what would be the configuration?
Additional Explication
What I am trying to do (and perhaps this is a lost cause) is use angularjs for only part of the domain. so www.mydomain.com/news, and www.mydomain.com/compilations are part of the angular app, but www.mydomain.com/sign_in gets served separate, non-angular content. So this works, but I am trying to get the base domain: www.mydomain.com to be part of the angular app without a redirect. I have been unable to figure out how to do this?
I solved this by using $location html5 modes. For pages outside the angular app I created a controller which reloaded the page:
.otherwise
templateUrl: 'angular/templates/blank_page.html'
controller: 'redirectController'
I'm working on an Angular.js application. It has 7 "pages" that make up a report about backlinks. The main url looks like http://www.site.com/report/# so the first route below '/' points to that URL.
My problem is I want to have the report ID in the url. So something like this. http://www.site.com/report/#/:reportId or http://www.site.com/report/#/99DF82A023FCE3515BE9A18F00908939F5A29D14.
I need to access that ID and store it somehow for each page. So on http://www.site.com/report/#/live I still need access to reportID.
Im sure this is a simple thing but Im an Angular noob. Can someone point me towards a tutorial for this? Here's what I have so far.
'use strict';
// Declare app level module which depends on filters, and services
var ultModule = angular.module('ultimate-report', ['ngRoute', 'ngCookies', 'ngTable', 'ultimate.filters','ultimate.services','ultimate.directives','myApp.controllers', 'ultimate.config']);
ultModule.config(['$routeProvider', function($routeProvider, $routeParams) {
$routeProvider
.when('/', {templateUrl: '../partials/report/about.html', controller: 'CtrlReport'})
.when('/live', {templateUrl: '../partials/report/links-live.html', controller: 'CtrlLinksLive'})
.when('/dead', {templateUrl: '../partials/report/links-dead.html', controller: 'CtrlReport'})
.when('/selected', {templateUrl: '../partials/report/links-selected.html', controller: 'CtrlReport'})
.when('/patterns', {templateUrl: '../partials/report/patterns.html', controller: 'CtrlReport'})
.when('/exports', {templateUrl: '../partials/report/export.html', controller: 'CtrlReport'})
.when('/help', {templateUrl: '../partials/report/help.html', controller: 'CtrlReport'})
.otherwise({redirectTo: '/'});
}]);
So do you really want the other urls (e.g. http://www.site.com/report/#/live) to not have the report id in them? It would be a lot easier/shorter if you had the parameters in each adress (e.g. http://www.site.com/report/#/12334223287/live).
Nonetheless, I would create my own service ('ReportID') that just stores the report ID. And then include both $routeParams and ReportID (your service) as dependencies in your controller.
app.controller('CtrlReport', ['$routeParams', 'ReportID', '$scope'],
function($routeParams, ReportID, $scope){
ReportID.id = $routeParams.reportID;
})
and set up your route as such
.when('/report/:reportID', ...)
Angular ui-router is a great extension to Angular.js that makes it easy to handle route parameters, nested views etc.
As others have pointed out, keeping the ID in the url for all pages is a good idea - without that people cannot bookmark the page and go straight back to viewing the same item in the same view.
I have really basic use case in my app where I use AngularJS (1.0.8) for front end and Grails for back end. In the app layout I have a language switcher which allows the user to change the language. Switching the language, it does new http request to retrieve the page. Grails renders all language related stuff (i.e. labels) properly translated. This only works for Chrome, FF, and so but not for IE. IE renders proper language just for layout which is rendered by the main request.
I located the problem. I have defined $routeProvider where I load major of the app content. It is cached by default, therefore IE doesn't load templateUrl of $routeProvider because it loads them from cache:
myApp.config(function ($routeProvider) {
$routeProvider.
when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
});
What I don't get is why it works in all other browsers.
I found some post how to clear cache but they doesn't work for me. Is there any solution for me? If not, I find $routeProvider completely useless for my use case.
Post I found:
angularjs clear history when view loaded
AngularJS disable partial caching on dev machine
Below should do it. You can manipulate angularjs's template caches by using $templateCache, so $routeProvider will load the template as new every time you access the controller.
myApp.config(function ($routeProvider) {
$routeProvider.
when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
})
.controller('MyCtrl', function ($scope, $templateCache) {
$templateCache.remove('/eshop/myConfig');
// or
$templateCache.removeAll();
});
I was having the same issue with $routeProvider. And yes, the $templateCache does not help in this situation. Instead of keeping finding the real 'cache' source, I added the stamp parameter after the templateUrl.
In my code:
$routeProvider.
when('/', {templateUrl: '../views/home.html?v='+window.buildNumber, controller: 'HomeCtrll'}).
when('/report', {templateUrl: '../views/form.html?v='+window.buildNumber, controller: 'FormCtrll'}).
otherwise({redirectTo: '/'});
Sadly, I used a global variable "buildNumber" to save my life. Because I also use RequireJS for my AngularJS project, so this "buildNumber" will also be added to every dependency JS file by using the code:
require.config({
urlArgs: "v=" + window.buildNumber,
paths: {....}
});
Then every time the JS source or template html has been changed, I will only need to update that "buildNumber" in global scope. This is just a thought for the future updates in production environment. Hope this helps.
So the only solution I found was to completely disable cache for ajax queries. I found the solution here: https://stackoverflow.com/a/19771501/607038
myModule.config(['$httpProvider', function($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);
I don't like this solution because it disable cashing for the content which is really static. So if you have better solution than share it.
I have the following set up:
var userSystemApp = angular.module("userSystem",['userServices','groupServices']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/user', {templateUrl: 'user/partials/userlist.html', controller: 'userListController'}).
when('/user/:userName', {templateUrl: 'user/partials/userdetail.html', controller: 'userDetailController'}).
when('/group',{templateUrl: 'group/partials/grouplist.html', controller: 'groupListController'}).
when('/group/:groupName', {templateUrl: 'group/partials/groupDetail.html', controller: 'groupDetailController'}).
otherwise({redirectTo: '/user'});
}]);
When I go to localhost/#/user the groupListController is activated.
When I go to localhost/#/group the groupListController is activated but it uses the userlist.html partial template.
Why isn't it using the proper controller? Am I fundamentally using routing and templates improperly?
(side note, I have mod_rewrite taking rewriting the blank path to index.html)
Probably there is an error where the controllers are defined.
It seems you have something like:
userSystemApp.controller('userListController', theFunction);
But theFunction instead of being the correct one, which returns the userListController, is by mistake the one which defines the groupListController.