完整的客户端组件化案例 angularJS + requireJS

来源：互联网发布：2016手机淘宝怎么开店编辑：程序博客网时间：2024/06/06 19:59

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;
}]);
});

0 0