您的位置：首页 > Web前端 > AngularJS

AngularJS的使用方法

2015-10-22 19:12 555 查看

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>

如果通过URL
http://www.baidu.com/test
访问到test.html

那么就需要通过URL
http://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>


对变量进行转换

```javascript

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

参考文档

参考手册（API）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航