AngularJS-demo - 常用命令、内置服务、自定义服务、继承
常用命令: ng-app、ng-controller、ng-init、ng-repeat、ng-click
内置服务: $scope、$http
自定义服务: myService
继承: myController 继承 baseController
表达式 {{ }}
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS-demo -常用命令、内置服务、自定义服务、继承</title>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList(1)">
<h2>AngularJS-demo -常用命令、内置服务、自定义服务、继承</h2>
<h3>常用命令: ng-app、ng-controller、ng-init、ng-repeat、ng-click</h3>
<h3>内置服务: $scope、$http</h3>
<h3>自定义服务: myService</h3>
<h3>继承: myController 继承 baseController</h3>
{{list}}
<br /><br />
<button ng-click="Alert()">ng-click</button>
<table border="1px;" style="width:500px;">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr ng-repeat="item in list">
<td>{{item.name}}</td>
<td>{{item.yuwen}}</td>
<td>{{item.shuxue}}</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/angularjs/angular.min.js" ></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/baseController.js"></script>
<script type="text/javascript" src="js/myController.js"></script>
<script type="text/javascript" src="js/myService.js"></script>
</body>
</html>
data.json
[
{"name": "luo", "yuwen": 100, "shuxue": 90},
{"name": "lei", "yuwen": 90, "shuxue": 96},
{"name": "xing", "yuwen": 100, "shuxue": 95}
]
base.js
//基础公用代码
//创建模块
var app=angular.module("myApp", []);
baseController.js
app.controller("baseController", function($scope){
//baseController 把共用的controller 提出来,继承他的都会有这些方法
//刷新页面,angular 会不停更新调用,所以延迟
$scope.Reload=function(){
setTimeout(function(){
location.reload();
}, 3000);
}
});
myController.js
//创建控制器 controller $scope就是控制层与视图层之间交换的联系
app.controller("myController", function($scope, $controller, myService){
//继承 baseController 伪继承
//{$scope : $scope} 把baseController的$scope与当前的相等
$controller('baseController', {$scope : $scope});
$scope.findList=function(type){
myService.findData(type).success(
function(response){
$scope.list = response;
$scope.Reload();
});
}
$scope.Alert=function(){
alert("ng-click");
}
});
myService.js
//自定义服务service
app.service("myService", function($http){
//把相同的部分url抽出来,方便后期维护
this.findData=function(type){
return $http.get("data.json?type="+type);
}
});