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

1、H5页面,引入 requireJS和其配置文件；同时使用 angularJS的模块

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;

}]);

});