├── README.md
└── angularJs-uiRouter-RequireJsDemo
├── .idea
├── .name
├── eLinkDashboard1.0.iml
├── misc.xml
├── modules.xml
├── vcs.xml
└── workspace.xml
├── app
├── business
│ ├── home
│ │ ├── config
│ │ │ └── routerconfig.js
│ │ ├── controllers
│ │ │ ├── homeCtrl.js
│ │ │ ├── httpTestCtrl.js
│ │ │ ├── localCtrl.js
│ │ │ ├── preViewCtrl.js
│ │ │ ├── routertestCtrl.js
│ │ │ ├── showDataCtrl.js
│ │ │ └── testCtrl.js
│ │ ├── partials
│ │ │ ├── home.html
│ │ │ ├── httpTest.html
│ │ │ ├── local.html
│ │ │ ├── preView.html
│ │ │ ├── routertest.html
│ │ │ ├── showData.html
│ │ │ └── test.html
│ │ └── services
│ │ │ └── booksService.js
│ └── services
│ │ └── httpServices.js
└── config
│ ├── app.js
│ ├── appregister.js
│ ├── main.js
│ ├── routerconfig.js
│ └── routermodel.js
├── index.html
├── lib
├── angular-ui-router.js
├── angular.js
├── angular.min.js
├── angular.min2.js
├── bootstrap.js
├── domReady.js
├── jquery.media.js
├── jquery.min.js
└── require.js
└── them
└── css
└── bootstrap.css
/README.md:
--------------------------------------------------------------------------------
1 | 作者:花剌子模
2 | 链接:https://www.zhihu.com/question/33251004/answer/116589753
3 | 来源:知乎
4 | 著作权归作者所有,转载请联系作者获得授权。
5 |
6 | 这个问题我遇到过 我来说说我的解决方案
7 | 首先我的项目采用angularJS +requireJS + ui-router
8 | 实现了 动态按需求加载html 和controller 以及动态配置路由
9 | 本人文笔有限 直接说我是怎样实现的。
10 |
11 | 首先在 mian.js中初始化模块
12 |
13 | ```
14 | require(["domReady!",'app'],function( document){
15 | angular.bootstrap(document, ['myModule'])
16 | })
17 | ```
18 |
19 |
20 | 初始化模块以后 需要重新注册各项服务 关于为何要这样 可以详细看答案 各位大神已经详细说明了
21 | AngularJS按需动态加载template和controller?
22 | AngularJS按需动态加载template和controller? - 前端开发框架和库
23 |
24 | ```
25 | var app = angular.module("myModule", ['ui.router']);
26 | app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide,$stateProvider){
27 | app.register = {
28 | //得到$controllerProvider的引用
29 | controller : $controllerProvider.register,
30 | //同样的,这里也可以保存directive/filter/service的引用
31 | directive: $compileProvider.directive,
32 | filter: $filterProvider.register,
33 | service: $provide.service,
34 | factory:$provide.factory,
35 | stateProvider:$stateProvider
36 | };
37 |
38 | ```
39 |
40 |
41 | 这个文件返回 app 对象, 在另外一个文件中单独返回app.register , 这样 其他需要使用这些服务的 就不用写 app.register.controller("balabala 反正我是这样写的 。
42 |
43 | ```
44 |
45 | define(["app"],function(app){
46 | return app.register;
47 | })
48 |
49 | ```
50 |
51 |
52 | 在另一个文件中写了一个公共方法 作为ui-router 配置的公共调用方法
53 | 代码如下
54 |
55 | 这里return 了一个routerState 方法 ,外部可以调用这个方法对其传参 这个方法可以实现自动配置路由
56 | 关键是调用这个方法 这个是在register 里面配置了的app.stateProvider.state()
57 |
58 | ```
59 | define(["config/appregister"],function(app) {
60 | return {
61 | routerState:function(state,url,ctrl,params) {
62 | if(!angular.isString(state)||!angular.isString(url) || !angular.isString(ctrl)){
63 | return
64 | }
65 | var strurl = ctrl;
66 | var ctrlName = strurl.substring(strurl.lastIndexOf('/')+1);
67 | //todo 字符串匹配校验待做
68 | app.stateProvider.state(state,{
69 | url:"/"+ state,
70 | controller: ctrlName,
71 | templateUrl: url,
72 | resolve: {
73 | loadCtrl: ["$q", function($q) {
74 | var deferred = $q.defer();
75 | //异步加载controller/directive/filter/service
76 | require([
77 | ctrl
78 | ], function() { deferred.resolve(); });
79 | return deferred.promise;
80 | }]
81 | }
82 | })
83 | }
84 | }
85 | })
86 |
87 | ```
88 | 这样 写好了公共文件 。现在加入我的业务分成几个模块
89 | 我要实现 当用户 点击具体模块的时候再 加载器对应的模块下的路由配置
90 |
91 |
92 | 看到这里其实就讲完了 下面的唠叨可以不看了
93 |
94 | 下面在业务模块中写了个方法具体来调用上面的方法 实现路由配置
95 | 我做的demo 目录大概是这样的
96 | 下面这个文件是我一个业务的模块的主文件, 在加载这个主文件的时候 , 先调用上面的方法生成该业务下的路由 。
97 |
98 | 代码如下:
99 | 先调用上面的routerState 方法 对其传参 ,执行完以后就配置好了 。
100 |
101 | ```
102 |
103 | define(['config/routerconfig'],function(router){
104 | router.routerState("routertest","app/business/home/partials/routertest.html","business/home/controllers/routertestCtrl");
105 | })
106 |
107 |
108 | ```
109 |
110 | 在配置好了以后 点击上面配置的路由 可以跳转到刚配好的路由上去
111 |
112 | ```
113 | define(["business/home/config/routerconfig",'config/appregister'],function(routercongfig,app){
114 | app
115 | .controller('localCtrl',function($scope,$state){
116 | $scope.str = '作为主文件同时配置home 业务模块下的细分模块';
117 | $scope.state = function(){
118 | $state.go("routertest");
119 | }
120 |
121 | })
122 |
123 | })
124 |
125 | ```
126 |
127 |
128 | 先写到这儿 ,现在项目才立项 ,刚好昨天实现了这个 后面有优化方案 再来填坑吧
129 | ------------------------------------2016/8/13
130 |
131 |
132 |
133 | 补充一点 , 1 之前有朋友下载了我的demo 打包出现问题 解释一下 ,因为angularJS控制器里面是注入服务多数情况下不是严格的 ["$scope",function($scope){}] 按照这种方式来写的 ,二是直接写成 app.controller(function($scope,$q,balabala){}) , 这种推断注入在项目运行时框架内可以识别 但是打包后 都变成 a ,b , c 了 所以最后会报注入错误, 项目打包的时候需要先用ngAnnotate 处理一下注入问题, 我是用的 gulp 工具做的处理 方法如下
134 |
135 | ```
136 |
137 | var gulp = require('gulp');
138 | var ngAnnotate = require('gulp-ng-annotate');
139 | gulp.task('default', function () {
140 | return gulp.src('dashboard/app/**/*.js')
141 | .pipe(ngAnnotate())
142 | .pipe(gulp.dest('dist'));})
143 | ```
144 |
145 | 通过这个任务流处理以后 就可以将原来推断注入全部转换成显式注入 然后呢 ,就可以愉快的打包了 。2 ,项目后期可以做通过控制路由来配置角色权限 以及其他操作
146 |
147 | ```
148 |
149 | $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
150 | $rootScope.routerToStateName = toState.name;
151 | if(toState.name =="login"){
152 | auth.setFormState(fromState.name);
153 | }
154 | if(fromState.name.indexOf("search")>-1&&toState.name.indexOf("search")<0){
155 | $rootScope.GLOBALKEYWORD = ""
156 | }
157 | //鉴别当前角色是否具有路由访问权限
158 | if( !auth.isAccessUrl(toState.name)){
159 | $state.go("indexCtrl");
160 | event.preventDefault();
161 | }
162 |
163 | ```
164 |
165 | 我把代码贴到我的github上面去了 欢迎交流GitHub - yangfan0095/angularJs-uiRouter-RequireJsDemo: angularJs-uiRouter-RequireJs demo 实现模块按需求加载 路由配置 按需求加载 欢迎交流。
166 |
167 |
--------------------------------------------------------------------------------
/angularJs-uiRouter-RequireJsDemo/.idea/.name:
--------------------------------------------------------------------------------
1 | eLinkDashboard1.0
--------------------------------------------------------------------------------
/angularJs-uiRouter-RequireJsDemo/.idea/eLinkDashboard1.0.iml:
--------------------------------------------------------------------------------
1 |
2 |
5 |
137 |
144 |
{{str}}
Name | 6 |Category | 7 |Price | 8 |9 | |
---|---|---|---|
{{item.name}} | 14 |{{item.category}} | 15 |{{item.price | currency}} | 16 |17 | 18 | 19 | | 20 |
{{str}}
-------------------------------------------------------------------------------- /angularJs-uiRouter-RequireJsDemo/app/business/home/partials/showData.html: -------------------------------------------------------------------------------- 1 |params.city :{{params.city}}
4 |params.parts:{{params.parts}}
5 |params.id:{{params.id}}
6 |params.username:{{params.username}}
7 |test
3 |