标签：angular mvc 框架 angularjs javascript
不易记忆和理
解。直到最近项目中要用到它，我又不得不开始学习它，并在一天天的使用中爱上了它 ... ... （今天貌似 情人节啊，谈爱字我才想起
来，大家七夕快乐哈哈）
Directives。
AngularJS指令
AngularJS
通过被称为 指令 的新属性来扩展 HTML。
ng-app 指令 ：模块名。 定义了
AngularJS 应用程序的 根元素 ，用于 初始化一个
AngularJS 应用程序 。ng-init 指令 ：在html元素中直接为
AngularJS 应用程序定义 初始值 ， 初始化应用程序数据。但 初始化一般在控制器或模块中进行。 ng-model 指令 ：绑定html元素 到应用程序数据中的模板中 。
为应用程序数据提供类型验证（number、email、required）。 为应用程序数据提供状态（invalid、dirty、touched、error）。 为 HTML 元素提供 CSS 类。 绑定 HTML 元素到 HTML 表单。
ng-repeat 指令 ：对于集合中（数组中）的每个项会 克隆一次
HTML 元素 ， 会重复一个 HTML 元素多次。（一般用于循环输出） ng-bind 指令 ： 把数据绑定到对应的
HTML元素上。（也可以直接将要输出的model放在html的双大括号内直接输出 ）
ng-if ：在html中通过判断该html元素绑定的model的值的真假来决定该html元素是否显示。
ng-show / ng-hide ：在html中通过判断该html元素中ng-show所绑定的model的值的真假，来控制该html元素是否显示。
的这个dom节点实际并不会被创建。（网上据说是这样的，时间匆忙还未来得及亲测。）
AngularJS表达式
AngularJS 使用 表达式 把数据绑定到
HTML。
AngularJS 表达式 与 JavaScript
表达式的异同：
类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。
AngularJS 表达式写在双大括号内：{{ expression }}，就可以直接输出expression的值了。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
除此之外，angularjs的数字、字符串、对象、数组都跟js一样。
<label> Click me: <input type = "checkbox" ng-model = "checked" ng-init = "checked=true" /></label><br/>
Show when checked:
<span ng-if = "checked" class = "animate-if" >
This is removed when the checkbox is unchecked.
</span> 选中单选按钮，则输出为： Click me: Show when checked: This is removed when the checkbox is unchecked.
AngularJS控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据，它是常规的 JavaScript 对象 。
ng-controller 指令 ： 定义了应用程序所在的控制控制器。
< div
ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
<br>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
ng-app 的地方，表明是angular所控制的范围。应用程序在
<div> 内运行。定义了 ng-controller="myCtrl" 的div，
表明 这个div的控制器是myCtrl。 然后 JavaScript代码的myCtrl是这个控制器的定义 。 AngularJS
使用 $scope 对象来调用控制
器。 $sco pe
是一个应用象(属于应用变量和函数)。 控制器的 $scop e （相当于作用域、控制范围）用来保存AngularJS
Model(模
型)的对象 。这段代码中 控制器在作用域中创建了两个属性 firstName 和 lastName )。 ng-model 指令绑定输入的值到控制器的属
性（firstNa me
和 lastName）。
AngularJS过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中，用于筛选、过滤、转换数据。
过滤器
描述
currency
格式化数字为货币格式。
filter
从数组项中选择一个子集。
lowercase
格式化字符串为小写。
orderBy
根据某个表达式排列数组。
uppercase
格式化字符串为大写。
< div ng-app= "myApp" ng-controller= "namesCtrl" >
< p > < input type= "text" ng-model= "test" > < /p >
< ul >
< li ng-repeat= "x
in names | filter:test | orderBy:‘country‘" >
{{ (x.name | uppercase) + ‘, ‘ + x.country }}
< /li >
< /ul >
< /div >
AngularJS服务
$http 是
AngularJS 中的一个核心服务，用于读取远程服务器的数据。（一般用来进行前后端数据交互）。 以下是存储在web服务器上的
JSON 文件）：
http://www.runoob.com/try/angularjs/data/Customers_JSON.php
[
你可以这么获取刚才那个json文件：（ $http.get(url)
是用于读取服务器数据的函数 ）
AngularJS 实例
< div ng-app= "myApp" ng-controller= "customersCtrl" > < ul > < li ng-repeat= "x in names" > {{ x.Name + ‘, ‘ + x.Country }} < /li > < /ul > < /div > < script > < /script >
版权声明：本文为博主原创文章，未经博主允许不得转载。
angular初体验（简单易学，适合新手，很新很新的手哈哈哈）
标签：angular mvc 框架 angularjs javascript
原文地址：http://blog.csdn.net/u014326381/article/details/47805389
