My studying notebook

2014/07/15

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 , , , , , , , 43 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

Scenario

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
<div>
    this is Project Index page.
</div>
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';

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

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

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

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

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

Preview

Product

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

book-service.js

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) {
                delay.resolve(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.

js/views/Product/index.js

....
'controllers/product-controller',
'services/book-service',
...

controller/Product-controller.js

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

    $scope.books = books;
}]);

Preview
preview

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
...
'domReady',
'controllers/home-controller',
'services/book-service',
'bootstrap'
...
// 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.

Preview
Preview

Grunt

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'
    }],
...    
grunt 

Github Source Code

cage1016/AngularJsRequireJsGruntBower

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

43 comments:

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

    ReplyDelete
    Replies
    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

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

    ReplyDelete
  3. Wow amazing i saw the article with execution models you had posted. It was such informative. Really its a wonderful article. Thank you for sharing and please keep update like this type of article because i want to learn more relevant to this topic.

    Digital Marketing Company in Chennnai

    ReplyDelete
  4. 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

    ReplyDelete
  5. 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

    ReplyDelete
  6. 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

    ReplyDelete
  7. 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

    ReplyDelete

  8. 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

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

    ReplyDelete
  10. All the latest updates from the Python Automationminds team. Python Automationminds lets you program in Python, in your browser. No need to install any software, just start coding straight away. There's a fully-functional web-based console and a programmer's text-editor
    Phyton training in Chennai

    ReplyDelete
  11. Buy Fake Euros online.

    For more information, Contact us via:
    Email: counterfeitnotesonline@gmail.com
    Whatsapp number:+1 (480)269-2191
    Webside: www.counterfeitnotesonline.com
    Web Link: https://www.counterfeitnotesonline.com

    Page links:

    Buy Fake Euros online
    https://www.counterfeitnotesonline.com/2019/12/09/buy-fake-euros-online/

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

    ReplyDelete
  13. 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

    ReplyDelete
  14. 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

    ReplyDelete
  15. All of pitbull dog and puppy are sent home. Current on shots, deworming, flea treated, health certificate, genetic health guarantee, and AKC registration papers. All new families are required to sign a contract that includes a basic health guarantee and a 3 year genetic health guarantee.
    Pitbull Puppies For Sale
    american pitbull terrier puppies
    pitbull puppies for sale near me
    pitbull breeders for sale
    pit bull breeders near me
    pit bull puppy
    baby pitbulls for sale

    ReplyDelete
  16. All of pitbull dog and puppy are sent home. Current on shots, deworming, flea treated, health certificate, genetic health guarantee, and AKC registration papers. All new families are required to sign a contract that includes a basic health guarantee and a 3 year genetic health guarantee.
    Pitbull Puppies For Sale
    american pitbull terrier puppies
    pitbull puppies for sale near me
    pitbull breeders for sale
    pit bull breeders near me
    pit bull puppy
    baby pitbulls for sale

    ReplyDelete
  17. All of pitbull dog and puppy are sent home. Current on shots, deworming, flea treated, health certificate, genetic health guarantee, and AKC registration papers. All new families are required to sign a contract that includes a basic health guarantee and a 3 year genetic health guarantee.
    Pitbull Puppies For Sale
    american pitbull terrier puppies
    pitbull puppies for sale near me
    pitbull breeders for sale
    pit bull breeders near me
    pit bull puppy
    baby pitbulls for sale

    ReplyDelete
  18. Your site is truly cool and this is an extraordinary moving article and If it's not too much trouble share more like that. Thank You..
    Digital Marketing Course in Hyderabad

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

    ReplyDelete
  20. Wow, happy to see this awesome post. I hope this think help any newbie for their awesome work and by the way thanks for share this awesomeness, i thought this was a pretty interesting read when it comes to this topic. Thank you..
    Artificial Intelligence Course

    ReplyDelete
  21. 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

    ReplyDelete
  22. Excellent Blog! I would like to thank you for the efforts you have made in writing this post. Gained lots of knowledge.
    Data Analytics Course

    ReplyDelete
  23. 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

    ReplyDelete
  24. 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

    ReplyDelete
  25. What an incredible message this is. Truly one of the best posts I have ever seen in my life. Wow, keep it up.
    AI Courses in Bangalore

    ReplyDelete
  26. 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

    ReplyDelete
  27. 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

    ReplyDelete
  28. 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

    ReplyDelete
  29. 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

    ReplyDelete
  30. Thanks Your post is so cool and this is an extraordinary moving article and If it's not too much trouble share more like that.
    Digital Marketing Course in Hyderabad

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

    ReplyDelete
  32. 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

    ReplyDelete
  33. What an incredible message this is. Truly one of the best posts I have ever seen in my life. Wow, keep it up.
    AI Courses in Bangalore

    ReplyDelete
  34. Great post happy to see this. I thought this was a pretty interesting read when it comes to this topic Information. Thanks..
    Artificial Intelligence Course

    ReplyDelete
  35. 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

    ReplyDelete

  36. 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

    ReplyDelete
  37. 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

    ReplyDelete