1、factory
用 Factory 就是創建一個對象，爲它添加屬性，然後把這個對象返回出來。你把 service 傳進 controller 之後，在 controller 裏這個對象裏的屬性就可以通過 factory 使用了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module('mod', [])
//定義工廠模塊-factory
.factory('fact', [function () {
return {
str:"testfactory",
sum:function (n1,n2) {
return n1+n2
}
};
}])
//添加依賴注入模塊fact
.controller('testCtrl', ['$scope','fact', function ($scope,fact) {
alert(fact.str)
}])
</script>
</head>
<body ng-app='mod' ng-controller='testCtrl'>
</body>
</html>2、provide
Providers 是唯一一種你可以傳進 .config() 函數的 service。當你想要在 service 對象啓用之前，先進行模塊範圍的配置，那就應該用 provider。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module('mod', [])
.controller('modCtrl', ['$scope','prod', function ($scope,prod) {
alert(prod.a+prod.b)
}])
.provider('prod', [function () {
this.$get = [function() {
return {
a:12,
b:15
};
}];
}])
</script>
</head>
<body ng-app='mod' ng-controller='modCtrl'>
</body>
</html>3、service
Service 是用"new"關鍵字實例化的。因此，你應該給"this"添加屬性，然後 service 返回"this"。你把 service 傳進 controller 之後，在controller裏 "this" 上的屬性就可以通過 service 來使用了。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module('mod', [])
.service('serv', [function () {
this.a=12
}])
.controller('modCtrl', ['$scope','serv', function ($scope,serv) {
alert(serv.a)
}])
</script>
</head>
<body ng-app='mod' ng-controller='modCtrl'>
</body>
</html>4、constant與value
constant不可修飾
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module('mod', [])
.constant('VERSION', '5.0.3')
.value('name', 'cisco')
.controller('modCtrl', ['$scope','VERSION','name', function ($scope,VERSION,name) {
alert(name+':'+VERSION)
}])
</script>
</head>
<body ng-app='mod' ng-controller='modCtrl'>
</body>
</html>5、decorator
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<script>
angular.module('mod', [])
.constant('VERSION', '5.0.3')
.value('name', 'cisco')
.controller('modCtrl', ['$scope','VERSION','name','prod', function ($scope,VERSION,name,prod) {
alert(name+' '+prod.nxos+''+prod.type+' '+prod.date+' '+VERSION)
}])
.provider('prod', [function () {
this.$get = [function() {
return {
nxos:'nxos',
type:'5548'
};
}];
}])
.decorator('prod',function ($delegate) {
$delegate.date='2007.1.10'
return $delegate
})
</script>
</head>
<body ng-app='mod' ng-controller='modCtrl'>
</body>
</html>6、route
需要http服務器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular.min.js"></script>
<!-- 引入angular-route文件 -->
<script src="angular-route.min.js"></script>
<script>
//引入ngRoute模塊
angular.module('mod', ['ngRoute'])
.controller('routeCtrl', ['$scope','$route', function ($scope,$route) {
}])
.controller('gameCtrl', ['$scope', function ($scope) {
$scope.name='cxiong'
$scope.scope='9999'
}])
//配置route的$routeProvider
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/game', {
templateUrl: 'game.html',
controller:'gameCtrl'
})
.when('/sport', {
templateUrl: '../index.html'
})
.when('/news', {
templateUrl: '../style.html'
})
}])
</script>
</head>
<body ng-app='mod' ng-controller='routeCtrl'>
<a href="#/game">遊戲競技</a>
<a href="#/sport">勁爆體育</a>
<a href="#/news">全球新聞</a>
<ng-view></ng-view>
</body>
</html>