My studying notebook


AngularJs, RequireJs, Grunt and Bower Part4 - How to extend your own code with ASP.NET MVC

7/15/2014 04:33:00 PM Posted by Unknown , , , , , , , 30 comments

This article is part of a series of posts on RequireJs, AnguarJs, Grunt and Bower. Here are the parts so far:

  1. AngularJs, RequireJs, Grunt and Bower Part1 - Getting Started and concept with ASP.NET MVC
  2. AngularJs, RequireJs, Grunt and Bower Part2 - Grunt
  3. AngularJs, RequireJs, Grunt and Bower Part3 - generator-angular-requirejs-grunt-bower with ASP.NET MVC
  4. AngularJs, RequireJs, Grunt and Bower Part4 - How to extend your own code with ASP.NET MVC
  5. AngularJs, RequireJs, Grunt and Bower Part5 - generator-angular-requirejs-grunt-bower with Express.js //to be done

In previou aticles that we talked about how to integrate AngularJs, Requirejs, Grunt and bower with ASP.NET MVC. If you don’t want to create those file structure manual. You can install generator-angular-requirejs-grunt-bower yeoman generator.

Simple step to install yeoman generator

  • install generator: npm install -g generator-angular-requirejs-grunt-bower
  • cd to project root folder
  • execute command yo angular-requirejs-grunt-bower


As basic concept we mentioned that we want to treat ControllerName/actionName as single page application and try to reuse shared code as possible base on this file structure. Now, let’s create a new ASP.NET MVC controller and extend new AngularJs application.

Step 1: create new ASP.NET MVC controller

  1. please create a new controller named ProjectController via Visual studio.
  2. Add new view named Index.cshtml
  3. modify Views/Project/Index.cshtml. The only thing you need to do is add Angular route directive ng-view. We will handle UI in AngularJs partile view.
    ViewBag.Title = "Product";

<div ng-view></div>

Step 2: create new AngularJs application

create file structure as following.

  1. Public/js/views/Project, AngularJs application container and named same as Controller
  2. Public/js/views/Project/index.js, application entry point
  3. Public/js/views/Project/patials, we will put all partials view HTML here
  4. Public/js/views/Project/patials/project-index.html, default AngulaJs route view.
  5. Public/js/controllers/product-controller.js, Product controller.
project-index.html: Product partials view
    this is Project Index page.
product-controller.js: Product controller
define(['controllers/controllers'], function (controllers) {
    controllers.controller('ProjectIndexCtrl', ['$scope',
        function ($scope) {
            console.log('ProjectIndexCtrl execute.');

index.js: Product AngularJs single page application entry point.

'use strict';

    function (angular, app, domReady) {
        var root = require.toUrl('.').split('.')[0];
            '$routeProvider', '$httpProvider', '$sceDelegateProvider', '$locationProvider',
            function ($routeProvider, $httpProvider, $sceDelegateProvider, $locationProvider) {
                // sec
                $sceDelegateProvider.resourceUrlWhitelist(['self', '.*']);

                // route
                when('/', {
                    templateUrl: '/public/js/views/Product/partials/product-index.html',
                    controller: 'ProjectIndexCtrl',
                    resolve: {}
                    redirectTo: '/'
            function ($rootScope) {
                // global variable

                $rootScope.$safeApply = function ($scope, fn) {
                    $scope = $scope || $rootScope;
                    fn = fn || function () { };
                    if ($scope.$$phase) {
                    } else {
        ]).constant('$', $);

        domReady(function () {
            angular.bootstrap(document.body, ['myAngularApp']);

            $('html').addClass('ng-app: myAngularApp');



Step 3: Let’s extend shared service for different single page application

Till now, we have two AngularJs single page application HomeController and ProductController and they don’t include any AngularJs service, directive or filter module.

  • Add a new ASP.NET MVC BookController ApiController
  • Add a AngularJs server named /Public/js/services/bookService.js. Using ng-source to call API
  • Inject book-service.js to Product application
  • Inject book-service.js to Home application

Add BookController ApiController

// GET: api/Book
public IEnumerable<string> Get()
    return new string[] { "ABookApart.CSS3.For.Web.Designers.2010", "AngularJS Directives" };


Add a new AngularJs service locate in Public/js/service/book-service.js.

define(['services/services'], function (services) {
    // Book resource
    services.factory('BOOK', ['$resource', function ($resource) {
        var resetUrl = '/api/Book';
        var resource = $resource(resetUrl, {}, { get: { method: 'GET', isArray: true } });

        return resource;

    // BookLoader
    services.factory('BookLoader', ['$q', 'BOOK', function ($q, BOOK) {
        return function () {
            var delay = $q.defer();
            BOOK.get(function (data) {
            }, function (error) {
                delay.reject('Unable to fetch Book list');
            return delay.promise;

Inject book-service.js BookLoader to AngularJs route resolve

If you are familier with AngularJs. There is a resolve function you can call in AngularJs route. We define a BookLoader function that implement with promise pattern. Then, we can inject the result to our controller. Resolve can help us to fetch API before controller called.

How can we inject book service to AngularJs application via RequireJs require feature. That’s mean we can inject different feature in other application easily.




controllers.controller('ProjectIndexCtrl', ['$scope', 'books', function ($scope, books) {
    console.log('ProjectIndexCtrl execute.');

    $scope.books = books;


Inject book-service.js BOOK service to AngularJs route resolve

We have defined BOOK AngularJs service. Different with Product application. We use BOOK service instead of BooKloader promise service.

// js/views/Home/index.js
// js/controller/home-controller.js
define(['controllers/controllers'], function (controllers) {
    controllers.controller('HomeCtrl', ['$scope', 'BOOK', function ($scope, BOOK) {
            console.log('HomeCtrl execute.');

            $scope.books = BOOK.get({}, function (books) {
                return books;

We inject BOOK service in controller directly and bind Book.get() to $scope.books. Whatever we use AngularJs route resolve or inject service directly. They points to same service we defined.



As we mentioned before. we still can build for every AngularJs we defined. Befere we build our application, we need to modify Gruntfile.js manual.

 modules: [{
        name: 'views/Home/index'
    }, {
        name: 'views/Product/index'

Github Source Code


After you clone source code from github repo, you can run following command:

  • git checkout -f step-0 is status project created
  • git checkout -f step-1 is status Nuget install Require.js.
  • git checkout -f step-2 is status project Add AngularJs, RequireJs, Grunt and Bower to Public folder.
  • git checkout -f step-3 is status modify _Layout.chtml to render RequireJs. You will see the final result.
    • Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute bower install to restore those library project included.
  • git checkout -f setp-4 is status ready to do grunt tasks.
    • Please cd to AngularJsRequireJsGruntBower\AngularJsRequireJsGruntBower\Public and execute npm install to restore grunt required libraries.
    • execute command grunt to do grunt tasks.
  • git checkout -f step-5 extend Product application
  • git checkout -f step-6 extend AngularJs service book-service and add BookLoader to route resolve
  • git checkout -f step-7 extend AngularJs service book-service and inject BOOK service to controller
  • git checkout -f step-8 add Product to Gruntfile.js module block


  1. Thanks for sharing this valuable information to our vision. You have posted
    a trust worthy blog keep sharing.
    Angularjs Training In Hyderabad

    1. Great Article android based projects

      Java Training in Chennai

      Project Center in Chennai

      Java Training in Chennai

      projects for cse

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

  2. Hi, I am not clear that how can i add grunt.js and how the files get bundled
    from Barun

  3. This blog is really very well interesting as well as i got more more information from your blog so please update latest information.

    Best Dental Clinic In Vellore

  4. your blog is really great and you have shared about the impressive information of different languages, so please say about those things too.

    Digital Marketing Company in Chennai

  5. I read your articles very excellent and the i agree our all points because all is very good information provided this through in the post.

    Digital Marketing Company in Chennai


  6. Thanks for the informative article. This is one of the best resources I have found in quite some time. Nicely written and great info. I really cannot thank you enough for sharing.

    Restaurant in OMR
    Apartments in OMR
    Villas in OMR
    Resorts in OMR

  7. hello sir,
    thanks for giving that type of information.Business visa provider

  8. To learn about Tropika Club's Search Directory for Beauty and Wellness Services, please visit Tropika Club now. 123movies

  9. Nice Information Your first-class knowledge of this great job can become a suitable foundation for these people. I did some research on the subject and found that almost everyone will agree with your blog.
    Cyber Security Course in Bangalore

  10. Writing in style and getting good compliments on the article is hard enough, to be honest, but you did it so calmly and with such a great feeling and got the job done. This item is owned with style and I give it a nice compliment. Better!
    Cyber Security Training in Bangalore

  11. Thank a lot. You have done excellent job. I enjoyed your blog . Nice efforts
    Data Science Certification in Hyderabad

  12. I need to thank you for this very good read and i have bookmarked to check out new things from your post. Thank you very much for sharing such a useful article and will definitely saved and revisit your site.
    Data Science Course

  13. Awesome article. I enjoyed reading your articles. this can be really a good scan for me. wanting forward to reading new articles. maintain the nice work!
    Data Science Courses in Bangalore

  14. I bookmarked your website because this site contains valuable information. I am very satisfied with the quality and the presentation of the articles. Thank you so much for saving great things. I am very grateful for this site.

    Data Science Training in Bangalore

  15. I have voiced some of the posts on your website now, and I really like your blogging style. I added it to my list of favorite blogging sites and will be back soon ...

    Digital Marketing Training in Bangalore

  16. I wanted to leave a little comment to support you and wish you the best of luck. We wish you the best of luck in all of your blogging endeavors.

    Artificial Intelligence Training in Bangalore

  17. Truly incredible blog found to be very impressive due to which the learners who go through it will try to explore themselves with the content to develop the skills to an extreme level. Eventually, thanking the blogger to come up with such phenomenal content. Hope you arrive with similar content in the future as well.

    Machine Learning Course in Bangalore

  18. You have done excellent job Thanks a lot and I enjoyed your blog. Great Post.
    Data Science Certification in Hyderabad

  19. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it.
    Data Analytics Course

  20. I am really enjoying reading your well written articles. I am looking forward to reading new articles. Keep up the good work.
    Data Science Courses in Bangalore


  21. I am sure it will help many people. Keep up the good work. It's very compelling and I enjoyed browsing the entire blog.
    Business Analytics Course in Bangalore

  22. Nice Post thank you very much for sharing such a useful information and will definitely saved and revisit your site and i have bookmarked to check out new things frm your post.
    Data Science Course

  23. Good blog and absolutely exceptional. You can do a lot better, but I still say it's perfect. Keep doing your best.

    Data Science Training in Nagpur

  24. A good blog always contains new and exciting information and as I read it I felt that this blog really has all of these qualities that make a blog.

    Data Analytics Course in Patna

  25. Good blog and absolutely exceptional. You can do a lot better, but I still say it's perfect. Keep doing your best.

    Data Science Training in Durgapur

  26. I was surfing the net and luckily I came across this site and found some very interesting things here. It's a lot of fun to read. I really enjoyed it. Thank you for sharing this wonderful information.

    Business Analytics Course in Durgapur