AngularJs 动态加载模块和依赖

前端之家收集整理的这篇文章主要介绍了AngularJs 动态加载模块和依赖前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间。本来一直不打算写这些第三方插件的学习笔记,不过觉得按需加载模块并且成功使用这个确实是个好处,还是记录下来吧。基于本兽没怎么深入的使用requireJs,所以本兽不知道这个和requireJs有什么区别,也不能清晰的说明这到底算不算Angular的按需加载。

为了实现这篇学习笔记知识点的效果,我们需要用到:

angular:https://github.com/angular/angular.js

ui-router:https://github.com/angular-ui/ui-router

ocLazyLoad:https://github.com/ocombe/ocLazyLoad

废话不多说,进入正题...

首先我们看下文件结构:

文件夹 Scripts --- 框架及插件文件夹 angular-1.4.7 --- angular 不解释 angular-ui-router --- uirouter 不解释 oclazyload --- ocLazyload 不解释 bootstrap --- bootstrap 不解释 angular-tree-control-master --- angular-tree-control-master 不解释 ng-table --- ng-table 不解释 angular-bootstrap --- angular-bootstrap 不解释 js --- js文件夹 针对demo写的js文件 controllers --- 页面控制器文件夹 angular-tree-control.js --- angular-tree-control控制器代码 default.js --- default控制器代码 ng-table.js --- ng-table控制器代码 app.config.js --- 模块注册及配置代码 oclazyload.config.js --- 加载模块配置代码 route.config.js --- 路由配置及加载代码 views --- html页面文件夹 angular-tree-control.html --- angular-tree-control插件效果页面 default.html --- default页面 ng-table.html --- ng-table插件效果页面 ui-bootstrap.html --- uibootstrap插件效果页面 index.html --- 主页面

注意:这个demo没做嵌套路由,只是简单实现单视图的路由以展示效果

我们来看主页面代码

在这个页面,我们只加载了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js,以及3个配置的js文件

再看看四个页面HTML代码

angular-tree-control效果页面

页面上有个使用该插件对应的指令。

default页面

这里我们只是用来证明加载并正确执行default.js。

ng-table效果页面

Box-shadow pos-rlt">