AngularJS入门及示例

😂 这篇文章最后更新于1714天前,您需要注意相关的内容是否还可用。

AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优 秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心 的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。

双向绑定(同变量值同步变化):

<html>
<head>
<title>入门小 Demo-1</title>
<script src="angular.min.js"></script>
</head>
<!-- ng-init初始化 -->
<body ng-app ng-init="myname='蔡徐坤'">
	<!-- {{}}变量表达式调用 -->
{{100+100}}
<!-- ng-model变量绑定 双向绑定 即下面同变量名数值都一样 -->
请输入你的姓名:<input ng-model="myname">
			  <input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

控制器controller与事件:

<html>
	<head>
		<title>控制器</title>
		<script src="angular.min.js"></script>
		<script> 
			var app = angular.module('myApp', []); //定义了一个名叫 myApp 的模块 []写引入其他模块的名字
			//定义控制器 $scope作用域 控制层与视图层的数据桥梁
			app.controller('myController', function($scope) {
				$scope.add = function() {
					// 获取视图层的变量 转换成int 否则+会作为拼接字符串连接符
					return parseInt($scope.x) + parseInt($scope.y);
				}
			});
		</script>
	</head>
	<!-- body绑定模块与控制器 -->
	<body ng-app="myApp" ng-controller="myController">
		x:<input ng-model="x">
		y:<input ng-model="y">
		运算结果:{{add()}}
	</body>
</html>

ng-click事件与ng-repeat循环数组与对象数组:

<html>
	<head>
		<title>事件指令</title>
		<script src="angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController', function($scope) {
				$scope.add = function() {
					$scope.z = parseInt($scope.x) + parseInt($scope.y);
				}
				$scope.list = [100, 200, 300]; //定义数组
				/* 循环对象定义 */
				$scope.alist = [{
						name: '张三',
						shuxue: 100
					},
					{
						name: '李四',
						shuxue: 88
					}]; //定义数组
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myController">
		x:<input ng-model="x">
		y:<input ng-model="y">
		<!-- ng-click单击事件 -->
		<button ng-click="add()">计算</button>
		结果:{{z}}
		<!-- 循环数组 ng-repeat = 变量 in 数组 -->
		<table>
			<tr ng-repeat="a in list">
				<td>{{a}}</td>
			</tr>
		</table>
		<!-- 循环对象 类似Java中用点调用对象属性-->
		<table>
			<tr ng-repeat="a in alist">
				<td>{{a.name}}</td><td>{{a.shuxue}}</td>
			</tr>
		</table>
	</body>
</html>

$http内置服务:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置服务</title>
		<meta charset="utf-8" />
		<script src="angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []); //定义了一个叫 myApp 的模块
			//内置服务$http需要再方法中注入
			app.controller('myController', function($scope, $http) {
				$scope.findAll = function() {
					// get/post请求
					$http.post('data.json').success(
						function(response) {
							$scope.list = response;
						}
					);
				}
				//由于body调用了该controller 因此必定会调用下行方法而执行上述代码 但放init中就不必担心别的页面每次调用也会执行 
				// $scope.findAll();
			});
		</script>
	</head>
	<!-- ng-init除了给变量初始化 也可以调用方法 -->
	<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
		<table>
			<tr>
				<td>姓名</td>
				<td>数学</td>
				<td>语文</td>
			</tr>
			<tr ng-repeat="entity in list">
				<td>{{entity.name}}</td>
				<td>{{entity.shuxue}}</td>
				<td>{{entity.yuwen}}</td>
			</tr>
		</table>
	</body>
</html>

测试的json数据data.json:

[
{"name":"张三","shuxue":100,"yuwen":93},
{"name":"李四","shuxue":88,"yuwen":87},
{"name":"王五","shuxue":77,"yuwen":56},
{"name":"赵六","shuxue":67,"yuwen":86}
]

总结:

var app = angular.module('myApp', []) //在js中定义模块
app.controller('myController', function($scope) {}    //给模块创建名为myController的控制器
$scope //前端与控制层数据的桥梁
ng-app="myApp"  //在body标签里绑定模块 将body交给angular管理
ng-init="findAll() //初始化变量或者在载入时调用方法 可见第一个demo
ng-controller="myController" //定义控制器
{{}}        //调用变量或者运算式
<input ng-model="x">    //为标签绑定变量
ng-click        //单击事件
a in list        //in作为list遍历
a.name        //点调用对象属性
$http.post('data.json').success(function(response){return response})    //http服务发送请求

MVC模式

首先在base.js中创建模块,这里命名为app

var app=angular.module('tieba',['pagination']);    //[]内为引入的模块 不需要可留空

在服务js中写service:

app.service('tiebaService',function($http){
   //读取列表数据绑定到表单中
   this.findAll=function(){
      return $http.get('../tieba/findAll.do');
   }
});

在控制层js中写controller:

 //控制层
app.controller('tiebaController' ,function($scope,$controller   ,tiebaService){ //引用service跟内置服务

   $controller('baseController',{$scope:$scope});//继承 baseController

    //读取列表数据绑定到表单中
   $scope.findAll=function(){
      tiebaService.findAll().success(
         function(response){
            $scope.list=response;
         }
      );
   }
 });