①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