一.简介
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。
二.特性
1.mvc模式
Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。
Model:数据,其实就是angular变量($scope.XX);
View: 数据的呈现,Html+Directive(指令);
Controller:操作数据,就是function,数据的增删改查;
2.双向绑定
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。
3.依赖注入
依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象,都可以根据形参名称实现DI.
4.模块化设计
高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ])
三.小案例
1.表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-1表达式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.双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-2双向绑定</title>
<script src="angular.min.js" ></script>
</head>
<body ng-app >
请输入姓名:<input ng-model="name" />
{{name}}
</body>
</html>
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量。
3.初始化指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-3初始化指令</title>
<script src="angular.min.js" ></script>
</head>
<body ng-app ng-init="name='张三'" >
请输入姓名:<input ng-model="name" />
{{name}}
</body>
</html>
ng-init 对初始化变量进行赋值
4.控制器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-4控制器</title>
<script src="angular.min.js" ></script>
<script>
var app=angular.module("myapp",[]);//定义模板
app.controller("mycontroller",function($scope){//定义控制器
$scope.add=function(){
return 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" />
求和为:{{add()}}
</body>
</html>
ng-controller用于指定所使用的控制器。
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.
5.事件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-5事件控制器</title>
<script src="angular.min.js" ></script>
<script>
var app=angular.module("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" />
<input type="button" value="点击求和" ng-click="add()" />
求和为:{{z}}
</body>
</html>
ng-click 是最常用的单击事件指令,点击时触发控制器的某个方法
6.循环数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-6循环数组</title>
<script src="angular.min.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycontroller",function($scope){
//定义数组
$scope.list=[11,22,33,44];
});
</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指令用于循环数组变量
7.循环对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-7循环对象数组</title>
<script src="angular.min.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycontroller",function($scope){
//定义数组
$scope.list=[
{name:'张三',age:23},
{name:'张四',age:24},
{name:'张五',age:25},
{name:'张六',age:26}
];
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller" >
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr ng-repeat="x in list" >
<td>{{x.name}} </td>
<td>{{x.age}} </td>
</tr>
</table>
</body>
</html>
8.内置服务
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入门小Demo-8内置服务</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module("myapp", []);
app.controller("mycontroller", function($scope, $http) {
$scope.findall = function() {
$http.get("ceshi.json").success(
function(response) {
$scope.list = response;
})
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller" ng-init="findall()" >
<table>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr ng-repeat="x in list">
<td>{{x.name}}</td>
<td>{{x.yuwen}}</td>
<td>{{x.shuxue}}</td>
</tr>
</table>
</body>
</html>
ng-init既可以初始化变量值.也可以加载方法
ng-init的妙用
一个页面中的select元素,如果你不绑定作用域的值的话,那么默认什么都不选中。
页面可能和作用域绑定,select会默认显示绑定的值。什么都不显示。
需求:没绑定的情况下,默认选择第一个标签。绑定的情况下,选择已绑定的值。 在ng-init中使用三目运算符。代码如下:($scope.property==undefined)?($scope.property = array[0]):0;
- 1