详解基于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>

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：详解基于angular路由的requireJs按需加载js-创新互联
分享URL：https://www.cdcxhl.com/article18/jsgdp.html

成都网站建设公司_创新互联，为您提供标签优化、域名注册、网站营销、微信公众号、外贸建站、电子商务

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容