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

最新推荐文章于 2022-03-28 17:10:39 发布

csdnluolei

最新推荐文章于 2022-03-28 17:10:39 发布

阅读量228

点赞数

分类专栏：【Angular.js】文章标签： AngularJS

本文链接：https://blog.csdn.net/csdnluolei/article/details/85011244

版权

【Angular.js】专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

csdnluolei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS-demo - 常用命令、内置服务、自定义服务、继承

AngularJS-demo - 常用命令、内置服务、自定义服务、继承常用命令: ng-app、ng-controller、ng-init、ng-repeat、ng-click内置服务: $scope、$http自定义服务: myService继承: myController 继承 baseController表达式 {{ }}实例：&lt;!DOCTYPE html...
复制链接

扫一扫