详解基于angular路由的requireJs按需加载js

最近终于不忙了！！有时间沉淀一下之前学到的angular东东！！

angular路由想必大家已经不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！）

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。