快捷導(dǎo)航

AngularJs根據(jù)訪問的頁(yè)面動(dòng)態(tài)加載Controller的解決方案

更新時(shí)間：2015年02月04日 12:02:16 投稿：hebedich

這篇文章主要介紹了AngularJs根據(jù)訪問的頁(yè)面動(dòng)態(tài)加載Controller的解決方案,需要的朋友可以參考下

用Ng就是想做單頁(yè)面應(yīng)用(simple page application),就是希望站內(nèi)所有的頁(yè)面都是用Ng的Route,盡量不用location.href,但是這樣的webapp好處是很多,但是美中不足的是當(dāng)你的webapp隨著時(shí)間的推移,用戶變多,功能變得更豐富,controller也變得越來越多,你不得不把所有的controller當(dāng)作全局模塊進(jìn)行加載,以使得在站內(nèi)任何一個(gè)頁(yè)面中按F5刷新后能route到任意一個(gè)其他頁(yè)面,而不會(huì)發(fā)生找不到controller的錯(cuò)誤,加載所有的controller使得在手機(jī)端上,頁(yè)面的首次打開速度變慢,今天我就和大家分享我是怎么改善這個(gè)缺點(diǎn)的,實(shí)現(xiàn)Controller的模塊化加載

app.js

復(fù)制代碼代碼如下:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {

  app.register = {

    controller: $controllerProvider.register,

    directive: $compileProvider.directive,

    filter: $filterProvider.register,

    factory: $provide.factory,

    service: $provide.service

  };

});

在route時(shí)阻塞一下去加載需要的js,加載成功后再繼續(xù),不知道$script是什么的同學(xué)請(qǐng)點(diǎn)http://dustindiaz.com/scriptjs

復(fù)制代碼代碼如下:

$routeProvider.when('/:plugin', {

  templateUrl: function(rd) {

    return 'plugin/' + rd.plugin + '/index.html';

  },

  resolve: {

    load: function($q, $route, $rootScope) {

      var deferred = $q.defer();

      var dependencies = [

        'plugin/' + $route.current.params.plugin + '/controller.js'

      ];

      $script(dependencies, function () {

        $rootScope.$apply(function() {

          deferred.resolve();

        });

      });

      return deferred.promise;

    }

  }

});

controller.js

復(fù)制代碼代碼如下:

app.register.controller('MyPluginCtrl', function ($scope) {

  ...

});

index.html

復(fù)制代碼代碼如下:

<div ng-controller="MyPluginCtrl">

  ...

</div>

這樣改造就可以實(shí)現(xiàn)route時(shí)動(dòng)態(tài)去加載這個(gè)route所依賴的js,但是一般我們的webapp中route都有很多,每個(gè)都要寫那么一堆代碼,既難看又難于維護(hù),我們不妨再優(yōu)化一下

app.js

復(fù)制代碼代碼如下:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {

  app.register = {

    controller: $controllerProvider.register,

    directive: $compileProvider.directive,

    filter: $filterProvider.register,

    factory: $provide.factory,

    service: $provide.service

  };

  app.asyncjs = function (js) {

        return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) {

            var deferred = $q.defer();

            var dependencies = js;

            if (Array.isArray(dependencies)) {

                for (var i = 0; i < dependencies.length; i++) {

                    dependencies[i] += "?v=" + v;

                }

            } else {

                dependencies += "?v=" + v;//v是版本號(hào)

            }

            $script(dependencies, function () {

                $rootScope.$apply(function () {

                    deferred.resolve();

                });

            });

            return deferred.promise;

        }];

    }

});

復(fù)制代碼代碼如下:

$routeProvider.when('/:plugin', {

  templateUrl: function(rd) {

    return 'plugin/' + rd.plugin + '/index.html';

  },

  resolve: {

    load: app.asyncjs('plugin/controller.js')

  }

});

到此只要把原來一個(gè)controller.js按模塊拆分成多個(gè)js然后為route添加模塊依賴便可提高加載速度,這個(gè)方法不僅僅可以用在controller按需加載,而且可以用在其他js模塊,例如jquery.ui.datepicker.js這樣的日期選擇插件,在需要日期選擇插件的route節(jié)點(diǎn)加上

復(fù)制代碼代碼如下:

$routeProvider.when('/:plugin', {

  templateUrl: function(rd) {

    return 'plugin/' + rd.plugin + '/index.html';

  },

  resolve: {

    load: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])

  }

});

便可以了

PS:$script可以對(duì)需要加載的js進(jìn)行判斷,如果之前已經(jīng)加載過了他會(huì)直接返回成功,也就是說只有在第一次進(jìn)入日期選擇界面時(shí)會(huì)去請(qǐng)求jquery.ui.datepicker.js退出去再進(jìn)就不會(huì)去請(qǐng)求啦

您可能感興趣的文章: