AngularJS-demo - 常用命令、内置服务、自定义服务、继承

AngularJS-demo - 常用命令、内置服务、自定义服务、继承

常用命令: ng-app、ng-controller、ng-init、ng-repeat、ng-click

内置服务: $scope、$http

自定义服务: myService

继承: myController 继承 baseController

表达式 {{ }}

实例：

	
		
		
		
	
	
	
	
AngularJS-demo -常用命令、内置服务、自定义服务、继承
	
	
常用命令: ng-app、ng-controller、ng-init、ng-repeat、ng-click
	
内置服务: $scope、$http
	
自定义服务: myService
	
继承: myController 继承 baseController
	
	{{list}}
	
	


	
	ng-click
	

		

			
姓名
			
语文
			
数学
		
		

			
{{item.name}}
			
{{item.yuwen}}
			
{{item.shuxue}}
		
	
	
	
	
    
    
    
    
    
	

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);
	}
});