JS结构:
main.js
/**
* main.js这个文件完成的事情简单来说就是:载入所有文件,然后在document上运行Angular并将ng-app属性设置为’app’。
* 这些文件因为是由RequireJS异步载入,因此我们需要来“手动启动”Angular应用。
*
* */
require.config({
paths: {
//库文件
//"responsive": "lib/responsive-nav",
"angular": "lib/angular",
"bootstrap": "lib/bootstrap.min",
"angularRoute": "lib/angular-route",
"angularResource": "lib/angular-resource",
//"ui-bootstrap": "lib/ui-bootstrap-tpls-0.11.0.min",
//"phprpc": "lib/phprpc_client",
"jquery": "lib/jquery.min"
},
shim: {
angular: {
exports: "angular"
},
angularRoute: {
deps: ["angular"]
},
angularResource: {
deps: ['angular']
}
},
urlArgs: "bust=" + (new Date()).getTime() //防止读取缓存,调试用
});
//手动启动ng
define(["routes"], function () {
//使用bootstrap方法启动Angular应用
angular.bootstrap(document, ["app"]);
});
routes.js
/**
* routes.js
*/
define([
"app"
], function (app) {
//app是Angular应用对象
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/search', {
templateUrl: 'template/search.html',
controller: 'SearchCtrl'
})
.otherwise({ redirectTo: '/LmpSumQut' });
}]);
})
app.js
/**
* app.js
*/
define(
[
'angular',
'angularResource',
'angularRoute',
'controllers/index',
'services/index'
], function (angular) {
return angular.module('app', ['ngRoute', 'ngResource', 'controllers', 'services']);
}
)
controllers/index.js
define([
'controllers/homeController'
], function () {
// 此处为空,这个文件主要是控制当控制器比较多时可以都加载完毕
});
controllers/homeController.js
define(['controllers/controllers'],
function (controllers) {
controllers.controller('homeController', ['$scope', 'homeService',
function ($scope, homeService) {
$scope.resultValue = homeService.Post(
[{
"QuoteNo": "11111",
"OrgZ": "洲",
"OrgG": "国",
"Sales": "admin",
"ContractNo": "20140805000",
"FeeNos": "11|22|33|44"
}], function () {
alert($scope.resultValue.Msg);
}
);
}
]);
});
controllers/controllers.js
define(
['angular'],
function (angular) {
return angular.module('controllers', []);
}
);
services/index.js
/**
* index.js
*/
define([
'services/homeService'
], function () {
// 此处为空,这个文件主要是控制当控制器比较多时可以都加载完毕
});
services/homeService.js
define(['services/services'],
function (services) {
services.factory('homeService', ['$resource',
function ($resource) {
return $resource("../api/BoCtnQutMain/", {}, {
Post: { method: "Post" },
PostArray: { method: "Post",isArray:true }
});
}
])
});
services/services.js
define(['angular'], function (angular) {
return angular.module('services', ['ngResource']);
});
测试页:
<body>
<span ng-controller="homeController">{{resultValue.Msg}}</span>
<script src="js/lib/require.js" data-main="js/main"></script>
</body>
加载顺序:
主要看 define里面的第一个参数,看它依赖谁
首先程序进入加载require.js,
然后再进入main.js 可以看出main.js是依赖与routes.js 所以需要先加载routes.js
-->routes.js routes.js又是依赖于app.js 。。。下同
-->app.js
-->angular、angularResource、angularRoute、controllers/index.js、services/index.js//这里的angularResource、angularRoute与main.js里面配置的要一致
-->controllers/homeController.js
-->controllers/controllers.js
-->services/services.js
这样就全部加载完了,弄清楚顺序就不太复杂。
网上找的没有 service 部分 所以这里记录一下,可能里面有错误,本文只供新手参考学习。