Develop Reference

how to execute ng-init in angularJS everytime the route changes

I have index file
<div ng-app="myApp" data-ng-init="init()">
<ng-view></ng-view>
</div>
script looks like this
var app = angular.module('myApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when('/home/',
{
template: 'home.html',
controller: 'homeController'
}) .
when('/menu/',
{
templateUrl: 'menu.html',
controller: 'menuController'
})
app.controller('homeController',function($scope,$rootScope){
$scope.init=function(){
alert('executing the init function')
}
})
app.controller('menuController',function($scope,$location){
if($scope.var1){
$location.path('/home/')
}
})
the first time the path is /home/ the alert is triggered.but from the menu controller when the variable var1 is true then path is changed to /home/ again but the init function is not running and alert is not triggered. how can this be fixed. i want the init in homecontroller to run everytime the path is changed to /home/

You can try this. It might work.
var app = angular.module('myApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when('/home/',
{
template: 'home.html',
controller: 'homeController'
}) .
when('/menu/',
{
templateUrl: 'menu.html',
controller: 'menuController'
})
app.controller('homeController',function($scope,$rootScope){
var init=function(){
alert('executing the init function')
};
init();
})
app.controller('menuController',function($scope,$location){
if($scope.var1){
$location.path('/home/')
}
})

ngRoute dependency injection error but angular-route.js.min is loaded

I can't figure out why the module is failing to load on ngRoute. I have angular and angular-route scripts loading from cdn but I'm still getting the error Error: $injector:modulerr
Module Error
<!--Angular-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-route.min.js"></script>
<script src="app/index.js"></script>
<script src="app/components/blog/blogControllers.js"></script>
// index.js
'use strict';
var pdizzApp = angular.module('pdizzApp', [
'ngRoute',
'blogControllers'
]);
pdizzApp.config(['$routeProvider'], function ($routeProvider) {
$routeProvider
.when('/blog', {
templateUrl: 'blog/view/blog-list.html',
controller: 'BlogListController'
})
.otherwise({
redirectTo: '/blog'
})
});
//blogControllers.js
'use strict';
var blogControllers = angular.module('blogControllers', []);
blogControllers.controller('BlogListController', ['$scope', '$http',
function ($scope, $http) {
$http.get('/api/blog/post').success(function (data) {
$scope.posts = data._embedded.post;
});
$scope.toDate = function(date) {
return new Date(Date.parse(date));
}
}]);

Your config block should look as follows, i.e. the method needs to be declared inside the array that you pass to the config method:
pdizzApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/blog', {
templateUrl: 'blog/view/blog-list.html',
controller: 'BlogListController'
})
.otherwise({
redirectTo: '/blog'
});
}]);

Defining a controller in a $routeProvider route that is located in a separate file

The original code is as follows:
(function() {
angular.module('test', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: '/templates/test.html',
controller: 'testCtrl'
})
.when('/test2', {
templateUrl: '/templates/test2.html',
controller: 'test2Ctrl'
})
.otherwise({
redirectTo: '/test'
});
});
})();
//ANOTHER FILE
(function() {
angular.module('test')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
});
There were no errors, but all that would show up in the templates was {{name}} instead of what was defined in the scope.
Then I tried moving the controllers into another module and dependency injected it in. Interestingly, even if the controllers were moved to a separate module it would not work:
(function () {
angular.module('test2', []);
angular.module('test', ['ngRoute', 'test2']);
})();
//ANOTHER FILE
(function() {
angular.module('test')
.config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: '/templates/test.html',
controller: 'testCtrl'
})
.when('/test2', {
templateUrl: '/templates/test2.html',
controller: 'test2Ctrl'
})
.otherwise({
redirectTo: '/test'
});
});
})();
//ANOTHER FILE
(function() {
angular.module('test2')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
});
In fact, in this one it threw an error that the controllers could not be found.
From my understanding this is happening because due to the nature of how the config block runs, and how it runs before the controllers have been registered.
One way I've solved this is by instead moving the controller and template into a directive and then using the directive itself as the template.
(function() {
angular.module('test')
.config(function($routeProvider) {
$routeProvider
$routeProvider
.when('/', {
template: '<test></test>'
})
.when('/test2', {
template: '<test2></test2>'
})
.when('/test3', {
template: '<test3></test3>'
})
.otherwise({
redirectTo: '/'
});
});
})();
I was wondering if anyone else had a way to support putting controllers into a router when your controllers are in a separate file.

You have been missing an () self executing function (IIFE) on the file of your controller.
//ANOTHER FILE
(function() {
angular.module('test2')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
})(); //<-- added here

You can organize the project in this way
templates/
test.html
test2.html
app/
app.js
controllers/
testCtrl.js
test2Ctrl.js
app.js
(function() {
angular.module('test', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/test', {
templateUrl: '/templates/test.html',
controller: 'testCtrl'
})
.when('/test2', {
templateUrl: '/templates/test2.html',
controller: 'test2Ctrl'
})
.otherwise({
redirectTo: '/test'
});
});
})();
html files
Once you add the controllers in your html file may no longer have the problem
<html ng-app='myApp'>
<body ng-controller='TextController'>
....
....
....
<script src="app/controllers/testCtrl.js"></script>
<script src="app/controllers/test2Ctrl.js"></script>
</body>
</html>

This code here was missing the () that would execute it...
(function() {
angular.module('test')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
});
Should be:
(function() {
angular.module('test')
.controller('testCtrl', function($scope) {
$scope.name = "test";
})
.controller('test2Ctrl', function($scope) {
$scope.name = "test2";
});
})();

Angularjs : $locationProvider.hashPrefix("!") ;

I want to show url as "www.test.com/!#" for that i am using $locationProvider.hashPrefix("!") ; but it shows url as "www.test.com/#!" . i want "!" before hash not after hash.
Thanks
var app = angular.module('app', []);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix("!");
$routeProvider.when('/', {
templateUrl: "app.html",
controller: "AppCtrl"
}
)
.when('/Program', {
templateUrl: "detail1.html",
controller: "Redirect"
})
.when('/Program/123456/channel/78458585',
{
templateUrl: "details.html",
controller: "Detail"
});
});
app.controller("AppCtrl", function ($scope) {
});
app.controller("Detail", function ($scope, $location) {
});
app.controller("Redirect", function ($scope, $location) {
$location.path("/Program/123456/channel/78458585")
});

If you want a ! in the URL before the fragment identifier begins, then you need to put it in the URL to start with and not try to do it with Angular.
http://www.example.com/#foo and http://www.example.com/#!foo are different parts of the same page.
But http://www.example.com/#foo and http://www.example.com/!#foo are different pages altogether.

Using HTML5 pushstate on angular.js

I am trying to implement html5's pushstate instead of the # navigation used by Angularjs. I have tried searching google for an answer and also tried the angular irc chat room with no luck yet.
This is my controllers.js:
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
}
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
function greetCntr($scope, $window) {
$scope.greet = function() {
$("#modal").slideDown();
}
}
app.js
angular.module('phoneapp', []).
config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}])

Inject $locationProvider into your config, and set $locationProvider.html5Mode(true).
http://docs.angularjs.org/api/ng.$locationProvider
Simple example:
JS:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});
HTML:
Page 1 | Page 2