agenda:
- Add MVC application
- Reference angularjs to MVC application
- Add angularjs router and angularjs controller
- Modify _Layout.cshtml and some mvc view to use angularjs.
- Run and see result
Add MVC application
Step 1:From your visual studio File=> New project => Visual c# => ASP.Net Web Application=> input AngularJs_MVC_Routing to “Name:” => OK
Step 2:
- Add AngularTemplates folder to root of project, this folder will be contains angularjs template of views
- Add AngularJsRouting and AngularJsControllers folder to Scripts folder, this folders will be contains of angularjs routing and angularjs controllers
Your project structure look like as below:
Reference angularjs library to MVC application
In this step add want to add angular.min.js and angular-route to my mvc application.I dot it by add following code to header of View/Shared/_Layout.cshtml
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.js"></script>
Add angularjs router and angularjs controller
Step 1: add angularjs routingRight click Scripts\AngularJsRouting folder add Routing.js will following code:
var app = angular.module('MyApp', ['ngRoute']);
app.config([
'$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$routeProvider
.when('/', { // For Home Page
templateUrl: '/AngularTemplates/Home.html',
controller: 'HomeController'
})
.when('/Home/Contact', { // For Contact page
templateUrl: '/AngularTemplates/Contact.html',
controller: 'ContactController'
})
.when('/Home/About', { // For About page
templateUrl: '/AngularTemplates/About.html',
controller: 'AboutController'
})
.when('/Home/User/:userid', { // For User page
templateUrl: '/AngularTemplates/User.html',
controller: 'UserController'
})
.otherwise({ // This is when any route not matched => error
controller: 'ErrorController'
})
}]);
Description: above code I use $routeProvider to make rounting for 4 views (Home, Contact, About, User), note that I use templateUrl for each routing, we will add that templates later. Next step we must create angularjs controllers for each.
Step 1: add angularjs controllers
Based on routing code above we must add HomeController, ContactController, AboutController, UserController and ErrorController.
Right click Scripts\AngularJsControllers folder add Controllers.js will following code:
var app = angular.module('MyApp');
app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {
$scope.Message = "This is User Page with query string id value = " + $routeParams.userid;
}]);
app.controller('HomeController', function ($scope) {
$scope.Message = "This is HOME page";
})
app.controller('AboutController', function ($scope) {
$scope.Message = "This is ABOUT page";
})
app.controller('ContactController', function ($scope) {
// $routeParams used for get query string value
$scope.Message = "This is Contact Page ";
})
app.controller('ErrorController', function ($scope) {
$scope.Message = "404 Not Found!";
});
Modify _Layout.cshtml and some mvc view to use angularjs.
- Step 1: Add templates for Home, About, User and ContactRight click AngularTemplates add
+ About.html as following
<h2>About Page</h2>
<p>{{Message}}</p>
+ Contact.html as following
<h2>Contact Page</h2>
<p>{{Message}}</p>
<h2>Home Page</h2>
<p>{{Message}}</p>
<h2>User Page</h2>
<p>{{Message}}</p>
- Step 2: open HomeController.cs add controller for User by following code
public ActionResult User(int id)
{
ViewBag.Message = "Your user page.";
return View();
}
Right click User controller method to add User view for it
- Step 3: open View/Shared/_Layout.cshtml and modify it by add Routing.js and Controllers.js and actionlink for User view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.js"></script>
</head>
<body ng-app="MyApp">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("User", "User/100", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="~/Scripts/AngularJsRouting/Routing.js"></script>
<script src="~/Scripts/AngularJsControllers/Controllers.js"></script>
</body>
</html>
Run and see result
Add will add source code to my GitHub and post link here.
Thanks for your time reading!
No comments:
Post a Comment