1.AngularJS四大特征
1.1 MVC 模式
Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。
Model:数据,其实就是angular变量($scope.XX);
View: 数据的呈现,Html+Directive(指令);
Controller:操作数据,就是function,数据的增删改查;
1.2双向绑定
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。
1.3依赖注入
依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象,都可以根据形参名称实现DI.
1.4模块化设计
高内聚低耦合法则,
1)官方提供的模块 ng、ngRoute、ngAnimate、ngTouch
2)用户自定义的模块 angular.module('模块名',[ ])
附上自己学习的网站:http://www.runoob.com/angularjs/angularjs-tutorial.html
写几个示列代码,加深自己的印象也希望可以帮助到初入AngularJS框架的学者一些帮助!
2:双向绑定
<html>
<head>
<title>双向绑定 Demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app>
请输入你的名字:<input ng-model="myname">
{{myname}},你好!
</body>
</html>
2.0:初始化指令
<html>
<head>
<title>初始化命令</title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<!--ng-app 指令告诉 AngularJS,<body> 元素是 AngularJS 应用程序 的"所有者"。-->
<!--ng-init="执行初始化的一个指令"-->
<body ng-app ng-init="myname='哈哈'">
叫大哥就告诉你<input ng-model="myname">
<br>
{{myname}},你好!<!--在这里输出属性值要用{{}}可以理解成输出语句-->
</body>
</html>
2.1:控制器
<html>
<head>
<meta charset="UTF-8">
<title>控制器</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
//创建根据name为指定的name创建一个模型
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
/*$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,
同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,
基于作用域视图在修改数据时会立刻更新
$scope,同样的$scope 发生改变时也会立刻重新渲染视图.*/
//定义控制器
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>
2.2:时间指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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">
<button ng-click="add()">运算</button>
计算结果:{{z}}
</body>
</html>
2.3:循环对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环对象数组</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myController',function($scope){
$scope.list=[
{name:'张三',shuxue:'100',yuwen:'100'},
{name:'李帅',shuxue:'10',yuwen:'100'},
{name:'小黄',shuxue:'80',yuwen:'90'}
];//定义对象数组
});
</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>
2.4:循环数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环数组</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);//创建一个模型
//定义控制器
app.controller('myController',function($scope){
$scope.list=[100,192,203,434];
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<!--这里的ng-repeat指令用于循环数组变量。-->
<tr ng-repeat="x in list">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
有不理解的可以去上面附上的学习网站进行查找!