身为初学者对angularJs中遇到的问题进行学习,望多多指教;angularJs中对于一些js,不需要全局引入是,我们可采用路由加载的方式进行加载
var microShop = angular.module('microShop', [ 'ngRoute','angularCSS'])
.config(['$routeProvider','$locationProvider','$httpProvider','$controllerProvider','$compileProvider','$filterProvider','$provide',
function($routeProvider,$locationProvider,$httpProvider,$controllerProvider,$compileProvider,$filterProvider,$provide) {
//$locationProvider.html5Mode(true).hashPrefix('!'),
//异步加载js/css方法
microShop.asyncjs = function (dependencies) {
return function($q,$rootScope){
var deferred = $q.defer();
$script(dependencies, function() {
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}
}
$routeProvider
.when('/aa?:id', {
templateUrl: 'view/aa.html?v=1',
controller: 'aa',
resolve: {
load:microShop.asyncjs([
'js/common/swiper-3.3.0.jquery.min.js?v=2',
'js/common/swiper-3.3.0.jquery.min.js?v=2',
]),
data: ['title', function(title){
title.setWechatTitle("按需加载");
}]}
})
}])
这样可以减少第一次访问主页的速度,在写此加载方式时需要此module中加入按需加载的js方法
//异步加载js方法
microShop.asyncjs = function (dependencies) {
return function($q,$rootScope){
var deferred = $q.defer();
$script(dependencies, function() {
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}
}
此外也需要在config中加入配置
.config(['$routeProvider','$locationProvider','$httpProvider','$controllerProvider','$compileProvider','$filterProvider','$provide','$cssProvider',
当然对于一些css引入,也可以使用路由的方式按需加载
var microShop = angular.module('microShop', [ 'ngRoute','productModule','insureModule','MShopMngModule','titleUtil','angularCSS'])
.config(['$routeProvider','$locationProvider','$httpProvider','$controllerProvider','$compileProvider','$filterProvider','$provide','$cssProvider',
function($routeProvider,$locationProvider,$httpProvider,$controllerProvider,$compileProvider,$filterProvider,$provide,$cssProvider) {
//$locationProvider.html5Mode(true).hashPrefix('!'),
//异步加载js方法
microShop.asyncjs = function (dependencies) {
return function($q,$rootScope){
var deferred = $q.defer();
$script(dependencies, function() {
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}
}
//css按需加载方法
angular.extend($cssProvider.defaults, {
container: 'head',
method: 'append',
persist: true,
preload: true,
bustCache: false
});
$routeProvider
//首页
$routeProvider
//首页
.when('/index?:id', {
templateUrl: 'view/index.html?v=3',
controller: 'index',
css: {
href: 'css/swiper.min.css',
},
resolve: {
load:microShop.asyncjs([
'js/common/swiper-3.3.0.jquery.min.js?v=2',
'js/common/ctrlHtml_zt.js?v=2',
'js/productModule/controller/Index.js?v=5'
]),
data: ['$q','IndexList','title', function($q,IndexList,title){
title.setWechatTitle("首页");
var baseParam="{'pageName':'index','data':[{'dataType':'index'}]}";
var param=Base64.encode(baseParam);
return IndexList.getData(param).then(function(data){
return data;
});
}]
},
})