AngularJS-demo - 常用命令、內建服務、自定義服務、繼承
阿新 • • 發佈：2019-01-07
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);
}
});