建站
咨詢
售后
建站咨詢
新聞中心
最近終于不忙了！！有時(shí)間沉淀一下之前學(xué)到的angular東東！！
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、西安網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為西安等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
angular路由想必大家已經(jīng)不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！）
angular路由作為單頁面應(yīng)用，切換頁面的時(shí)候都是一個(gè)頁面，所以切換controller和按需加載控件js就成了大問題！！折騰了我半天啊，angular-route內(nèi)置的辦法也沒有解決這個(gè)問題，最終我是用requireJs解決的這個(gè)問題！！上代碼！
1.首先引入requireJs，并且在它的下面用閉包寫配置 requirejs(['framework'])，這句話的意思是首次進(jìn)入頁面，加載framework
2.framework.js作為首次加載的js，起到至關(guān)重要的作用哈！！定義frameworkApp模塊作為主模塊，另外加載公共服務(wù)utilmodel和ngRoute路由，定義一個(gè)resolveController方法，回調(diào)函數(shù)是requireJs，一會(huì)兒會(huì)講到！
//引入模塊
var frameworkApp = angular.module('FrameworkApp',['ngRoute', 'utilModule']);
//加載對(duì)應(yīng)的controller
var resolveController = function (names, dependancies) {
//console.log(names)
//console.log(dependancies)
return {
loadController: ['$q', '$rootScope', function ($q, $rootScope) {
var defer = $q.defer();
require(names, function () {
defer.resolve();
$rootScope.$apply();
});
return defer.promise;
}]
};
};
3.配置路由，用resolve方法完成回調(diào)，注意回調(diào)的是一個(gè)list，值是步驟一中定義的模塊名稱
frameworkApp.config(['$routeProvider', '$controllerProvider', '$provide', '$compileProvider', '$filterProvider',
function ($routeProvider, $controllerProvider, $provide, $compileProvider, $filterProvider) {
frameworkApp.register = {
controller: $controllerProvider.register,
factory: $provide.factory,
service: $provide.service,
filter: $filterProvider.register,
directive: $compileProvider.directive
};
$routeProvider
.when('/',{
redirectTo: '/dashboard'
})
.when('/dashboard',{
templateUrl: 'dashboard.html',
controller: 'DashboardCtrl',
resolve: resolveController(['standardDashboard', 'd3','radialProgress','highcharts'])
})
.when('/console',{
templateUrl: 'console.html',
controller: 'ConsoleCtrl',
resolve: resolveController(['standardConsole'])
})
.when('/amountStatistic',{
templateUrl: 'amount-statistic.html',
controller: 'amountStatisticCtrl',
resolve: resolveController(['standardAmountStatistic','highcharts','dateTimePicker'])
})
.when('/report',{
templateUrl: 'report.html',
controller: 'ReportCtrl',
resolve: resolveController(['standardReport','dateTimePicker'])
})
.when('/advancedReport',{
templateUrl: 'advanced-report.html',
controller: 'advancedReportCtrl',
resolve: resolveController(['standardAdvancedReport','highcharts','dateTimePicker'])
})
.when('/expertAnswer',{
templateUrl: 'expert-answer.html',
controller: 'expertAnswerCtrl',
resolve: resolveController(['standardExpertAnswer'])
})
.when('/service',{
templateUrl: 'service.html',
controller: 'ServiceCtrl',
resolve: resolveController(['standardService'])
})
.when('/strategy-inform',{
templateUrl: 'strategy-inform.html',
controller: 'StrategyInformCtrl',
resolve: resolveController(['standardStrategyInform'])
})
.when('/member',{
templateUrl: 'member.html',
controller: 'MemberCtrl',
resolve: resolveController(['standardMember'])
})
.when('/schedule',{
templateUrl: 'schedule.html',
controller: 'ScheduleCtrl',
resolve: resolveController(['standardSchedule'])
})
.when('/channel',{
templateUrl: 'channel.html',
controller: 'ChannelCtrl',
resolve: resolveController(['standardChannel'])
})
.when('/strategy-merge',{
templateUrl: 'strategy-merge.html',
controller: 'StrategyMergeCtrl',
resolve: resolveController(['standardStrategyMerge'])
})
.when('/integrate',{
templateUrl: 'integrate.html',
controller: 'IntegrateCtrl',
resolve: resolveController(['standardIntegrate'])
})
.when('/personalCenter',{
templateUrl: 'personal-center.html',
controller: 'PersonalCenterCtrl',
resolve: resolveController(['standardPersonalCenter'])
})
.otherwise({
redirectTo: '/error'
});
}]);
4.大功告成啦~完成controller切換，和js按需加載！！！啦啦啦！
5.有一點(diǎn)我也沒解決，在引入echarts的時(shí)候，用這種方法就報(bào)錯(cuò)了，換成highcharts就可以了，折騰半天啊也沒把echarts引進(jìn)來，不過到是發(fā)現(xiàn)，在require生效之前引入echarts的話，是可以的！求大神講解啊！！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
本文標(biāo)題：詳解基于angular路由的requireJs按需加載js
分享鏈接：http://www.ef60e0e.cn/article/jdeieg.html
