AngularJS的使用方法

1.第一个ng demo

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.表达式

{{ name+' lu' }}
表达式放在两个大括号中，name是变量
ng主要有数字，字符串，对象和数组四种变量
操作和定义的方式和js的方法一样

3.指令

ng-app
ng-module
ng-init
ng-bind
参考上面的demo说明
ng-repeat用于克隆html元素，类似for

4.控制器

由于js的跨域问题，这个demo不能在本地执行，跨域就是js发送http请求给除本网站外的其他域名。
一般的浏览器是不允许跨域访问的。
设想如果可以的话，用户在访问一个网站的时候，这个网站可以用js帮用户访问多个其他的网站，这样一方面会消耗用户的CPU和宽带，另一方面可以提升其他网站的访问量。
PHP中运行跨域header("Access-Control-Allow-Origin: *");
Http官方文档

7.表格

由于有ng-repeat，所以ng中显示表格是非常方便的
下面的例子采用http部分的demo

1.使用orderBy过滤器

2.使用序号

3.使用even odd

{{$index}}

{{$index}}

如果为奇数，显示蓝色，如果为偶数显示红色。从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变量

is_show

is_hide

9.点击事件

demo：点击按钮，内容会显示或隐藏，按钮的文字也会相应改变

内容

10.表单

定义一个user对象，然后把表单的内容赋值到对象中

11.API

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

用法：

$scope.x2 = angular.isString($scope.x1);

12.包含页面

a.html

include_A.html

hello

如果在本地调试，两个html在同一个目录下就可以了。
如果在服务器调试：
test.html:

如果通过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中
对变量进行转换


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）

posted @ 2015-10-22 19:12 Xjng 阅读(1204) 评论(0) 收藏举报

刷新页面返回顶部

Kevin Lu