AngularJS with ASP.Net MVC (Part 10)

A step by step tutorial on how to use AngularJS with ASP.Net MVC

Precap

We have almost built our simple AngularJS with ASP.Net MVC application during the course of a few posts. The application shows how AngularJS integrates with ASP.Net MVC and uses a few of its features. In case you have not gone through the posts, I would recommend going through them. Here is the link for the first post in the series “AngularJS with ASP.Net MVC“.

Made for Each Other

As I am telling you from the beginning that this tutorial series is not to teach AngularJS or ASP.Net MVC, but to show, how you can use these two technologies together effectively. You might have found till now that these two technologies mix up quite well and can be great if coupled together properly. There is one more area where it can be seen, if used together, they can do wonders and that is Authorization of Content.

Authorization in AngularJS

We will see during the course of this post that how we implement the Authorization in AngularJS only. We have already created an AngularJS application which has a few routes and they all are open to every one. Now let’s say that we have to protect the Page 1, which should be accessible only when there is a user signed in (we will be simulating the sign in process by putting a token in bower’s localStorage). So, let’s begin.

Create Authorization Service

We will take help of an AngularJS service, which will tell if the current user has the access to the given route or not. For the simplicity and quickly moving ahead, you can take a reference from the code snippet below.

(function () {
    'use strict';

    angular.module('app')
        .provider('authorization', function () {
            var getToken = function () {
                return localStorage.getItem('access-token');
            }
            this.$get = ['$q', function ($q) {
                var service = {};

                service.chechAuthorization = function (role) {
                    var deferred = $q.defer();

                    var token = getToken();
                    // TODO: logic to see if the token has
                    // the permission required for the given role.
                    // here should be logic to extract the claims
                    // from token and get the roles from it
                    // we are simply checking as of now, if the token exists
                    if (token) {
                        deferred.resolve();
                    }
                    else {
                        alert("You are not authorized to view this section.")
                        deferred.reject();
                    }

                    return deferred.promise;
                };

                return service;
            }];
        });
})();

This code has been created in a new file named app.authorization.provider.js under folder Scripts -> app ->providers. This service has a single method having the logic to check if the given role is part of the topic. The token is read from browser’s localStorage. The logic here is not the main point of discussion, but to simply demonstrate the use of service to detect the authorizations. You are master of your rules and logic, and I am sure you will be perfectly fine, writing a better and secured logic here. So, let’s move ahead and use this service.

Note: Remember to include the newly created file in the BundleConfig.cs.

Securing AngularJS Route

In the previous step we have created a service which will tell us if the given role is present in the claims received in token. Now we have to modify the route configuration for the state named “page1”. Here is the code after modification of file named app.route.js (notice the highlighted code)

(function () {
    'use strict';

    angular.module('app')
        .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: '/Home/Home'
                })
                .state('page1', {
                    url: '/Page1',
                    resolve: {
                        hasPermission: ['authorization', function (authorization) {
                            console.log('Checking permissions ...')
                            return authorization.chechAuthorization("Customer");
                        }]
                    },
                    views: {
                        '@': {
                            templateUrl: '/Home/Page1'
                        },
                        'left@page1': {
                            templateUrl: 'Home/Page1Left'
                        },
                        'right@page1': {
                            templateUrl: 'Home/Page1Right'
                        }
                    }
                })
                .state('page3', {
                    url: '/Page3',
                    templateUrl: '/Home/Page3'
                });
        }]);
})();

Once you are done with above modification, build and run your application. Try to navigate to Page 1. You will see a message and it will not navigate to Page 1. Here is how it is behaving now.

Getting a Token

We will use a JSON Web Token (JWT) and store it in local storage at client side. There are many online sites, which can generate a JWT for you, where you provide the list of required and additional claims and select a duration for which they should be valid. I have used one of such site (Googled and picked the first result). The main thing to be noted here is the claim(s) we need for this post. I have added a Role claim with a value Customer. Once you have generated the token, open your browser’s developer tools and save the token with a key named “access-token”. Remember to do this while you are running your simple application, so that this token is available to your site. Here is how I have done is for chrome browser.

Now try to access the Page 2, you should be able to do it.

Can it be Improved?

Wow, that’s great. We have an application which can now react to the tokens received by the authentication process. But, it is at the client side and the user can manipulate the code. In the next post we will see, how we can improve this security by moving the authorization logic to server side. We will be securing the views itself, so that the user is not able to get the view if their token doesn’t contain the required role.

Hope, you are enjoying the series. As we are nearing to the end of this series, I would like you to keep a watch on this blog, because you are going to see soon a new series on topic TypeScript – Beginner Course. Please leave any comments or queries if you have any and I will try to answer them as soon as possible. I will appreciate your feedback as it will help me improve the content further.

Thanks for following … cheers!

Series Links

Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 Part 7 Part 8 Part 9 Part 11

AngularJS with ASP.Net MVC (Part 9)

A step by step tutorial on how to use AngularJS with ASP.Net MVC

Precap

Our simple AngularJS with ASP.Net MVC application is already showing off a mixture of two worlds. We started with a plain ASP.Net web applications and molded it, making a base for demonstrating, how at the core level an MVC application can be served as an AngularJS application. Nothing so serious about that. Till now you just served the contents of a MVC view in place of a static HTML page. By the way if you haven’t gone through the previous posts, you can always start it from beginning here. In this post of the series we will be talking about dividing the application into modules (AngularJS) and Areas (ASP.Net MVC).

Match at Next Level

We have already shown how a MVC view can be used for the view template for the AngularJS application. The next thing in AngularJS is modules and these useful in dividing and clubbing the business logic of the application. Say for example you would like to club all the things a Customer can do on your site or there is an Administration part of the site where Admin can control the things. All these interlinked things and functionalities can be and should be bundled together in a single AngularJS module. In the ASP.Net world these things are called Areas, where you club the similar and related functionalities together.

AngularJS modules are not just for the bundling together the business logic for the application navigation but also for the other components like all the API interfaces in a single module for a single service or your custom directives in another one. Similar is not done for the ASP.Net Areas.  Don’t worry, we are going to see that with a small example here very soon.

Soon! why ? … why not just jump into it right away. And do sit tight, as in this post you are going to see a lot of code.

Create an Area

It is very simple and Visual Studio makes it very easy for us, just right click on your project and select Add -> Area, give it a name ( in my case i am going to name it as Customer). visual studio create few folders and files. Once new area is created, we will create 2 controllers named Default and Profile in there. Here is the code snippet to these 2 controllers.

// DefaultController.cs
using System.Web.Mvc;

namespace AngularJSwithMVC.Areas.Customer.Controllers
{
    public class DefaultController : Controller
    {
        public ActionResult Index()
        {
            return PartialView();
        }
    }
}
// ProfleController.cs
using System.Web.Mvc;

namespace AngularJSwithMVC.Areas.Customer.Controllers
{
    public class ProfileController : Controller
    {
        public ActionResult Index()
        {
            return PartialView();
        }
        public ActionResult Edit()
        {
            return PartialView();
        }
    }
}

In the above code you can see that there are 3 actions methods defined in total. The methods are also returning the partial views. One point to be noted here is that as soon as you add a view to the area, the NuGet packages for bootstrap, jQuery and Mordernizr will be add to the project. You can remove those packages safely here for this project.

Let’s add views for each respective action methods. Here is the snippet for the views.

<!-- Default/Index.cshtml -->
<div class="panel" ui-view="section"></div>
<!-- Profile/Index.cshtml -->
<div class="panel-body">
    <div class="row">
        <div class="col-md-12">
            <b>Name:</b> {{customer.name}}<br />
            <b>Age:</b> {{customer.age}}<br />
        </div>
    </div>
</div>
<div class="panel-footer">
    <button class="btn btn-warning" ui-sref=".edit">Edit</button>
</div>
<!-- Profile/edit.cshtml -->
<div class="panel-body">
    <div class="row">
        <div class="col-md-12">
            <b>Name:</b><input class="form-control" type="text" ng-model="editingCustomer.name" /><br />
            <b>Age:</b><input class="form-control" type="text" ng-model="editingCustomer.age" /><br />
        </div>
    </div>
</div>
<div class="panel-footer">
    <button class="btn btn-success" ng-click="save()">Save</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Area Registration

With all that defined, you have to register the MVC Area properly so that the default controller and action method of the area is known by the application. Here is how the CustomerAreaRegistration.cs file looks.

using System.Web.Mvc;

namespace AngularJSwithMVC.Areas.Customer
{
    public class CustomerAreaRegistration : AreaRegistration
    {
        public override string AreaName
        {
            get
            {
                return "Customer";
            }
        }

        public override void RegisterArea(AreaRegistrationContext context)
        {
            context.MapRoute(
                "Customer_default",
                "Customer/{controller}/{action}/{id}",
                new {controller= "Default", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

Notice the highlighted line in the above code, this is only line we have modified from the default.

It’s time for the explanation now. This new area (Customer) has the responsibility of showing and editing the customer profile. In future if we need to perform any other operations on the Customers like, view / Edit contact information, or reset password, all the templates for these features should be clubbed in there in this area.

AngularJS Module

The real control is in the hands of AngularJS module. We have to define a new module in AngularJS. This module will have its own config and routing, all related to the customers. to do that first of all we need to define this new module. for the sake of code manageability, we should divide the code for module and its configs in separate files. Let’s create these 3 files in customer sub-directory under modules directory (newly created) of app directory (Scripts -> app -> modules -> customer).

// customer.module.js
(function () {
    'use strict';

    angular.module('customer', ['ui.router']);
})();
// customer.config.js
(function () {
    'use strict';

    angular.module('customer')
        .config(function () {
            // nothing as of now
        });
})();
// customer.route.js
(function () {
    'use strict';

    angular.module('customer')
        .config(['$stateProvider', function ($stateProvider) {
            $stateProvider
                .state('customer', {
                    url: '/Customer',
                    templateUrl: '/Customer',
                    resolve: {
                        customer: function () {
                            console.log('Resolving Customer');

                            var customer = {
                                name: 'John Doe',
                                age: 23
                            };
                            return customer;
                        }
                    },
                    controller: ['$scope', 'customer', function ($scope, customer) {
                        console.log('Customer Controller');

                        $scope.customer = customer;
                        $scope.saveEdits = function (customer) {
                            $scope.customer = customer;
                        }
                    }]
                })
                .state('customer.profile', {
                    url: '/Profile',
                    views: {
                        'section@customer': {
                            templateUrl: '/Customer/Profile'
                        }
                    }
                })
                .state('customer.profile.edit', {
                    url: '/Edit',
                    views: {
                        'section@customer': {
                            templateUrl: '/Customer/Profile/Edit',
                            controller: ['$scope', '$state', '$stateParams', function ($scope, $state) {
                                console.log('Customer Edit Controller');

                                $scope.editingCustomer = angular.copy($scope.customer)

                                var save = function () {
                                    $scope.saveEdits($scope.editingCustomer);
                                    $state.go('^');
                                };

                                var cancel = function () {
                                    $state.go('^');
                                };

                                $scope.save = save;
                                $scope.cancel = cancel;
                            }]
                        }
                    }
                });
        }]);
})();

Remember, for the sake of this tutorial only, I have defined the controllers in-line for these route definition. But, it is always a good practice to code the controllers in the separate files and refer the controllers here by name.

Let’s Goto Meeting …

We now have all the required components. We have to first include these new scripts in the script package for the clients to receive them, and you know how to do that, yes, include them in the BundleConfig.cs. Here is the code snippet showing the modification.

"~/bower_components/bootstrap/dist/js/bootstrap.js",
"~/Scripts/app/modules/customer/customer.module.js",
"~/Scripts/app/modules/customer/customer.config.js",
"~/Scripts/app/modules/customer/customer.route.js",
"~/Scripts/app/app.module.js",

Now, inject this newly created module in app module. Your code should look something like the one shown in the snippet below.

(function () {
    'use strict';

    angular.module('app', ['ui.router', 'customer']);
})();

It’s time to change the angular routing to load that new module on navigation to a particular route. First of all, lets modify the _Layout.cshtml of our main MVC application (remember the we may have a _Layout.cshtml in the Area folder also, which we are ignoring as of now.). Here are the line modified for the file.

As you might have noticed the we have removed the page2 link from the navigation. We should now remove the state definition for the same from the app.route.js This all completes the code for this post and we should be able to compile and run the application.

The output

Our new module is now active and is available as a link in the navigation. The code is totally separate and can be easily removed in case we are not interested in loading the module or don’t want that module at all, by simply removing the Area, module directory and a few lines from app module. This increase the manageability of the application code and separates the concerns from each other. Hope you have also, completed the code till here and not faced any issue till now.

In case you have any difficulties or need any clarification, please feel free to leave your comments below. I will try my best to answer the queries as soon as possible.

We are now nearing the end of this series on the topic “AngularJS with ASP.Net MVC”. The only thing which remains here as per the scope of this series is “Content Authorization”. I will continue to the next post and leave you here with your code so that you can play with it and get more clarity on it.

Series Links

Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 Part 7 Part 8 Part 10 Part 11

AngularJS with ASP.Net MVC (Part 8)

A step by step tutorial on how to use AngularJS with ASP.Net MVC

Precap

I have started this as a multi-post tutorial a few posts back. In the previous parts we have created a minimal project in Visual Studio 2015 using Web Application’s Empty template with MVC folders and references. The application is running now with the bootstrapped UI containing a navigation of 3 pages. It has been demonstrated how differently application behaves with MVC routing and AngularJS routing. In the previous post we have replaced the angular-route with ui-router and the application is behaving same. You can read those posts part 1part 2part 3part 4part 5part 6 and part 7 in case you have not gone through that already. Let’s move to next step where we will be demonstrating the core feature of a ui-router’s state.

URL vs State

With angular-route, we are bound to the url, i.e. each resource is linked to its url. whereas in case of ui-router resources are liked to state which intern gets linked to optional url. There are scenarios in large applications, where we would like to keep the url same, but change the content based on some conditions. In simple words content is based on the state of the application in place of URL in the navigation bar.

View vs Views

angular-route can only show a single view at a time and view nesting is not supported. Whereas in case of ui-router, we can have multiple view in a single template, which also can be nested inside of other.

for example, we can define separate templates for header, footer, navigation and content on the same page. See the images below for more clarity.

P2163_001

Let’s be Practical

We have seen in part 7 how the states are defined. Here today we will see how we can have multiple / nested views in a given template. In the previous post, we have defined state as below.

state('home', {
    url: '/',
    templateUrl: 'Home/Home'
})

Let’s extend this for having multiple views per state. To do so, modify your page1 state as below.

state('page1', {
                    url: '/Page1',
                    views: {
                        '@': {
                            templateUrl: '/Home/Page1'
                        },
                        'left@page1': {
                            templateUrl: 'Home/Page1Left'
                        },
                        'right@page1': {
                            templateUrl: 'Home/Page1Right'
                        }
                    }
                })

Notice the views object, which replaced the templateUrl. It contains a few fields containing ‘@’. These fields defines the target for the view template. You can read that notation as <viewName>’@'<stateName>. In case of the first field, where viewName and stateName are missing means that it should target the ui-view which has no name and is not defined by any state. Do you know which view placeholder we are talking here. Yes, you are right, the one which we have declared in Index.cshtml.

Where are the other views?

Continue to modify the files as per the snippets below and then we will talk. Open your HomeController.cs and add to new actions methods as shown in the snippet below.

public ActionResult Page1()
{
    return PartialView();
}

public ActionResult Page1Left()
{
    return PartialView();
}

public ActionResult Page1Right()
{
    return PartialView();
}

public ActionResult Page2()
{
    return PartialView();
}

Add the corresponding views for those action methods with the content as shown below

// Page1Left.cshtml
<h2>Left</h2>
// Page1Right.cshtml
<h2>Right</h2>

Modify the Page1.cshtml as per the snippet below.

<h1>Page 1</h1>
<div class="row">
    <div class="col-md-6 col-sm-6" ui-view="left"></div>
    <div class="col-md-6 col-sm-6" ui-view="right"></div>
</div>

Correct! you got it. In page1.cshtml, there you can see that 2 more ui-view’s are defined. Page1.cshtml is loaded by the page1 state as the base so, left and right views are state defined views and that’s why the routing configuration we have mentioned as left@page1 and right@page1.

The Output

P2163_002

 

If you navigate to Page1, you will see the above output. Here, index.cshtml loads the page1.cshml and page1.cshtml loads page1left.cshtml with page1right.cshtml. This demonstrates the view nesting with multiple views.

Why MVC View rather static HTML?

Static HTML pages are good in case where we don’t want to change the contents of the html template at run time. But in a scenario where we would like to change the contents of the template MVC view are very useful. Along with that there might be scenarios where we would like to show different templates itself based on different user roles and authorizations. We can control a lot more with MVC views as compared to the static HTML. The possibilities are unlimited.

Truly speaking, this is the ultimate reason, why anyone would want to use AngularJS with ASP.Net MVC. In the next post we will see more aspects of ASP.Net MVC getting utilized in this application rather just getting template view from it.

In case you have any questions or concerns, please do leave your comments below. I will try to answer them as soon as possible. Your feedback will help me improve the contents. Have a nice day.

Series Links

Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 Part 7 Part 9 Part 10 Part 11

AngularJS with ASP.Net MVC (Part 7)

A step by step tutorial on how to use AngularJS with ASP.Net MVC

Precap

I have started this as a multi-post tutorial a few posts back. In the previous parts we have created a minimal project in Visual Studio 2015 using Web Application’s Empty template with MVC folders and references. The application is running now with the bootstrapped UI containing a navigation of 3 pages. It has been demonstrated how differently application behaves with MVC routing and AngularJS routing. You can read those posts part 1part 2part 3part 4part 5 and part 6 in case you have not gone through that already. Let’s move to next step where we will be replacing the AngularJS routing with ui-router’s states.

Why ui-router?

It is very easy to explain the benefits of using ui-router over angular-route with an example in hand rather telling each and every aspect of the comparison. Moreover to teach AngularJS and its features is beyond the scope of this series. So let’s begin with replacing the angular-route with ui-router.

First Thing First

In the Index.cshtml we have a div tag with ng-view atribute, which we have to replace with ui-view. This works as the placeholder for the views to be rendered by the ui-router states. Once you update, your Index.cshtml should look similar to this snippet now.

<div ui-view></div>

In part 3 of our guide we have already included the required libraries in the project, so we are not looking that direction. So, now we can replace the ngRoute module with ui.router in the app module. Open the app.module.js and update the file as show in the snippet below.

(function () {
    'use strict';

    angular.module('app', ['ui.router']);
})();

Define ui-router States

We have already defined the angular routes in app.config.js file in part 6 of this series, which we will be removing. Now create a new file named app.route.js adjacent to the app.config.js and paste the code from the below snippet in there.

(function () {
    'use strict';

    angular.module('app')
        .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: '/Home/Home'
                })
                .state('page1', {
                    url: '/Page1',
                    templateUrl: '/Home/Page1'
                })
                .state('page2', {
                    url: '/Page2',
                    templateUrl: '/Home/Page2'
                })
                .state('page3', {
                    url: '/Page3',
                    templateUrl: '/Home/Page3'
                });
        }]);
})();

Also, remember to include this new file in the BundleConfig.cs. Update your app.config.js file as below.

(function () {
    'use strict';

    angular.module('app')
        .config(['$locationProvider', function ($locationProvider) {
            $locationProvider.hashPrefix('');
        }]);
})();

Run the application and you will find no difference at all in the behavior  of the application. this shows that the angular-route can be directly replaced by the ui-router without deviating from the applications functionality.

We will be extending this simple application to a more meaning for application which will be demonstrating more aspects of the ui-router and how the MVC views can be used as templates for different parts of the same view. yes that’s the one of most powerful feature of the ui-router, render multiple view templates in the same page. But this is the topic of our next post.

I am hoping that you might have got a gist of the concept of using AngularJS with MVC, but there are more to come, so wait for the next post and leave your comments in case you have any questions till now. I will really appreciate your feedback so that I can improve my content and help you all in a right way while producing more accurate articles.

Cheers!

Series Links

Part 1 Part 2 Part 3 Part 4 Part 5 Part 6 Part 8 Part 9 Part 10 Part 11

AngularJS with ASP.Net MVC (Part 6)

A step by step tutorial on how to use AngularJS with ASP.Net MVC

Precap

I have started this as a multi-post tutorial a few posts back. In the previous parts we have created a minimal project in Visual Studio 2015 using Web Application’s Empty template with MVC folders and references. The application is running now with the bootstrapped UI containing a navigation of 3 pages. You can read those posts part 1part 2part 3part 4 and part 5 in case you have not gone through that already. Let’s move to next step where we will be delegating the routing at client side using AngularJS.

Start Using AngularJS

During this post we will be creating an AngularJS module and tell our ASP.Net MVC application to use that. It will do client side routing while rendering the views from the MVC actions.

AngularJS Routing

We are required to add another library here, which we need for the AngularJS routing. Open the command prompt and execute the below command in the project root folder. This will install a new folder in the bower_components, which we need to include in the project.

bower install angular-route --save

Modify Bundles

Open BundleConfig.cs file and include the new JavaScript file in there for the js bundle as shown in the snippet below.

 "~/bower_components/angular/angular.js",
 "~/bower_components/angular-route/angular-route.js",
 "~/bower_components/angular-ui-router/release/angular-ui-router.js",

Define AngularJS Module (app)

Create a new file named app.module.js under Scripts -> app folder (we have to create folder named app in case that is not already there) and put below code in there.

(function () {
    'use strict';

    angular.module('app', ['ngRoute']);
})();

Module Configuration

Next step is to configure the routing for AngularJS. Create a new file named app.config.js under Scripts -> app folder and add the blow code to it.

(function () {
    'use strict';

    angular.module('app')
        .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            $locationProvider.hashPrefix('');
            $routeProvider
                .when('/', {
                    templateUrl: '/Home/Home'
                })
                .when('/Page1', {
                    templateUrl: '/Home/Page1'
                })
                .when('/Page2', {
                    templateUrl: '/Home/Page2'
                })
                .when('/Page3', {
                    templateUrl: '/Home/Page3'
                });
        }]);
})();

Once you are done creating these files, include them in your bundle by editing the BundleConfig.cs file as shown below.

"~/bower_components/angular-ui-router/release/angular-ui-router.js",
"~/bower_components/bootstrap/dist/js/bootstrap.js",
"~/Scripts/app/app.module.js",
"~/Scripts/app/app.config.js"

Include AngularJS module in HTML

We are ready with the AngularJS module and now we need to include the module in the _Layout.cshtml. To do so, please modify your _Layout.cshtml file as per the code snippet below.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AngularJS App</title>
    @Styles.Render("~/css")
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">AngularJS with ASP.Net MVC</a>
            </div>
            <div class="collapse navbar-collapse" id="main-nav">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="/#/Page1">Page 1</a>
                    </li>
                    <li>
                        <a href="/#/Page2">Page 2</a>
                    </li>
                    <li>
                        <a href="/#/Page3">Page 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    @RenderBody()
    @Scripts.Render(new string[] { "~/js" })
</body>
</html>

Replace the content of Index.cshtml as per the snippet below

<div ng-view></div>

Modify the HomeController.cs while adding a new Action method named Home. Please not that we are now returning PartialView() in place of View() from some of the Action Methods.

using System.Web.Mvc;

namespace AngularJSwithMVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Home()
        {
            return PartialView();
        }

        public ActionResult Page1()
        {
            return PartialView();
        }

        public ActionResult Page2()
        {
            return PartialView();
        }

        public ActionResult Page3()
        {
            return PartialView();
        }
    }
}
<!-- Home.cshtml -->
<h1>Home Page</h1>

The Output …

P2122_001

As you can see in the output, we are now seeing the application from the AngularJS prospective. Here all the links are ‘#’ hashed where on clicking the Page links, it is only changing the view rather than loading the complete page again.

In case you have any questions till this point, you can always leave the comments and I will try to answer them as soon as possible. I will continue on the next part of this series and leave you here with your brain to play with the idea. In the next part you will see another way of doing the routing, by using ui-router, another AngularJS library most commonly used in large scale modular applications. Bye till then!

Series Links

Part 1 Part 2 Part 3 Part 4 Part 5 Part 7 Part 8 Part 9 Part 10 Part 11