Develop Reference

Controller not loading up

I have the following Index.html file (I put div with ng-view as well):
<ul ng-controller="myController">
<li>
Do it!
</li>
</ul>
routes config:
$routeProvider.when('/doit', {
templateUrl: 'partials/doit.html'
controller: 'myController'
});
$routeProvider.otherwise({
redirectTo: 'index.html'
});
Controller:
app.controller('myController', ['$scope', '$location', function ($scope, $location) {
$scope.name = "name";
alert($scope.name);
$location.path("/");
}]);
The weird thig is that after I click on the Do it! link, it goes to http://localhost:3000/#/doit.html (the code of myController executes after the click, I see the alert pop-up), and then I go back to http://localhost:3000/#/index.html (this is what I want, I put $location.path("/") in the controller.
However, this time, for some reason, the controller code doesn't execute. It only runs after I refresh the page, even though it is assigned to the unordered list. Could anyone help please?

Your routes config should be something like:
$routeProvider.
when('/', {
templateUrl: '/index.html',
controller: 'homeCtrl'
}).
when('/doit', {
templateUrl: 'partials/doit.html',
controller: 'myController'
}).
otherwise({
redirectTo: '/'
});
and you do not need to specify controller name at two places i.e. in the partial and in your route config, specifying at the config level should be sufficient.
The doit view should be the one which is loaded in the ng-view tag as it is a state of your application.

How to initialize default route in angular?

So I'm trying to use angular routing in my application. The problem is that the route "/" does not get initialized automatically. So I first go to "/" and the main content of the page is empty (the template is not loaded at all), I click the link to /settings and settings are loaded, then I click a link to "/" and this time the template is initialized correctly. So how do I make the thing initialized at the beginning?
Here's my routing configuration:
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
I tried calling $location.url("/profile") from a controller and it did help, but the url has to be changed and I would rather keep the "/"

use otherwise({ redirectTo: "/" })
Update : here how it should be
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
}).otherwise({ redirectTo: '/' });

AngularJS specific HTML on route suffix

I am building a simple gallery with Angular and I am trying to have a template shown on some route, which is very easy with angular.
some.site/#/gallery
is done with
App.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/gallery', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery'
})
.otherwise({
redirectTo: '/'
});
}
]);
But then I want to have a div popup when user clicks on thing and goes to
some.site/#/gallery/thing/1
Note that I still want my gallery to be on the background.
My initial idea was to have that div always hidden unless there's */thing so that I could just get the id like so */thing/:id when needed, but this approach seems rather ugly, because why have that thing hanging in there all the time?
Are there any other, better ways of doing that?

What you can do is set a $routeParam depending on your route, let's say:
if url is /gallery, then 'showPopup' = false
if url is /gallery/thing/:id, then 'showPopup' = true
and then in your html you bind the popup state to $routeParams.showPopup.
To do so, you can set the params directly in your mapping:
App.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/gallery', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery',
resolve: {
ignored: function ($route) {
$route.current.params.showPopup = false;
}
}
})
.when('/gallery/thing/:id', {
templateUrl: 'js/views/gallery/main.htm',
controller: 'galleryCtrl',
controllerAs: 'gallery',
resolve: {
ignored: function ($route) {
$route.current.params.showPopup = true;
}
}
})
.otherwise({
redirectTo: '/'
});
}
]);
Hope I helped !

Unable to match route in AngularJS

I have the following code in my app.js:
var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
otherwise({
templateUrl: '/angularjs/public/angular/views/home.html'
});
$locationProvider.html5Mode(true);
}]);
When I go to home at http://localhost/angularjs/public, the .otherwise kicks in correctly.
If I go to http://localhost/angularjs/public/products, nothing happens, or more precisely, I believe .otherwise is invoked again, since is displayed the home.html view. Also no error is throwed in batarang's console.
What could be the problem?

you need to add "public" to product slug in your route
when('public/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).

Angular Route redirects to 404

Here's my problem : for some reason, on valid links, Angular can't find what I'm looking for and return the 404. Here's the route configuration :
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});
$routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
$routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
$routeProvider.when('/products', {templateUrl: 'partials/products.html'});
$routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
$routeProvider.when('/order', {templateUrl: 'partials/order.html'});
$routeProvider.when('/404', {templateUrl: 'partials/404.html'});
$routeProvider.otherwise({redirectTo: '/404'});
For example : a link ( such as <a href="#/menu/{[{menu.id}]}" translate >SEE</a>) pointing to /menu/45122245, will work when I'm on /menus/ view, but not on /home/ (and return the 404).
Same URL is used, same object with same ID, so I don't know what is going on. I don't know if any other code could help you, let me know what you need :)

May be I am too late to reply to this post, but nevertheless I believe the following solution should do the trick,
angular.module('moduleName')
..config(['$compileProvider', '$routeProvider', function ($compileProvider, $routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/home.html'});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});
$routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
$routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
$routeProvider.when('/products', {templateUrl: 'partials/products.html'});
$routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
$routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
$routeProvider.when('/order', {templateUrl: 'partials/order.html'});
$routeProvider.when('/404', {templateUrl: 'partials/404.html'});
$routeProvider.otherwise({redirectTo: '/404'});
}])
.run(['$location', function ($location) {
if ($location.path() === '' && $location.$$absUrl.indexOf('/partials') > -1) {
$location.path('/home')
}
}]);

Angular requires you to specify the url base in the head of your main html file () unless html5Mode.requireBase is set to false in the html5Mode definition object passed to $locationProvider.html5Mode(). With that, relative urls will always be resolved to this base url, even if the initial url of the document was different.