var app = angular.module('app',[]);
app.service('MyService', function(){
//service code
});
app.controller('MyCtrl', function($scope, MyService){
//controller code
});在此之后，通常的办法是按对象类型来组织代码。var services = angular.module('services',[]);
services.service('MyService', function(){
//service code
});
var controllers = angular.module('controllers',['services']);
controllers.controller('MyCtrl', function($scope, MyService){
//controller code
});
var app = angular.module('app',['controllers', 'services']);这种方式和前面第一部分所谈到的目录结构差不多：不够好。类似的，可以按特性划分，易于扩展。var sharedServicesModule = angular.module('sharedServices',[]);
sharedServices.service('NetworkService', function($http){});
var loginModule = angular.module('login',['sharedServices']);
loginModule.service('loginService', function(NetworkService){});
loginModule.controller('loginCtrl', function($scope, loginService){});
var app = angular.module('app', ['sharedServices', 'login']);当开发一个大型应用程序时，不可能将所有东西都包含在一个页面上，按特性划分模块使得在应用间复用模块变得更加容易。var app = angular.module('app',[]);
app.controller('MainCtrl', function($scope, $timeout){
$timeout(function(){
console.log($scope);
}, 1000);
});这里，很明显，MainCtrl依赖$scope和$timeout。app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){
$timeout(function(){
console.log($scope);
}, 1000);
}]);这样压缩代码时，AngularJS就能清楚地知道如何解释这些依赖：app.controller("MainCtrl",["$scope","$timeout",function(e,t){t(function(){console.log(e)},1e3)}])
var underscore = angular.module('underscore', []);
underscore.factory('_', function() {
return window._; //Underscore must already be loaded on the page
});
var app = angular.module('app', ['underscore']);
app.controller('MainCtrl', ['$scope', '_', function($scope, _) {
init = function() {
_.keys($scope);
}
init();
}]);这允许应用程序继续以AngularJS依赖注入的风格进行开发，同时在测试阶段也能将underscore替换出去。function factory(name, factoryFn) {
return provider(name, { $get: factoryFn });
}
function service(name, constructor) {
return factory(name, ['$injector', function($injector) {
return $injector.instantiate(constructor);
}]);
}从源代码中你可以看到，service仅仅是调用了factory函数，而factory又调用了provider函数。事实上，AngularJS也提供了一些额外的provider封装，如value，constant和decorator。但这些并没有导致类似程度的困惑，它们的文档在应用场景上说得相当清晰。var app = angular.module('app',[]);
app.service('helloWorldService', function(){
this.hello = function() {
return "Hello World";
};
});
app.factory('helloWorldFactory', function(){
return {
hello: function() {
return "Hello World";
}
}
});当helloWorldService或helloWorldFactory被注入到controller中时，它们都有一个hello方法，返回“hello world”。service的构造函数在声明时被实例化了一次，而factory对象在每一次被注入时传递一次，但是仍然只有一个factory实例。。既然能做相同的事，为什么需要两种不同的风格呢？相对于service，factory提供了更多的灵活性，因为它可以返回函数，这些函数之后可以被new出来。这遵循了面向对象编程中的工厂模式，工厂是一个能够创建其他对象的对象。
app.factory('helloFactory', function() {
return function(name) {
this.name = name;
this.hello = function() {
return "Hello " + this.name;
};
};
});
这里是一个使用了service和两个factory的controller的例子。helloFactory返回了一个函数，当被new时会设置name的值。app.controller('helloCtrl', function($scope, helloWorldService, helloWorldFactory, helloFactory) {
init = function() {
helloWorldService.hello(); //'Hello World'
helloWorldFactory.hello(); //'Hello World'
new helloFactory('Readers').hello() //'Hello Readers'
}
init();
});在开始时，最好只使用service。app.factory('privateFactory', function(){
var privateFunc = function(name) {
return name.split("").reverse().join(""); //reverses the name
};
return {
hello: function(name){
return "Hello " + privateFunc(name);
}
};
});通过这个例子，可以让privateFactory的公有API无法直接访问privateFunc，这种模式在service中是可以做到的，但在factory中更加直观。(function () {
var root = $(document.getElementsByTagName('body'));
var watchers = [];
var f = function (element) {
if (element.data().hasOwnProperty('$scope')) {
angular.forEach(element.data().$scope.$$watchers, function (watcher) {
watchers.push(watcher);
});
}
angular.forEach(element.children(), function (childElement) {
f($(childElement));
});
};
f(root);
console.log(watchers.length);
})();通过这个方式得到watcher的数量，结合Batarang性能部分的watch树，应该可以发现哪里存在重复代码，或着哪些不变数据拥有watch。<div ng-controller="navCtrl">
<span>{{user}}</span>
<div ng-controller="loginCtrl">
<span>{{user}}</span>
<input ng-model="user"></input>
</div>
</div>提问：在text input中设置了user的ng-model，当用户在其中输入内容时，哪个模版会被更新？navCtrl还是loginCtrl，还是都会？<div ng-controller="navCtrl">
<span>{{user.name}}</span>
<div ng-controller="loginCtrl">
<span>{{user.name}}</span>
<input ng-model="user.name"></input>
</div>
</div>现在，由于user是一个对象，原型链就会起作用，navCtrl模版和$scope会同loginCtrl的一起被更新。原文地址：http://blog.csdn.net/napolunyishi/article/details/43211937
