AngularJs动态加载模块和依赖注入详解

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

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

首先我们看下文件结构:

文件夹 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">