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

    
     
        {
   {x+1}}    
    

4.控制器

    
     
     
     {
   {full_name()}}
    

如果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格式的数据，并对数据进行操作。

    
     
          
       
                
            {
   {x.Name}}        
                
{
   {x.Country}}
           
      
     
    

由于js的跨域问题，这个demo不能在本地执行，跨域就是js发送http请求给除本网站外的其他域名。

一般的浏览器是不允许跨域访问的。

设想如果可以的话，用户在访问一个网站的时候，这个网站可以用js帮用户访问多个其他的网站，这样一方面会消耗用户的CPU和宽带，另一方面可以提升其他网站的访问量。

PHP中运行跨域header("Access-Control-Allow-Origin: *");

7.表格

由于有ng-repeat，所以ng中显示表格是非常方便的

下面的例子采用http部分的demo

1.使用orderBy过滤器

2.使用序号

    {
   {$index}}    {
   {x.Name}}{
   {x.Country}}

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
    
     
    
         
     is_disabled
    

9.点击事件

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

    
    
     {
   { label }}    
     
内容
    

10.表单

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

    
    
         
     
     {
   {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作用域

    item.value$scope.change=function(){    this.item.value='new value'}

函数里面的this.item.value指向html里面的item.value

14.解析html字符串

如果html字符串是angularJS里面的一个变量，需要把这个变量的Html解析出Html对象，显示到页面中

1. 在html中

2. 对变量进行转换

app.controller('ctrl', function ($scope, $http,$sce) {    $scope.html_msg=$sce.trustAsHtml($scope. html_msg)})

15.控制器

一个页面可以包含多个控制器，控制器A可以在控制器B里面，也可以在外面例如：

定义两个控制器，控制器1只会影响控制器1的内容

16.其他

• controller外面的js语句是修改不了controller中scope里面的值的。

17.总结

angularJS是一个js的库。给我印象最深的就是它的功能相当于Python的模板，也就是可以在html中写脚本，这样生成html就会变得非常灵活，例如可以插入if，for语句等，不同的是Python模板中写的是python，而且在服务器生成好html，而AngularJS是在客户端运行，语言是AngularJS的API