电商二十三、AngularJS的简介和小demo

最新推荐文章于 2022-06-16 09:36:41 发布

详见附件

最新推荐文章于 2022-06-16 09:36:41 发布

阅读量216

点赞数

分类专栏：电商-------基于ssm框架大型分布式电商系统开发文章标签：电商二十三、AngularJS的简介和小demo

本文链接：https://blog.csdn.net/lbh19630726/article/details/98783451

版权

电商-------基于ssm框架大型分布式电商系统开发专栏收录该内容

73 篇文章 3 订阅

订阅专栏

①AngularJS（一种前端框架）的简介

AngularJS最后被Google公司收购。AngularJS1和2和3和4版本，相当于四个不同的产品，他们之间不是升级的关系，我们学AngularJS的1版本。目前来说，企业用的最多的还是AngularJS的1版本。

②AngularJS的四大特征

1、MVC模式（很多的前端框架受AngularJS影响，都改为MVC模式）

MVC:

Model:数据，其实就是angular变量$scope.xxx；

View:数据的呈现，Html+Directive（指令）；

Controller:操作数据，就是function，数据的增删改查；

2、双向绑定

3、依赖注入

spring的依赖注入：把一个bean注入给另外一个bean ，而另外一个bean获得这个bean的实例时不需要去new了，不需要去创建了。

通过什么方式控制器可以得到服务：通过依赖注入方式，控制器可以得到服务。

4、模块化设计

AngularJS最核心模块：ng

还提供了别的模块：ngRoute（解决路由的功能）、 ngAnimate（AngularJS可以做出很多动画效果）

还有用户自定义模块：angular.module('模块名', [])

提出一个法则：高内聚（在一个模块的功能都是一方面功能，一个模块解决问题类似，模块之内的东西是一方面的东西）低耦合（模块与模块之间少用关联和依赖）法则

如果要用ngRoute模块，则必须加载ng核心模块，ngAnimate模块同理。

但是ngAnimate和ngRoute是完全没关系的两个模块。（这叫低耦合）

ng核心模块就不用了，如果没有其他需求，只用加载ng模块自己。

这就是高内聚低耦合法则。

③AngularJS小demo-1之angularJS的表达式{{}}和启动引擎ng-app

新建文件夹demo

在demo文件夹里面新建文件demo-1.html

右键，，用EditPlus 3软件打开，也不一定要在eclipse（等开发工具）里面创建和运行。

将angular.min.js文件引入demo文件夹，拷贝复制粘贴即可

在demo-1.html文件中引入该angular.min.js文件

angularJS的表达式的形式是：嵌套的大括号{{}}

如：{{100+100}}，则会把表达式里面的内容计算出来。

{{变量}}，显示的就是变量的值

但这样还不够，还不能显示，必须在body里面加上ng-app指令

右键以浏览器方式打开文件demo-1.html，显示以下内容：

要使用angularJS就在body的节点上加上ng-app指令

如果不加，整个和angularJS相关的内容都不会被识别，指令ng-app类似angularJS的启动引擎

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

④AngularJS小demo-2之angularJS的双向绑定ng-model

在demo文件夹新建文件demo-2.html

ng-model="变量XXX"

变量XXX就是angularJS的变量$scope.XXX

model：MVC里面的M，就是数据的意思Model:数据，其实就是angular变量$scope.xxx；

module和model区分开来，module是模块的意思

右键用浏览器方式打开demo-2.html文件得到结果,方框输入什么，后面就显示什么

ng-model="name"相当于angularJS变量：$scope.name

右键用浏览器打开demo-2.html文件

无论更改哪一个输入框，变量值$scope.name都会变，这就是双向绑定

<html>
<head>
	<title>angularJS入门小DEMO-2 双向绑定</title>
	<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入姓名：<input ng-model="name">
<input ng-model="name">
{{name}}
</body>
</html>

⑤AngularJS小demo-3之angularJS的初始化指令ng-init

在文件夹demo里面新建文件demo-3.html

ng-init="name='陈大海'"，外面用双引号，里面就要用单引号。在body节点加ng-init="name='陈大海'"

ng-init="方法名()"，可以在初始化调用方法，加在body节点，页面一加载就调用该方法。

右键用浏览器方式打开文件demo-3.html

<html>
<head>
	<title>angularJS入门小DEMO-3 初始化指令</title>
	<script src="angular.min.js"></script>
</head>
<body ng-app  ng-init="name='陈大海'">
请输入姓名：<input ng-model="name">

{{name}}
</body>
</html>

⑥AngularJS小demo-4之angularJS的模块（angular.module）和控制器(模块变量名称.controller)和指令ng-controller="控制器名称"

在demo文件夹新建文件demo-4.html

右键以EditPlus 3软件方式打开

angularJS的四大特征，第四个特征就是模块化设计。整个angularJS的核心ng就是一个模块（ng模块就是angularJS的其中一个模块），像ng-app、、ng-,model、ng-init就是angularJS的一些个angularJS指令。而且自己可以定义模块。

//建立模块，构建自己的模块,[]里用来放其他模块，如果你的模块用到了其他模块，就把其他模块的名称放在方括号[]里。

var 一个模块变量名称 = angular.module("模块名称",[]);注意：模块变量名称和模块名称不一样。

这里我们是：var app = angular.module("myApp",[]);则当前的模块名称就叫myApp，app为模块变量名称，需要指定ng-app="myApp"

建立模块以后，通过模块创建控制器。通过一个controller方法来创建的。

模块变量名称.controller("控制器名称",function(依赖注入){

});注意：是模块变量名称，不是模块名称

//创建控制器

app.controller("myController",function(){

});

这时，控制器写好了，要在body节点写上body节点属于哪一个控制器。在body节点写上ng-controller="控制器名称"

body节点下的视图（V）归控制器myController（C）管，这就是M（$scope.xxxx是model数据，是angularJS的变量）VC。

继续补充创建控制层

$scope是控制层（C）和视图层（V）交换数据（M）的桥梁，function后面写$scope，是angularJS的四大特征之一的依赖注入，要用到$scope，则需要依赖注入$scope。$scope里面可以放变量也可以放方法。在相应控制器的$scope定义的方法和变量，在相应控制器的视图层就可以绑定和操作了。

app.controller("myController",function($scope){

});

在控制层获取变量和方法需要用$scope.XXXX（$scope.add = .........），但在视图层（body节点内的内容），获取方法，不用写$scope,直接add()

如果不写$scope，如add2方法，则只能在控制器内部调用add2方法，在视图层无法使用add2方法。

写完了，测试一下以上代码：

是字符串拼接形式，不是数字相加形式。用parseInt()转换成整数和parseFloat()转换成小数。

<html>
<head>
	<title>angularJS入门小DEMO-4 控制器</title>
	<script src="angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		app.controller("myController",function($scope){

			add2 = function(){
			
			}
			$scope.add = function(){
				//return x+y;不行，获取视图绑定的变量需要用到$scope
				//return $scope.x + $scope.y;是字符串拼接方式
				return parseInt($scope.x) + parseInt($scope.y);//转换成小数parseFloat()
			}
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">
第一个数：<input ng-model="x">   第二个数：<input ng-model="y">
{{add()}}
</body>
</html>

⑦AngularJS小demo-5之angularJS的事件指令ng-click="方法名称()"

在demo文件夹新建文件demo-5.html

单击事件指令ng-click="方法名称()"

<html>
<head>
	<title>angularJS入门小DEMO-5 事件指令</title>
	<script src="angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		app.controller("myController",function($scope){

			add2 = function(){
			
			}
			$scope.add = function(){
				//return x+y;不行，获取视图绑定的变量需要用到$scope
				//return $scope.x + $scope.y;是字符串拼接方式
				$scope.z = parseInt($scope.x) + parseInt($scope.y);//转换成小数parseFloat()
			}
		});
	</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>

⑧AngularJS小demo-6之angularJS的指令ng-repeat，循环数字数组

在demo文件夹新建文件demo-6.html

ng-repeat="x in list"，其中x变量可以随意取名字，list数组是$scope里面的数组变量$scope.list=[111,222,333,444,567];

<td>里面的x要打嵌套的大括号。

<html>
<head>
	<title>angularJS入门小DEMO-6 循环数字数组</title>
	<script src="angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		app.controller("myController",function($scope){
			$scope.list = [111,222,333,444,567];
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController">

<table>
<tr ng-repeat="x in list">
	<td>{{x}}</td>
</tr>
</table>
</body>
</html>

⑨AngularJS小demo-7之angularJS的指令ng-repeat，循环对象数组

在demo文件夹的新建demo-7.html文件

ng-repeat="entity in list"，同理entity可以随意取名，list是控制器$scope.list的值。

json中，一个对象用大括号{}，一个数组用中括号[]，所以对象数组就是：

[

{},

{}

]

<html>
<head>
	<title>angularJS入门小DEMO-7 循环对象数组</title>
	<script src="angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		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>name</td>
	<td>shuxue</td>
	<td>yuwen</td>
</tr>
<tr ng-repeat="entity in list">
	<td>{{entity.name}}</td>
	<td>{{entity.shuxue}}</td>
	<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

⑨AngularJS小demo-8之angularJS的内置服务，如：$http

angularJS也允许自己定义服务，但同时也提供了自己的内置的服务。什么是内置服务呢？如：$http内置服务，功能是：从后端抓取数据。这个功能相当于发送了一个HTTP请求。上一个例子，$scope.list=[{},{},{}]对象数组是写死的，但在实际中，往往都是从后端抓取的。这个例子在web工程执行。在eclipse做这个例子。

File->New->Other

Maven->Maven Project->Next

勾选：Create a simple project(skip archetype selection)->Next

选择war然后Finish

出错了：需要新建WEB-INF文件夹和web.xml文件

web.xml文件的内容是一个空壳：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">	
  
	
</web-app>

在webapp文件夹下新建文件demo-8.html，并且将angular.min.js文件拷贝到webapp文件夹下。

控制器myController要用到内置服务$http，则需要依赖注入$http

我们这里不创建（数据）库、表直接用json文件形式。在webapp文件夹下创建data.json文件。

注意：在.json文件中必须用严格的方式写，而在.js文件中可以不用严格的形式写。严不严格如何看呢？严格的json形式要求key必须是双引号引起来的。而且字符串也必须是双引号引起来的。

不严格的json形式，在.html文件中是如下形式：

$scope.list = [
                       {name:'张三',shuxue:100,yuwen:100},
                       {name:'李四',shuxue:90,yuwen:90},
                       {name:'王五',shuxue:40,yuwen:50}
           ];

而严格的json形式，是.json文件中，key值必须是双引号引起来，即name、shuxue、yuwen必须用双引号引起来。后面的value值如果是字符串也必须用双引号引起来，即张三、李四、王五需用双引号引起来。而且严格json形式最后一个{}不能有逗号。

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

data.json文件的内容为：

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

demo-8.html文件的内容为：

<html>
<head>
	<title>angularJS入门小DEMO-8 内置服务$http</title>
	<script src="angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		app.controller("myController",function($scope,$http){
			$scope.findList = function(){
				$http.get("data.json").success(
					function(response){
						$scope.list = response;
					}	
				);
			}
		});
	</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">

<table>
<tr>
	<td>name</td>
	<td>shuxue</td>
	<td>yuwen</td>
</tr>
<tr ng-repeat="entity in list">
	<td>{{entity.name}}</td>
	<td>{{entity.shuxue}}</td>
	<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

不写ng-init="findList()",写如下也可自动调用：

区别是：如果写在控制层（C）里面而不写在body视图层节点（V）里面，表示，只要用到了控制器，必然执行该方法。比如另外一个html页面也引入了这个myController控制器，findList()方法也会执行。

<html>
<head>
	<title>angularJS入门小DEMO-8 内置服务$http</title>
	<script src="angular.min.js"></script>
	<script>
		var app = angular.module("myApp",[]);
		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" >

<table>
<tr>
	<td>name</td>
	<td>shuxue</td>
	<td>yuwen</td>
</tr>
<tr ng-repeat="entity in list">
	<td>{{entity.name}}</td>
	<td>{{entity.shuxue}}</td>
	<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>

运行测试：左键点击一下项目，右键Run As ->Maven Build

tomcat7:run->Run

pom.xml文件加上tomcat插件后内容：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.demo</groupId>
  <artifactId>com.angularjs.demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  
  <build>
		<finalName>${project.artifactId}</finalName>
		
		<plugins>			
			<!-- java编译插件 -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.2</version>
				<configuration>
					<source>1.7</source>
					<target>1.7</target>
					<encoding>UTF-8</encoding>
				</configuration>
			</plugin>
 
		</plugins>
		
		<pluginManagement>
			<plugins>
			<!-- 配置Tomcat插件 -->
				<plugin>
					<groupId>org.apache.tomcat.maven</groupId>
					<artifactId>tomcat7-maven-plugin</artifactId>
					<version>2.2</version>
				</plugin>
			</plugins>
		</pluginManagement>
	</build>
  
  
</project>

浏览器输入：http://localhost:8080/com.angularjs.demo/demo-8.html

详见附件

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
电商二十三、AngularJS的简介和小demo

①AngularJS（一种前端框架）的简介AngularJS最后被Google公司收购。AngularJS1和2和3和4版本，相当于四个不同的产品，他们之间不是升级的关系，我们学AngularJS的1版本。目前来说，企业用的最多的还是AngularJS的1版本。②AngularJS的四大特征1、MVC模式（很多的前端框架受AngularJS影响，都改为MVC模式）MVC:M...
复制链接

扫一扫

专栏目录