<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angualr test</title>
<link rel="shortcut icon" href="img/shortcut.png" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>
<input type="number" ng-model="num"/>
</p>
<button ng-click="clcu()">clculate</button>
<p>number:{{num}}</p>
<p>squere:{{result}}</p>
</div>
<script>
const app = angular.module("myApp",[]);
//factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
//通常我们使用 factory 函数来计算或返回值。
app.factory("clcuFactorys",function(){
return {
getResult:function(num){
return num*num;
}
}
})
//AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
//Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
//config与factory同时存在且factory和provider同名时,config会覆盖factory。factory无效。
app.config(function($provide){
$provide.provider("clcuFactory",function(){
this.$get = function(){
return {
getResult : function(num) {
return num * num*num;
}
}
}
})
})
app.value("append",1);
//app.service回调函数的参数必须与app.factory保持一致
app.service("clcuService",function(clcuFactory){
this.clculate = function(num){
return clcuFactory.getResult(num);
}
})
//app.controller回调函数中的参数clcuService必须与app.service保持一致
app.controller("myCtrl",function($scope,clcuService,append){
$scope.result = null;
$scope.clcu = function(){
$scope.result = clcuService.clculate($scope.num)+append;
}
})
</script>
</body>
</html>
