本篇转载于:http://blog.csdn.net/evankaka
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下载地址：https://angularjs.org/
一、AngularJs简介
image.png
AngularJS是由谷歌开发出来的，为了克服HTML在构建上的不足而设计的。AngularJS通常使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
（1）使用双大括号{{}}语法进行数据绑定；
（2）使用DOM控制结构来实现迭代或隐藏DOM片段；
（3）支持表单和表单验证；
（4）能将逻辑代码关联到相关的DOM元素上；
（5）能将HTML分组成可复用的组件。
AngularJS可以认为是一个MVC模式的框架。（Model-View-Contorller）M代码scope，V代表Html展示元素，C代表Controller，也可以看成是一个MVVW模式的框架（Model-View-ViewModel），其中M代表scope中的数据，V代表Html展示元素，VW代表scope。
二、特性
1.数据绑定（ng-model）
2.模板（templete）
3.MVC
4.依赖注入（Dependency Injection，即DI）
AngularJS 拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发、理解和测试应用。
5.Directives（指令）
用来装饰元素或者操作DOM属性。
三、实例
（1）入门实例一
<!DOCTYPE html>
<html lang-="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>AngularJS入门学习</tilte>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<p><input type="text" ng-model="inputValue">请输入内容</p>
<h1>您输入的内容是：{{inputValue}}</h1>
</body>
</html>
结果：
20160406204651506.gif
（2）入门实例2 （带Controller）
<!DOCTYPE html>
<html lang-="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>AngularJS入门学习</tilte>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body ng-controller="myController">
<p><input type="text" ng-model="inputValue">请输入内容</p>
<h1>您输入的内容是：{{inputValue}}</h1>
</body>
<script type="text/javascript">
var app=angular.module('myApp',[]); //获得整个angularJS影响的html元素。
//控制器
app.controller('myController',function($scope){
$scope.inputValue="林炳文Evankaka"；
})；
</script>
</html>
注意，ng-app="myApp",这个不能少，还有ng-controller=""也不能少,这两个分别批明了AngularJS有效的范围和Controller层有效的范围。
效果如下：
image.png
myCOntroller———控制器方法的名字和<body>标签里面的ngController指令的值相匹配。
input的数据此时与注入到我们控制器函数的作用域（$scope）相关联。当应用启动之后，会有一个根作用域被创建出来，而控制器的作用域是根作用域的一个典型后继。这个控制器的作用域对所有<body ng-controller="myController">标记内部的数据绑定有效。
（3）入门实例3
<!DOCTYPE html>
<html lang-="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>AngularJS入门学习</tilte>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body ng-controller="myController">
<button ng-click="myClick()"></button>
<h1 ng-if = "!flag"> 我是林炳文Evankaka</h1>
</body>
<script type="text/javascript">
var app=angular.module('myApp',[]); //获得整个angularJS影响的html元素。
//控制器
app.controller('myController',function($scope){
$scope.flag=false;
$scope.myClick=function(){
console.log($scope.flag);
$scope.flag=!$scope.flag;
}
})；
</script>
</html>
20160406210943327.gif
网友评论