For some reason when I have a dynamic property in my route and access that page I get stuck in an infinite loop where that page will continuously request itself.
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.when("/", {
templateUrl: "pages/index.html",
controller: "IndexCtrl"
}).when("/listhome", {
templateUrl: "pages/listhome.html",
controller: "ListHomeCtrl"
}).when("/profile", {
templateUrl: "pages/profile.html",
controller: "ProfileCtrl"
}).when("/newlist", {
templateUrl: "pages/newlist.html",
controller: "NewListCtrl"
}).when("/userlists/:id", {
templateUrl: "pages/userlists.html",
controller: "UserListsCtrl"
}).otherwise({
redirectTo: "/"
});
The route I'm looking at is the /userlists/:id route. The controller for that route is-
TopTenApp.controller("UserListsCtrl", ["$scope","$routeParams", function($scope, $routeParams)
{
console.log($routeParams);
$scope.lists = [];
}]);
And when I access /userlists/9 I see-
Object {id: "9"}
Being logged every 3 seconds and the page freezes. This seems to happen whenever there is a forward slash after the location ("/userslists/" instead of "/userlists").
Does anyone know the cause of this?
Silly me I realized the problem. I guess it makes sense but the template url needs to have a forward slash in front of it when the page is multiple "directories" deep.
.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.when("/", {
templateUrl: "/pages/index.html",
controller: "IndexCtrl"
}).when("/listhome", {
templateUrl: "/pages/listhome.html",
controller: "ListHomeCtrl"
}).when("/profile", {
templateUrl: "/pages/profile.html",
controller: "ProfileCtrl"
}).when("/newlist", {
templateUrl: "/pages/newlist.html",
controller: "NewListCtrl"
}).when("/userlists/:id", {
templateUrl: "/pages/userlists.html",
controller: "UserListsCtrl"
}).otherwise({
redirectTo: "/"
});
}]);
Hopefully that helps someone else with a similar problem.
Related
I have web application where I need to load a template with different parameters like.
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=' + FormID,
controller: 'FormController'
})
I am not able to get the above code working. Can someone tell me how I can fix this issue? I am new to AngularJS and not an expert.
This is the full code.
var app = angular.module('MyApp', ['ui.grid', 'ngSanitize', 'angularTrix', 'ui.codemirror', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'partials/Home.ashx',
controller: 'HomeController'
})
.when('/project/:ProjectID', {
templateUrl: 'partials/Projects.ashx',
controller: 'ProjectController'
})
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=1',
controller: 'FormController'
})
.otherwise({ redirectTo: '/home' });
});
We can use $stateParams and templateProvider to load dynamic templateurl
.state('general', {
url: '/{type}',
//templateUrl: 'pages/home.html',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return $templateRequest(tplName);
}
],
// general controller instead of home
//controller: 'homeController',
controller: 'generalController',
controllerAs: 'ctrl'
I'm kinda new with this UI-Route I know it's very powerful but i'm having problem working on it, I have use AngularJS before but not that often and this time i really want to use it so given that my questions goes like this (I've search everywhere regarding this but no luck for me):
The scenario is I have Index.html on that page I have two views
which are "News" and "Testi" both are confined on a div
So knowing that I added App.js (which will contain the initial code for my AngularJS implementation):
var app = angular.module('wrcheese', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/Views/Index.html',
views: {
'main': {
templateUrl: '/Views/App/home.html'
},
'testi': {
templateUrl: '/Views/App/testimonial.html'
}
},
controller: 'HomeCtrl'
})
});
and my controller goes like this (homeController.js)
'use strict';
app.controller('HomeCtrl', function ($scope, $state) {
$scope.welcomeMessage = 'Welcome to WeRCheese';
});
my problem is that I'm trying to access that "welcomeMessage" on my home.html page but wasn't able to, what strange is that when i put in a breakpoint on my controller it wasn't hit it seems the controller does not exist.
Maybe I'm doing it wrong because I don't have any problem when i use ngRoute before.
Lastly, how do you add in a factory?
app.controller('HomeCtrl', function ($scope, $state, homeFactory) {
});
or
app.controller('HomeCtrl', ['$scope', '$state', 'homeFactory', function ($scope, $state, homeFactory) { }]);
TIA.
I was having problem adding a comment my mistake for not realizing that I need to edit my question here. Anyway for my problem I was able to load the controller via different page but I'm still having problem loading the controller on the Index.html i tried updating the .state -> tried on different approach i.e. use '', '/', 'index' in the views.
.state('home', {
url: '', or '/', or 'index',
templateUrl: '/Views/Index.html',
controller: 'HomeCtrl'
But still the controller is not loading, to be specific I have tried adding this line on my Index.html {{ welcomeMessage }} just to verify that the controller was/has been loaded properly.
When you have add views property to a state, the original template, templateUrl properties will be ignored, so you have to bind controllers in views.
$stateProvider.state('home', {
url: '/home',
templateUrl: 'Views/Index.html', <----- will be ignored
views: {
'main': {
templateUrl: 'Views/App/home.html',
controller: 'HomeCtrl'
},
'testi': {
templateUrl: 'Views/App/testimonial.html',
controller: 'HomeCtrl'
}
},
controller: 'HomeCtrl' <----- will be ignored
})
For factory: after defined it, you can inject it by both the ways you posted.
refer this plunker.
var app = angular.module('wrcheese', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
templateUrl: '/Views/App/home.html',
controller : 'HomeCtrl'
},
'testi': {
templateUrl: '/Views/App/testimonial.html',
controller : 'HomeCtrl'
}
},
})
});
you can do this
.state('home', {
url: '/home',
views: {
'#': {
templateUrl: '/Views/Index.html',
controller: 'HomeCtrl',
controllerAs: 'vm'
},
'main#home': {
templateUrl: '/Views/App/home.html'
},
'testi#home': {
templateUrl: '/Views/App/testimonial.html'
}
}
});
using controllerAs is a best practice
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
I have a single page application where I route to different pages based on url address, I would like to redirect to Homepage when user enters non existing page in the url, so I use otherwise statement, however it causes 404 error, here is my routing config.:
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}]);
EDIT:
Changed it as suggested below buts till the same affect, when I type non existing page it goes to Error 404 instead of /products
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
redirectTo: '/products'
}).
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/products/:id?', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
}).
when('/orders/:id?', {
templateUrl: 'partials/orders.html',
controller: 'OrdersController'
}).
when('/auto', {
templateUrl: 'partials/AutoComplete.html',
controller: 'TypeaheadCtrl'
}).
otherwise({ redirectTo: function () { return '/' } });
$locationProvider.html5Mode(true);
}]);
You don't need the when('/'... and the otherwise as they essentially do the same thing.
The otherwise is a catchall to get anything that isn't matched so you don't need to route the '/' specifically.
$routeProvider.
when('/products/:id?', ...).
when('/orders/:id?', ...).
when('/auto', ...).
otherwise({
redirectTo: '/products'
});
EDIT The problem is that redirecting to '/products' won't match '/products/:id'. You'll need to add another route like as follows:
when('/products', {
templateUrl: 'partials/products.html',
controller: 'ProductsController'
})