最近終于不忙了！！有時間沉淀一下之前學到的angular東東?。?br />
angular路由想必大家已經不陌生了?。吧娜タ次抑澳瞧职咽纸棠闩渲胊ngular路由?。?br />
angular路由作為單頁面應用，切換頁面的時候都是一個頁面，所以切換controller和按需加載控件js就成了大問題??！折騰了我半天啊，angular-route內置的辦法也沒有解決這個問題，最終我是用requireJs解決的這個問題！！上代碼！
1.首先引入requireJs，并且在它的下面用閉包寫配置 requirejs(['framework'])，這句話的意思是首次進入頁面，加載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，起到至關重要的作用哈??！定義frameworkApp模塊作為主模塊，另外加載公共服務utilmodel和ngRoute路由，定義一個resolveController方法，回調函數是requireJs，一會兒會講到！
//引入模塊 var frameworkApp = angular.module('FrameworkApp',['ngRoute', 'utilModule']); //加載對應的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方法完成回調，注意回調的是一個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.有一點我也沒解決，在引入echarts的時候，用這種方法就報錯了，換成highcharts就可以了，折騰半天啊也沒把echarts引進來，不過到是發現，在require生效之前引入echarts的話，是可以的！求大神講解?。?！
<!-- start build --> <script src="js/lib/echarts.js"></script> <script src="js/lib/require.min.js"></script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
