JavaScript应用-Angular.js的使用

迷南。 2022-02-15 08:39 210阅读 0赞

**1、ng-app 表达式**

![在这里插入图片描述][20190424102535333.png]

**2.ng-model动态绑定、ng-init初始化指令**

<html>
    	<head>
    		<title>动态绑定，初始化指令</title>
    		<script src="angular.min.js"></script>
    	</head>
    	<body ng-app ng-init="myname='李海'">请输入你的姓名:<input ng-model="myname">
    		<br>
    		{
       {myname}},你好！	
    	</body>
    </html>

![在这里插入图片描述][20190424102652577.png]

**3.ng-controller 控制器**

<html>
    <head>
    	<title>控制器</title>
    	<script src="angular.min.js"></script>
    	<script>
    		//建立模型
    		var app = angular.module("myApp",[]);
    		//创建控制器  $scope就是控制层之间交换数据的桥梁
    		app.controller("myController",function($scope){
    			$scope.add=function(){
    				return $scope.x+$scope.y;
    			}
    		});
    	</script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
    	第一个数：<input ng-model="x">
    	第二个数：<input ng-model="y">
    	{
       {add()}}
    </body>
    </html>

![在这里插入图片描述][20190424102740544.png]

**4.ng-click 事件指令 $scope内置服务**

<html>
    <head>
    	<title>事件指令</title>
    	<script src="angular.min.js"></script>
    	<script>
    		//建立模型
    		var app = angular.module("myApp",[]);
    		//创建控制器  $scope就是控制层之间交换数据的桥梁
    		app.controller("myController",function($scope){
    			$scope.add=function(){
    				$scope.z = parseInt($scope.x)+parseInt($scope.y);
    			}
    		});
    	</script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
    	第一个数：<input ng-model="x">
    	第二个数：<input ng-model="y">
    	<button ng-click="add()">运算</button>
    	运算结果:{
       {z}}
    </body>
    </html>

![在这里插入图片描述][20190424102818340.png]  
**5.ng-repeat 循环数组**

<html>
    <head>
    	<title>循环数组  </title>
    	<script src="angular.min.js"></script>
    	<script>
    		//建立模型
    		var app = angular.module("myApp",[]);
    		//创建控制器  $scope就是控制层之间交换数据的桥梁
    		app.controller("myController",function($scope){
    			$scope.list=[102,203,349,555];
    		});
    	</script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
    	<table>
    		<tr ng-repeat="x in list">
    			<td>{
       {x}}</td>
    		</tr>
    	</table>
    </body>
    </html>

![在这里插入图片描述][20190424102901816.png]  
**6.循环对象数组**

<html>
    <head>
    	<title>循环对象数组  </title>
    	<script src="angular.min.js"></script>
    	<script>
    		//建立模型
    		var app = angular.module("myApp",[]);
    		//创建控制器  $scope就是控制层之间交换数据的桥梁
    		app.controller("myController",function($scope){
    			$scope.list=[
    				{name:'张三',shuxue:100,yuwen:100},
    				{name:'李四',shuxue:90,yuwen:90},
    				{name:'张三',shuxue:40,yuwen:50}
    			];
    		});
    	</script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
    	<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>

![在这里插入图片描述][20190424102944219.png]

**7.$http 内置服务**

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title>内置服务$http</title>
    	<script src="angular.min.js"></script>
    	<script>
    		//建立模型
    		var app = angular.module("myApp",[]);
    		//创建控制器  $scope就是控制层之间交换数据的桥梁
    		app.controller("myController",function($scope,$http){
    			$scope.findList=function(){
    				$http.get("data.json").success(
    				function(response){
    					$scope.list=response;
    					}
    				);
    			}
    			$scope.findList();
    		});
    	</script>
    </head>
    <body ng-app="myApp" ng-controller="myController" ng-init="findList()">
    	<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>

**8.data.json**

[
    	{"name":"张三","shuxue":100,"yuwen":100},
    	{"name":"李四","shuxue":90,"yuwen":90},
    	{"name":"王五","shuxue":40,"yuwen":50},
    	{"name":"赵六","shuxue":40,"yuwen":50}
    ]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]

原文：[https://blog.csdn.net/mollen/article/details/84727479][https_blog.csdn.net_mollen_article_details_84727479]

[20190424102535333.png]: /images/20220215/1597e82b0b4d4134b7005cb756b320d0.png
[20190424102652577.png]: /images/20220215/5c1de18a105d4b448c4aa154c94d80ab.png
[20190424102740544.png]: /images/20220215/fba327ed2813425fb39dc0e7edf85559.png
[20190424102818340.png]: /images/20220215/219a3f0b5e1b493e85355c35369c9f63.png
[20190424102901816.png]: /images/20220215/7a181676e0c14177973db6ff76624399.png
[20190424102944219.png]: /images/20220215/06d45d7241fb4c25bb6a2c396c11471a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]: /images/20220215/c122bf8bb527407d94f17f0511d73bd4.png
[https_blog.csdn.net_mollen_article_details_84727479]: https://blog.csdn.net/mollen/article/details/84727479