I am new with angularjs, and implementing it in ASP.NET MVC. I read few articles and implement code like below,
this is my layout page,
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>angular demo</title>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script>
var schoolModule = angular.module("schoolModule", ['ngRoute']);
schoolModule.config(function ($routeProvider) {
$routeProvider.when('/one', {
templateUrl: "Master/One",
controller: "OneController"
})
.when('/two', {
templateUrl: "Master/Two",
controller: "TwoController"
})
.when('/three', {
templateUrl: "Master/Three",
controller: "ThreeController"
})
.otherwise({
redirectTo: 'Master/One'
});
});
schoolModule.controller("OneController", function ($scope) {
$scope.message = "One message";
});
schoolModule.controller("TwoController", function ($scope) {
$scope.message = "Two message";
});
schoolModule.controller("ThreeController", function ($scope) {
$scope.message = "Three message";
});
</script>
</head>
<body ng-app="schoolModule">
<header>Title</header>
@RenderBody()
<footer>Footer here</footer>
</body>
</html>
My Index page is,
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Master.cshtml";
}
<a href="/#/one">One</a>
<a href="/#/two">Two</a>
<a href="/#/three">Three</a>
<div ng-view>
</div>
I have also created 3 partial views, with messages only.
<div ng-controller="OneController">
{{message}}
</div>
Here, when I run project, the URL is,
http://localhost:52211/Master/index#/Master/one
when I click on second button, it redirects me to different controller and action, but url is,
http://localhost:52211/#/two
and it jumps to Home controller, index action.
Please tell me what mistake I am making here, and how to make it work ? Thank you.
This is how I solved it, If someone is also getting trouble with same thing,
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>angular demo</title>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script>
var schoolModule = angular.module("schoolModule", ['ngRoute']);
schoolModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/One', {
templateUrl: "/Master/One",
controller: "OneController"
})
.when('/two', {
templateUrl: "/Master/Two",
controller: "TwoController"
})
.when("/three", {
templateUrl: "/Master/Three",
controller: "ThreeController"
});
});
schoolModule.controller("OneController", function ($scope, callService, callFactory) {
//$scope.message = "One message";
//$scope.message = callService.message();
$scope.message = callFactory.message();
});
schoolModule.controller("TwoController", function ($scope) {
$scope.message = "Two message";
});
schoolModule.controller("ThreeController", function ($scope) {
$scope.message = "Three message";
});
schoolModule.factory("callFactory", function($http){
var serviceObj = {};
serviceObj.message = function () {
return "Result from factory";
};
return serviceObj;
});
schoolModule.service("callService", function ($http) {
this.message = function () {
return "Result from service";
};
});
</script>
</head>
<body ng-app="schoolModule">
<header>Title</header>
@RenderBody()
<footer>Footer here</footer>
</body>
</html>
My Index view is,
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Master.cshtml";
}
<a href="#/One">One</a>
<a href="#/two">Two</a>
<a href="#/three">Three</a>
<ng-view></ng-view>