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