1.第一个ng demo
<div ng-app="" ng-init="name='Kevin'">
<input ng-model="name">
<input ng-model="name1">
<label ng-bind="name1"></label>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
ng-app=""声明该div是一个ng的app
ng-model="name"声明这个input的值赋给name这个变量名
ng-bind="name1"声明这个lable的值绑定到name这个变量名，label的值会随着name变量的改变而改变
ng-init="name='Kevin';name2='Kevin2'"声明出事变量name='Kevin'
2.表达式
<label>{{ name+' lu' }}</label>
表达式放在两个大括号中，name是变量
ng主要有数字，字符串，对象和数组四种变量
操作和定义的方式和js的方法一样
3.指令
ng-app
ng-module
ng-init
ng-bind
参考上面的demo说明
ng-repeat用于克隆html元素，类似for
<div ng-app="" ng-init="list=[1,2,3,4]">
<table border="1">
<tr><td ng-repeat=" x in list">
{{x+1}}
</td></tr>
</table>
</div>
4.控制器
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<label ng-bind="name"></label>
<label >{{full_name()}}</label>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope){
$scope.name='Kevin';
$scope.full_name=function(){
$scope.name+' LU'
})
})
如果ng-app非空，一定要在script中执行语句var app = angular.module('myApp', []);
ng-controller="myCtrl"声明一个控制器
控制器定义了name变量的初始值为Kevin
控制器里面也可以定义function
5.过滤器
过滤器用于转换数据
-
currency:格式化数字为货币格式。
-
filter:从数组项中选择一个子集。
-
lowercase：格式化字符串为小写。
-
orderBy：根据某个表达式排列数组。
-
uppercase：格式化字符串为大写。
用法{{x+1|currency}}
6.Http
http模块用于发起http请求，获取json格式的数据，并对数据进行操作。
<div ng-app="myapp" ng-controller="myCtrl">
<table border="1">
<tr ng-repeat=" x in names">
<td>
{{x.Name}}
</td>
<td>{{x.Country}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myapp', [])
app.controller('myCtrl', function ($scope, $http) {
$http.get('http://www.runoob.com/try/angularjs/data/Customers_JSON.php')
.success(function (response) {
$scope.names = response.records;
})
}
)
</script>
由于js的跨域问题，这个demo不能在本地执行，跨域就是js发送http请求给除本网站外的其他域名。
一般的浏览器是不允许跨域访问的。
设想如果可以的话，用户在访问一个网站的时候，这个网站可以用js帮用户访问多个其他的网站，这样一方面会消耗用户的CPU和宽带，另一方面可以提升其他网站的访问量。
PHP中运行跨域header("Access-Control-Allow-Origin: *");
Http官方文档
7.表格
由于有ng-repeat，所以ng中显示表格是非常方便的
下面的例子采用http部分的demo
1.使用orderBy过滤器
<tr ng-repeat=" x in names|orderBy :'Country'">
2.使用序号
<td>
{{$index}}
</td>
<td>
{{x.Name}}
</td>
<td>{{x.Country}}</td>
3.使用even odd
<td ng-if="$odd" style="background-color:blue">
{{$index}}
</td>
<td ng-if="$even" style="background-color:red">
{{$index}}
</td>
如果为奇数，显示蓝色，如果为偶数显示红色。从0开始。
8.HTML DOM
ng-disabled='is_disabled'将改标签的disabled属性绑定到is_disabled变量
ng-show='is_show'将改标签的show属性绑定到is_show变量
ng-hide='is_hide'将改标签的show属性绑定到is_hide变量
<div ng-app="">
<input type="checkbox" ng-model="is_show">
<p ng-show="is_show">is_show</p>
<br>
<input type="checkbox" ng-model="is_hide">
<p ng-hide="is_hide">is_hide</p>
<br>
<input type="checkbox" ng-model="is_disabled">
<button ng-disabled="is_disabled">is_disabled</button>
</div>
9.点击事件
demo：点击按钮，内容会显示或隐藏，按钮的文字也会相应改变
<div ng-app="myapp" ng-controller="myctrl" ng-init="is_show=true;label='隐藏'">
<button ng-click="toggle()">{{ label }}</button>
<p ng-show="is_show">内容</p>
</div>
<script>
var app = angular.module('myapp', [])
app.controller('myctrl', function ($scope) {
$scope.toggle = function () {
$scope.is_show = !$scope.is_show
$scope.label=$scope.is_show?'隐藏':'显示'
}
})
</script>
10.表单
定义一个user对象，然后把表单的内容赋值到对象中
<form ng-app="" ng-init="user={}">
<input ng-model="user.name">
<input ng-model="user.age">
<label >{{user}}</label>
</form>
11.API
- angular.lowercase() 转换字符串为小写
- angular.uppercase() 转换字符串为大写
- angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
- angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
用法：
$scope.x2 = angular.isString($scope.x1);
12.包含页面
a.html
<body ng-app="">
<div ng-include="'include_A.html'"></div>
</body>
include_A.html
<p>hello</P>
如果在本地调试，两个html在同一个目录下就可以了。
如果在服务器调试：
test.html:
<body ng-app="">
<div ng-include="'static/include/include_A.html'"></div>
</body>
如果通过URLhttp://www.baidu.com/test 访问到test.html
那么就需要通过URLhttp://www.baidu.com/static/include/include_A.html访问到include_a.html
记住ng-include里面必须包含引号
13.this
在ng-click中，this表示当前的scope作用域
<tr ng-repreat=' item in list'>
<button ng-click=(change())>item.value</button>
$scope.change=function(){
this.item.value='new value'
}
函数里面的this.item.value指向html里面的item.value
14.解析html字符串
如果html字符串是angularJS里面的一个变量，需要把这个变量的Html解析出Html对象，显示到页面中
-
在html中
<span ng-bind-html="html_msg"></span> -
对变量进行转换
app.controller('ctrl', function ($scope, $http,$sce) {
$scope.html_msg=$sce.trustAsHtml($scope. html_msg)
})
15.控制器
一个页面可以包含多个控制器，控制器A可以在控制器B里面，也可以在外面例如：
<div ng-include="'include_item.html'" ng-controller="ctrl1">
</div>
<div ng-controller="ctrl2">
<input value="{{test2}}" type="text">
<div ng-include="'include_item.html'" ng-controller="ctrl1">
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', [])
app.controller('ctrl1', function ($scope) {
$scope.test1= 'test1 ctrl1'
$scope.test2= 'test2 ctrl1'
})
app.controller('ctrl2', function ($scope) {
$scope.test1= 'test ctrl2'
$scope.test2 = 'ctrl2 ctrl2'
})
</script>
定义两个控制器，控制器1只会影响控制器1的内容
16.其他
- controller外面的js语句是修改不了controller中scope里面的值的。
17.总结
angularJS是一个js的库。给我印象最深的就是它的功能相当于Python的模板，也就是可以在html中写脚本，这样生成html就会变得非常灵活，例如可以插入if，for语句等，不同的是Python模板中写的是python，而且在服务器生成好html，而AngularJS是在客户端运行，语言是AngularJS的API