详解基于angular路由的requireJs按需加载js
最近终于不忙了!!有时间沉淀一下之前学到的angular东东!!
创新互联专注于企业成都全网营销推广、网站重做改版、西安网站定制设计、自适应品牌网站建设、H5开发、商城建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为西安等各大城市提供网站开发制作服务。
angular路由想必大家已经不陌生了!(陌生的去看我之前那篇手把手教你配置angular路由!)
angular路由作为单页面应用,切换页面的时候都是一个页面,所以切换controller和按需加载控件js就成了大问题!!折腾了我半天啊,angular-route内置的办法也没有解决这个问题,最终我是用requireJs解决的这个问题!!上代码!
1.首先引入requireJs,并且在它的下面用闭包写配置 requirejs(['framework']),这句话的意思是首次进入页面,加载framework
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的话,是可以的!求大神讲解啊!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
本文名称:详解基于angular路由的requireJs按需加载js
本文路径:http://pwwzsj.com/article/jdeieg.html