-
主页面不加app,通过angular.bootstrap自行启动
-
在index页面引入require.js,和入口js文件main.js(main后面不要加.js)。
<script data-main="src/js/main" src="src/js/lib/require/require.min.js" defer async></script>
-
在main.js里面做配置和依赖表明
require.config({ baseUrl: "http://resource.k2o.me/kz/measure/cconsole/1.1/src/jjs", paths: { "domReady":"lib/require/domReady.min", "angular":'lib/angular/angular.min', "ui-router":'lib/angular/angular-ui-router.min', "tool": 'app/tool' }, shim:{ "angular":{ exports:"angular" }, "ui-router":{ deps:["angular"] } }, deps:['tool'] });
main.js内只写配置,不写逻辑。
- 关于配置参数说明:
baseUrl即其他路径的相对地址,如果不做baseUrl配置则默认路径为main.js目录,因为在index.html页面引入require哪里做了data-main=js/main的配置
paths:来配置其他文件的名称
shim:对于未用define()定义的框架来暴露一个变量供外部调用,并标明依赖
deps:相当于异步加载数组里配置的所有文件,意思类似于require(['tool']),我们的代码可以从tool.js内开始
具体require.config内的配置这里总结的非常全面 - 下面是tool.js。展现了如何来自行启动angular
define(["require", "angular", "ui-router"], function(require, angular) {
var app = angular.module('app',[]);
require(['domReady!'], function(domReady) { //domReady依赖的!前缀来强制require()回调函数在执行之前等待DOM Ready。
angular.bootstrap(document, ["app"]); /手工启动angular/
});
app.controller('cons_ctrl',function($scope){
$scope.hello='aaa'
})
});
注意里面依赖到的domReady!在main.js里已有配置。
可以看到页面内的{{ hello }}已经被渲染为aaa了。
网友评论