Develop Reference

Angular Routing within an ASP.NET MVC application

I have a link as follows:
view
And a div that's going to load Home.html as below:
<div class="col-md-8">
<ng-view></ng-view>
</div>
My angular config is:
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})
.controller("BlogController", function ($scope, $http) {
$http.get("/Home/GetBlogEntries")
.then(function (response) {
$scope.data = response.data;
});
$scope.removeBlogEntry = function (index) {
$scope.data.Data.splice(index, 1);
};
})
.controller("HomeController", function ($scope, $http) {
});
Before I click the link, the URL is showing http://localhost:58679/#/Home and after I click it, the address bar goes to http://localhost:58679/#!#%2FHome
Basically nothing happens and my home.html doesn't get rendered where it is supposed to.

Include $locationProvider.hashPrefix(''); in your config.
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})

Angularjs routing without hash with multiple var

Yo everyone.
I searched how to remove the hash(#) from the routing (source: AngularJS routing without the hash '#') but I encountered a problem.
I'll explain.
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: TestCtrl,
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: PageCtrl,
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
For the first redirection
- I've got something like : www.my-website.com/test
all is working fine.
For the second :
- www.my-website.com/test/hello
and here, there is a prob, when I put more than one " / " in the route, no page is loaded and I've got two
Failed to load resource: the server responded with a status of 404
(Not Found)
in my console.
One called : www.my-website.com/test/page.html and the other : www.my-website.com/test/hello
Hope someone can help me. Thanks in advance.

Angular 1.4.x requires that 'ngRoute' be included in the module to use $routeProvider and $locationProvider so include it as a <script...>:
angular-router (see here).
I am assuming you see something like:
To include it in your module:
var app = angular.module('someModule', ['ngRoute']);
And the controller needs to be in quotes controller: 'someCtrl' like:
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: 'TestCtrl',
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: 'PageCtrl',
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
Here is an example that I put together: http://plnkr.co/edit/wyFNoh?p=preview
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/hello/:idHere', {
templateUrl: 'resolveView.html',
controller: 'helloCtrl',
resolve: {
exclamVal: function(){
return '!!!!!!!!!!'
}
}
})
.when('/default', {
templateUrl: 'default.html',
controller: 'defaultCtrl'
})
.when('/test', {
controller: 'testCtrl',
templateUrl: 'test.html'
})
.otherwise({ redirectTo: '/default' });
$locationProvider.html5Mode(true);
}]);
app.controller('MainCtrl', function($scope, $location, $routeParams) {
});
app.controller('testCtrl', function($scope, $routeParams) {
console.log('hi')
});
app.controller('defaultCtrl', function($scope, $routeParams) {
console.log('Inside defaultCtrl')
});
app.controller('helloCtrl', function($scope, exclamVal, $routeParams) {
$scope.exclamVal = exclamVal;
$scope.myVar = $routeParams.idHere;
});

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";
});
})();

Error: $injector:modulerr Module Error, property 'when' of undefined Angular

I have been researching and trying to figure out this error for 2days now and Still no luck.
To begin I new to angular, and I have following this tutorial : http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/
Every was going well until my grid was not filling with data. So I decided to make minor changes to code and now I have ran into this error.
in my js file:
var MyApp = angular.module("Myapp", ["ngResource", "ngRoute"]).
config([function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'list.html', controller: 'ListCtrl' }).
otherwise({ redirectTo: '/' });
}]);
MyApp.factory('Myapp', function ($resource) {
return $resource('/Myapp/:id', { id: '#id' }, { update: {
method: 'PUT' } });
});
MyApp.controller('ListCtrl', ['$scope', 'ds72', function ($scope, Myapp) {
$scope.todos = Myapp.query();
}]);
can some one please explain to me what i am doing wrong?
PS: These are all my Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"> </script>
<script src="/Scripts/angular-route.min.js"></script>

try something like that
var MyApp = angular.module("Myapp", ["ngResource", "ngRoute"]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'list.html', controller: 'ListCtrl' }).
otherwise({ redirectTo: '/' });
}]);
you must add the name of the provider to inject when you use the array declaration
.config(['$routeProvider'/*must be the exact name*/, function(route/*get the $routeProvider value*/) {}])
//equivalent as
.config(function($routeProvider) {})

Setting file path and organizing the code in Angularjs

Hi I have following module, route and controller defined in one file called main.js
var mainApp = angular.module("mainApp", ["ngRoute", "ngResource", "ui"]).
config(function ($routeProvider) {
$routeProvider.
when('/addEmp', { controller: EmpCtrl, templateUrl: 'addEmp.html' }).
when('/addLoc', { controller: LocCtrl, templateUrl: 'newLocation.html' }).
otherwise({ redirectTo: '/' });
});
mainApp.factory("addEmp", ['$resource', function ($resource) {
return $resource('/api/addEmp/:id', { id: '#id' }, { update: { method: 'PUT' } });
}]);
mainApp.factory("addLoc", ['$resource', function ($resource) {
return $resource('/api/newLoc/:id', { id: '#id' }, { update: { method: 'PUT' } });
}]);
//Controllers
var EmpCtrl = function ($scope, $location, addEmp) {
//code here
};
var LocCtrl = function ($scope, $location, newLocation) {
//code here
};
What I am trying to do is organize this one file code into different files. I created script/controller folder where I want to have individual files for controller like
EmpCtrl.js and LocCtrl.js.
When I created the controller files and copied the controller code in it i get error of EmptCtrl and LocCtrl not defined.
Can you please tell me how I can set it up in different folders with appropriate path settings?
Thanks

try this
angular.module("mainApp", ["ngRoute", "ngResource", "ui"]).
config(function ($routeProvider) {
$routeProvider.
when('/addEmp', { controller: 'empCtrl', templateUrl: 'addEmp.html' }).
when('/addLoc', { controller: 'locCtrl', templateUrl: 'newLocation.html' }).
otherwise({ redirectTo: '/' });
});
//in empCtrl.js file
angular.module('mainApp').controller('empCtrl', ['$scope', '$location', 'addEmp',
function ($scope, $location, addEmp) {
//code here
}]);
// same for locCtrl
In your html make sure to include your mainApp.js file before you empCtrl and locCtrl scripts
the key is that you use string names to refer to your controller in your rout configs
{ controller: 'empCtrl' ... }
instead of
{ controller: EmpCtrl ... }
I would recommend that you use require.js to modularize your Angular project, you won't have to worry about order of script includes and it will result in a cleaner project