Penyelesaian AngularJs untuk memuatkan Pengawal secara dinamik berdasarkan page_AngularJS yang dilawati

Tujuan menggunakan Ng adalah untuk membuat aplikasi satu halaman (aplikasi halaman mudah) Saya berharap semua halaman dalam laman web ini akan menggunakan Laluan Ng dan cuba untuk tidak menggunakan lokasi.href aplikasi web, tetapi satu-satunya kelemahan ialah apabila anda berlalu, aplikasi web mempunyai lebih ramai pengguna, fungsi yang lebih kaya dan lebih banyak pengawal Anda perlu memuatkan semua pengawal sebagai modul global supaya anda boleh menekan mana-mana halaman dalam tapak menyegarkan dengan F5, anda boleh hala ke mana-mana halaman lain tanpa ralat tidak mencari pengawal yang membuat pembukaan pertama halaman lebih perlahan pada telefon bimbit Hari ini saya akan berkongsi dengan anda bagaimana saya memperbaikinya kekurangan ini, laksanakan pemuatan modular Pengawal

app.js

Salin kod Kod adalah seperti berikut:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
app.register = {
Pengawal: $controllerProvider.register,
arahan: $compileProvider.directive,
Penapis: $filterProvider.register,
Kilang: $provide.factory,
Perkhidmatan: $provide.service
};
});

Sekat semasa laluan untuk memuatkan js yang diperlukan, dan kemudian teruskan selepas pemuatan berjaya Jika anda tidak tahu apa itu $script, sila klik http://dustindiaz.com/scriptjs<.>

Salin kod Kod adalah seperti berikut:

$routeProvider.when('/:plugin', {
templateUrl: function(rd) {
Kembalikan 'plugin/' rd.plugin '/index.html';
},
menyelesaikan: {
Muatkan: fungsi($q, $route, $rootScope) {
var tertunda = $q.defer();
var dependencies = [
         'plugin/' $route.current.params.plugin '/controller.js'
];
$skrip(bergantung, fungsi () {
$rootScope.$apply(function() {
           tertunda.resolve();
});
});
Pulangan tertunda.janji;
}
}
});

pengawal.js

Salin kod Kod adalah seperti berikut:

app.register.controller('MyPluginCtrl', fungsi ($skop) {
...
});

index.html

Salin kod Kod adalah seperti berikut:

...

Dengan cara ini, js yang bergantung pada laluan boleh dimuatkan secara dinamik semasa laluan Namun, secara amnya terdapat banyak laluan dalam aplikasi web kami, dan setiap satu memerlukan banyak kod untuk ditulis, yang hodoh dan sukar. untuk mengekalkan. Kami juga boleh menambah satu lagi Optimize

app.js

Salin kod Kod adalah seperti berikut:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {
  app.register = {
    pengawal: $controllerProvider.register,
    arahan: $compileProvider.directive,
    penapis: $filterProvider.register,
    kilang: $provide.factory,
    perkhidmatan: $provide.service
  };
  app.asyncjs = fungsi (js) {
        kembalikan ["$q", "$route", "$rootScope", fungsi ($q, $route, $rootScope) {
            var tertunda = $q.defer();
            var dependencies = js;
            jika (Array.isArray(dependencies)) {
                untuk (var i = 0; i < dependencies.length; i ) {
                    tanggungan[i] = "?v=" v;
                }
            } lain {
                tanggungan = "?v=" v;//v是版本号
            }
            $skrip(bergantung, fungsi () {
                $rootScope.$apply(function () {
                    deferred.resolve();
                });
            });
            pulangan tertunda.janji;
        }];
    }
});

复制代码 代码如下:

$routeProvider.when('/:plugin', {
  templateUrl: function(rd) {
    kembalikan 'plugin/' rd.plugin '/index.html';
  },
  menyelesaikan: {
    beban: app.asyncjs('plugin/controller.js')
  }
});

到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便块依赖便家个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上

复制代码 代码如下:

$routeProvider.when('/:plugin', {
  templateUrl: function(rd) {
    kembalikan 'plugin/' rd.plugin '/index.html';
  },
  menyelesaikan: {
    muatkan: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])
  }
});

便可以了

PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接行判断,如果之前已经加载过了他会直接返尞回,了他会直接萔尞回戴在第一次进入日期选择界面时会去请求jquery.ui.datepicker. js退出去再进就不会去请求啦