提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

12分布式电商项目 - AngularJS快速入门

项目分布式分布式入门 快速 12 电商 angularjs
2023-09-11 14:15:41 时间

1.表达式

<html>
	
	<head>
		<title>入门小 Demo-1</title>
		<script src="angular.min.js"></script>
	</head>
	
	<body ng-app>
		{{100+100}}
	</body>
</html>

执行结果如下：
在这里插入图片描述
表达式的写法是{{表达式 }}表达式可以是变量或是运算式

ng-app 指令 作用是告诉子元素一下的指令是归 angularJs 的,angularJs 会识别的

ng-app 指令 定义了 AngularJS 应用程序的根元素。

ng-app 指令 在网页加载完毕时会自动引导（自动初始化）应用程序。

2.双向绑定

<html>
	<head>
		<title>入门小 Demo-1 双向绑定</title>
		<script src="angular.min.js"></script>
	</head>
	<body ng-app>
		请输入你的姓名：<input ng-model="myname">
		<br>
		{{myname}},你好
	</body>
</html>

运行效果如下：
在这里插入图片描述
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

3.控制器

<html>
	<head>
		<title>入门小 Demo-3 初始化</title>
		<script src="angular.min.js"></script>
		<script type="text/javascript">
			//定义函数
			function helloController($scope) {
				$scope.greeting = {
				text : "hello"
				};
			}
		</script>
	</head>
	
	<body ng-app>
		<div ng-controller="helloController">
			<p>{{greeting.text}},angular!</p>
		</div>
	</body>
</html>

ng-controller 用于指定所使用的控制器

理解 $scope：
$scope的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.

4.MVC模式

Angular 遵循软件工程的 MVC 模式,并鼓励展现，数据，和逻辑组件之间的松耦合,提高代码的复用性.angularJS 为后端减轻了很多业务压力,带来了更轻的 web 应用.

那么在 AngularJS 的应用中,怎么提现 mvc 设计模式的呢?下面来看以下代码展示 AngularJS 的
应用.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="js/angular.min.js"/>		 
		<script type="text/javascript">
		
		//定义函数
		function helloController($scope) {
				$scope.greeting = {
				text : "hello" //模型层
				};
		}
		</script>
	</head>
	
	<body ng-app>
		<div ng-controller="helloController"> //控制层
			<p>{{greeting.text}},angular!</p> //视图层
		</div>
	</body>
</html>

5.模块化设计

js 编程通常把 js 都放在全局环境中,那么这些变量函数,或者是对象都会产生在 window 对象下,会污染全局空间.为了更好管理 js,我们使用模块化的开发方式.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="js/angular.min.js"/> 
		<script type="text/javascript">
			//定义一个叫oneModule名称的模块
			var myModule = angular.module('oneModule',[]);
			//使用模块调用方法
			myModule.controller('helloController',function($scope){
				$scope.greeting = function(){
					return "hello,angular!";
				}
			})
		</script>
	</head>
	<body ng-app="oneModule">
		<div ng-controller="helloController">
			<p>{{greeting()}},angular!</p>
		</div>
	</body>
</html>

6. 初始化指令

我们如果希望有些变量具有初始值，可以使用ng-init 指令来对变量初始化。

<html>

	<head>
		<title>入门小 Demo-3 初始化</title>
		<script src="angular.min.js"></script>
	</head>
	
	<body ng-app ng-init="myname='陈大海'">
		请输入你的姓名：<input ng-model="myname">
		<br>
		{{myname}},你好
	</body>

</html>

7.事件指令

<html>
	<head>
		<title>入门小 Demo-5 事件指令</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);
			}
			});
		</script>
	</head>
	
	<body ng-app="myApp" ng-controller="myController">
		x:<input ng-model="x" >
		y:<input ng-model="y" >
		<button ng-click="add()">运算</button>
		结果：{{z}}
	</body>
</html>

运行结果：
在这里插入图片描述
ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法。

8.循环数组

<html>
	<head>
		<title>入门小 Demo-6 循环数据</title>
		<script src="angular.min.js"></script>
		<script>
			var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController',function($scope){
				$scope.list= [100,192,203,434 ];//定义数组
			});
		</script>
	</head>
	
	<body ng-app="myApp" ng-controller="myController">
		<table>
			<tr ng-repeat="x in list">
			<td>{{x}}</td>
			</tr>
		</table>
	</body>
</html>

这里的 ng-repeat 指令用于循环数组变量。

运行结果如下：
在这里插入图片描述

9.循环对象数组

<html>
	<head>
		<title>入门小 Demo-7 循环对象数组</title>
		<script src="angular.min.js"></script>
		<script>
			var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController',function($scope){
			$scope.list= [
			{name:'张三',shuxue:100,yuwen:93},
			{name:'李四',shuxue:88,yuwen:87},
			{name:'王五',shuxue:77,yuwen:56}
			];//定义数组
			});
		</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>

运行结果如下：
在这里插入图片描述

10.内置服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http 来实现。注意：以下代码需要在 tomcat 中运行。

<html>
	<head>
		<title>入门小 Demo-8 内置服务</title>
		<meta charset="utf-8" />
		<script src="angular.min.js"></script>
		<script>
			var app=angular.module('myApp',[]); //定义了一个叫 myApp 的模块
			//定义控制器
			app.controller('myController',function($scope,$http){
			$scope.findAll=function(){
				$http.get('data.json').success(
					function(response){
						$scope.list=response;
					}
				);
			}
		});
		</script>
	</head>
	<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>

建立文件 data.json:

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

相关文章