詳解基于angular路由的requireJs按需加載js
更新時(shí)間：2017年01月20日 11:33:00 作者：lemon678
本篇文章主要介紹了詳解基于angular路由的requireJs按需加載js，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
最近終于不忙了??！有時(shí)間沉淀一下之前學(xué)到的angular東東?。?br />
angular路由想必大家已經(jīng)不陌生了?。吧娜タ次抑澳瞧职咽纸棠闩渲胊ngular路由！）
angular路由作為單頁面應(yīng)用，切換頁面的時(shí)候都是一個(gè)頁面，所以切換controller和按需加載控件js就成了大問題?。≌垓v了我半天啊，angular-route內(nèi)置的辦法也沒有解決這個(gè)問題，最終我是用requireJs解決的這個(gè)問題??！上代碼！
1.首先引入requireJs，并且在它的下面用閉包寫配置 requirejs(['framework'])，這句話的意思是首次進(jìn)入頁面，加載framework
<script src="js/lib/require.min.js"></script>
<script>
(function () {
var jsDir = '/js/';
var jsLibDir = '/js/lib/';
var jsComponentDir = '/components/';
var paths = {
angular: jsLibDir + 'angular.min',
angularRoute: jsLibDir + 'angular-route.min',
jquery: jsLibDir + 'jquery.min',
jQueryMD5: jsLibDir + 'jquery.md5',
highcharts: jsLibDir + 'highcharts',
radialProgress: jsLibDir + 'radialProgress',
d3: jsLibDir + 'd3.min',
echarts: jsLibDir + 'echarts',
framework: jsDir + 'framework',
angularUtil: jsDir + 'angular-util',
standardDashboard: jsDir + 'standard-dashboard',
standardConsole: jsDir + 'standard-console',
standardAmountStatistic: jsDir + 'standard-amount-statistic',
standardReport: jsDir + 'standard-report',
standardAdvancedReport: jsDir + 'standard-advanced-report',
standardExpertAnswer: jsDir + 'standard-expert-answer',
standardService: jsDir + 'standard-service',
standardStrategyInform: jsDir + 'standard-strategy-inform',
standardMember: jsDir + 'standard-member',
standardSchedule: jsDir + 'standard-schedule',
standardChannel: jsDir + 'standard-channel',
standardStrategyMerge: jsDir + 'standard-strategy-merge',
standardIntegrate: jsDir + 'standard-integrate',
standardPersonalCenter: jsDir + 'standard-personal-center',
dateTimePicker: jsComponentDir + 'dateTimePicker/date-time-picker',
fullCalendar: jsComponentDir + 'fullCalendar/fullcalendar',
moment: jsComponentDir + 'fullCalendar/moment'
};
requirejs.config({
paths: paths,
shim: {
angular: {
exports : 'angular',
deps: ['jquery']
},
angularRoute: {
deps: ['angular']
},
jQueryMD5: {
deps: ['jquery']
}
},
//urlArgs: "timeStamp=" + (new Date()).getTime()
//urlArgs: 'v=1.47.1&t=20160719'
});
requirejs(['framework']);
}());
</script>
2.framework.js作為首次加載的js，起到至關(guān)重要的作用哈?。《xframeworkApp模塊作為主模塊，另外加載公共服務(wù)utilmodel和ngRoute路由，定義一個(gè)resolveController方法，回調(diào)函數(shù)是requireJs，一會兒會講到！
//引入模塊
var frameworkApp = angular.module('FrameworkApp',['ngRoute', 'utilModule']);
//加載對應(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的話，是可以的！求大神講解啊??！
<!-- start build --> <script src="js/lib/echarts.js"></script> <script src="js/lib/require.min.js"></script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angularjs ocLazyLoad分步加載js文件實(shí)例
本篇文章主要介紹了angularjs ocLazyLoad分步加載js文件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議
AnglarJS作為一款優(yōu)秀的Web框架，可大大簡化前端開發(fā)的負(fù)擔(dān)。本文給大家介紹AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議，涉及到angularjs性能調(diào)優(yōu)相關(guān)知識，對本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12
詳解angular用$sce服務(wù)來過濾HTML標(biāo)簽
這篇文章主要介紹了詳解angular用$sce服務(wù)來過濾HTML標(biāo)簽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
詳細(xì)AngularJs4的圖片剪裁組件的實(shí)例
本篇文章主要介紹了詳細(xì)AngularJs4的圖片剪裁組件的實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法
今天小編就為大家分享一篇angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了angular4+百分比進(jìn)度顯示插件用法,結(jié)合實(shí)例形式分析了Angular4安裝及使用百分比進(jìn)度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了jQuery和AngularJS的區(qū)別淺析,本文著重講解一個(gè)熟悉jQuery開的程序員如何應(yīng)對AngularJS中的一些編程思想的轉(zhuǎn)變,需要的朋友可以參考下2015-01-01
angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
angular 實(shí)現(xiàn)下拉列表組件的示例代碼
這篇文章主要介紹了angular 實(shí)現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
詳解Angular2學(xué)習(xí)筆記之Html屬性綁定
本篇文章主要介紹了詳解Angular2學(xué)習(xí)筆記之Html屬性綁定，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01