1、H5页面,引入 requireJS和其配置文件；同时使用 angularJS的模块
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS+RequireJS</title>
<script type="text/javascript" src="require.js" data-main="main.js"></script>
</head>
<body>
<div ng-controller="ctrlLogin">
<label>
<input type="text" ng-model="name"/>
</label>
<span ng-bind="name"></span>
</div>
</body>
</html>
2、requireJS 定义加载路径(可以加载样式和js文件），在这里加载angularJS 和 自定义的组件
main.js
require.config({
//定义基础路径，其他的path等路径是基于基础路径进行引入的。如果不配置，默认为引入requireJS页面所在的位置
//baseUrl:"scripts/",
//requirejs默认对文件进行js扩展名处理，如果加上js或者以http、https开头，则不处理
paths:{
//定义组件名称，以及组件js所在的路径
"angular":"./angular",
"use":"./use"
},
//
shim:{
"angular":{
exports: "angular"
}
}
});
require(["angular","app"],function(angular,app){
//angularjs 启动
angular.bootstrap(document,['TestAll']);
});
3、实现 angularJS 组件化的 控件或服务
use.js
define(["angular"],function(angular){
var app=angular.module("use",[]);
app.service('myService', ['$rootScope', function($rootScope) {
this.value="use";
}]);
});
4、应用二次开发 angularJS的代码，引入组件
app.js
define(["angular","use"],function(angular){
var app=angular.module("TestAll",["use"]);
app.controller('ctrlLogin',['$scope','myService',function($scope, myService){
$scope.name="ketty" + myService.value;
}]);
});
9608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
