之前分享了一篇用ocLazyLoad实现按需加载角度射流研究…文件的博客。本来当时想会使用一种方法就行了。可最近刚好有时间，在网上查找了一下requirejs实现角度射流研究…文件按需加载的资料。方案如下：

项目的主结构如下图：

1.index.html是最外层的页面，页面代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title require angular js/title/head body a href=' # module 1 ' rel=' external no follow ' module 1/ABR/a href=' # module 2 ' rel=' external no follow ' module 2/adiv style=' height : 30px；width : 100px " { str } }/div div id=' container ' ui-view/div脚本数据-main=' main。js ' src=' http : require。js ' id=' main '/script/body/html 2 .页面中的脚本标签中，会首先引用require.js这个文件，然后再去引用main.js这个文件，main.js主要是一些关于需要的配置信息，代码如下：

var config={ baseUrl: ' ./', //依赖相对路径路径： {//如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出domReady: ' domReady '，angular: './node_modules/angular/angular '，app:'app '，router: './node _ modules/angular-ui-router/release/angular-ui-router ' }，shim: { //引入没有使用requirejs模块写法的类库。例如强调这个类库，本来会有一个全局变量'_'。这里夹铁等于快速定义一个模块，把原来的全局变量'_'封装在局部，并导出为一个出口，变成跟普通requirejs模块一样路由器： { deps 3360[' angular ']，//依赖什么模块}，' angular ' : { export s : ' angular ' } } }；要求。config(配置)；//deps :[' web app ']要求(['domReady '，' app '，' angular']，function(){ angular。引导数据库(文档，['webapp'])//这里会去执行app.js这个文件}) 3.接下来进入app.js

/** *由管理员于2016年七月28日创建*/define(['router']，function(){ var app=angular。模块(' web app '，[' ui。路由器'])；app。config(函数($ state provider，$ urlRouterProvider){ $ urlRouterProvider。其他(‘模块1’)；//如果没有指定路由，会默认访问module1 $stateProvider .状态(' module1 '，{ url:'/module1 '，//控制器： ' ctrl 1 '，//这里如果写了控制器，那么在加载module1.js时，js文件里面的console.log()会运行两次模板URL : '模块1/模块1。html '，resolve: { loadCtrl: ['$q '，function($ q){ var delived=$ q . delived()；//异步加载控制器/指令/过滤器/服务要求([ 'module1/module1' ]，函数(){已交付。resolve()；});延期归还。}] } }) .状态(' module2 '，{ url:'/module2 '，//controller : ' ctrl 2 '，模板url: '模块1/模块2。html '，resolve: { loadCtrl: ['$q '，function($ q){ var delived=$ q . delived()；//异步加载控制器/指令/过滤器/服务要求([ 'module1/module2' ]，函数(){已交付。resolve()；});延期归还。}] } }) });app.config(函数($controllerProvider，$compileProvider，$filterProvider，$ provider){ app。register={//得到$controllerProvider的引用控制器：美元控制器提供商。注册，//同样的，这里也可以保存指令/过滤器/服务的引用指令： $ CompileProvider。方向，过滤器： $ CompileProvider。注册，服务：美元提供。服务}；})返回app })；4.module1.js代码如下：

定义(['app']，函数(app){ app.register .控制器(“ctrl 1”，函数($ scope){ $ scope。str=“主页”；控制台。日志('第1页')})})5。模块2。射流研究…代码如下：

定义(['app']，函数(app){ app.register .控制器(“ctrl 2”，函数($ scope){ $ scope。str=“本地页面”；控制台。日志('第2页')})})6.module1.html代码如下：

分类控制器=' ctrl 1 '这是tp1

div id=' navigator ' style=' width : 100%；高度： 40px行高： 40px ' a href=' http://www。cn博客。com/' rel='外部无跟随'博客园首页/a a href=' http://www .cn博客。com/Ricky-Huang/' rel='外部无跟随' Ricky的首页/a a href=' http://I . cn博客。com/编辑帖子。aspx？opt=1' rel='外部' nofollow '新随笔/a a href=' http://msg。cn博客。com/send/Ricky _ Huang ' rel='外部无跟随'联系我/a a href=' http://www .cn博客。com/Ricky-Huang/RSS ' rel='外部无跟随'订阅他/a a href=' http://I . cn博客。com/' rel='外部无跟随'管理/a /div/div 7.module2.html2代码如下：

分类控制器=' ctrl 2 '这是tp2 {{str}}/div到了这一步，我们运行index.html文件，我们得到如下效果：(右图是控制台输出)

点击模块2可以尽心正常切换，而且也可以看到射流研究…文件确实动态加载了；

注意：module1.js，module1.html，module2.js，module2.html折四个文件全部在组件这个文件夹里面

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