AngularJs: Bundling và Minification

Bundling và Minification là 2 công nghệ giúp bạn giảm thời gian tải dữ liệu của 1 trang web. Giải pháp là giảm số lượng yêu cầu tới server và giảm kích thước file (javascript và css).
Đối với trường hợp jquery, javascript, giải pháp này phát huy được tính hiệu quả. Nhưng với AngularJs hoặc với KnockoutJs thì sẽ gặp trường hợp lỗi do UI data binding với tên biến ($scope.variable-name) nằm trong hàm javascript.

Đầu tiên bạn thiết lập đường dẫn file cần nén và mã hóa trong BundleConfig.cs:

            bundles.Add(new ScriptBundle("~/bundles/home-module").Include(
                        "~/Scripts/app/home-module.js"));

File: home-module.js chứa ứng dụng viết bằng Angularjs

(function () {
    'use strict';

    // Module name is handy for logging
    var id = 'home_module';

    // Create the module and define its dependencies.
    var home_module = angular.module('home_module', []);
    home_module.constant('yourApp', 'AbtTest');
    home_module.factory('helloWorldService', function () {
        return {
            sayHello: function () {
                return "Hello, World!"
            }
        };
    });
    home_module.controller("homeCtrl", function ($scope, helloWorldService, yourApp) {
        $scope.today = (new Date()).toISOString();
        $scope.message = helloWorldService.sayHello();
        $scope.yourApp = yourApp;
    });
})();

Và file template:

<div class="container" ng-app="home_module" ng-controller="homeCtrl">
    <div class="row">
        <div class="col-md-1"><label>App:</label></div>
        <div class="col-md-11">{{yourApp}}</div>
    </div>
    <div class="row">
        <div class="col-md-1"><label>Date Time</label></div>
        <div class="col-md-11">{{today}}</div>
    </div>
    <div class="row">
        <div class="col-md-1"><label>Message</label></div>
        <div class="col-md-11">{{message}}</div>
    </div>
</div>

Bật chế độ debug = false

    <compilation debug="false" targetFramework="4.5" />

thì kết quả: 
  

Xem trong đoạn mã Javascript:

(function(){"use strict";var t="home_module",n=angular.module("home_module",[]);n.constant("yourApp","AbtTest"),n.factory("helloWorldService",function(){return{sayHello:function(){return"Hello, World!"}}}),n.controller("homeCtrl",function(n,t,i){n.today=(new Date).toISOString(),n.message=t.sayHello(),n.yourApp=i})})()

Lỗi phát sinh do biến $scope, helloWorldService, yourApp bị đổi thành n, t, i. Để khắc phục lỗi này, bạn cần dùng Dependency Injection có sẵn trong AngularJs

(function () {
    'use strict';

    // Module name is handy for logging
    var id = 'home_module';

    // Create the module and define its dependencies.
    var home_module = angular.module('home_module', []);
    home_module.constant('yourApp', 'AbtTest');
    home_module.factory('helloWorldService', function () {
        return {
            sayHello: function () {
                return "Hello, World!"
            }
        };
    });
    home_module.controller("homeCtrl", ['$scope', 'helloWorldService', 'yourApp', function ($scope, helloWorldService, yourApp) {
        $scope.today = (new Date()).toISOString();
        $scope.message = helloWorldService.sayHello();
        $scope.yourApp = yourApp;
    }]);
})();

Link download: Mediafire.
Tham khảo thêm tại: http://docs.angularjs.org/guide/di
Chúc các bạn thành công!

Nhatkyhoctap's blog