AngularJs自学笔记（2）

AngularJS 指令 AngularJS 指令是以 ng 作为前缀的 HTML 属性 div ng-app = "" ng-init = "firstName='John'" p 姓名为 span ng-bind = "firstName" / span / p / div 比如上面的ng-app ng-bind ng-init都是AngularJS 指令 ng-app ng-bind 用来将 span 的inn

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性

<code><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"firstName='John'"</span>>

<span>p</span>>姓名为 <span>span</span> <span>ng-bind</span>=<span>"firstName"</span>><span><span>span</span>></span><span><span>p</span>></span>

<span><span>div</span>></span></code>

比如上面的ng-app ng-bind ng-init都是AngularJS 指令

ng-app

ng-bind用来将<span></span> 的innerHTML的数值进行绑定，让span内的value值变为firstName变量中的值
这里需要注意的是用ng-bind与用表达式来进行数据绑定有一定的区别，例如：

<code><span><span>p</span> <span>ng-bind</span>=<span>"firstName"</span>></span><span><span>p</span>></span>
<span>p</span>><span>{{ <span>firstName</span> }}</span><span><span><span>p</span>></span></span></code>

ng-bind的方式是当AngularJS对数据渲染完毕后才会显示的，而表达式的方式就算AngularJS没有对这个变量渲染完毕也是会有可能显示的（就是说会直接在页面上显示字符串“{{ firstName }}”）

ng-init用来初始化AngularJS程序的变量（很少用）

<code><input>type=<span>"number"</span> ng-model=<span>"quantity"</span>></code>

ng-model 用来将input中的value的值与AngularJS中的变量进行绑定，这里是与变量quantity进行了绑定

ng-repeat
例如：

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"names=['Jani','Hege','Kai']"</span>></span>
  <span>p</span>>使用 ng-repeat 来循环数组<span><span>p</span>></span>
  <span>ul</span>>
    <span>li</span> <span>ng-repeat</span>=<span>"x in names"</span>>
      <span>{{ <span>x</span> }}</span><span>
    <span><span>li</span>></span>
  <span><span>ul</span>></span>
<span>div</span>></span></code>

结果如下：

ng-controller 用来创建一个控制器，具体使用参照下面写的控制器部分

还有许多ng指令，后续学到可以在这里补充

---

AngularJS 表达式

AngularJS 表达式写在双大括号内，其表达式的内容和形式与Javascript是一致的，它们可以包含文字、运算符和变量

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"quantity=1;cost=5"</span>></span>

<span>p</span>>总价： <span>{{ <span>quantity</span> * <span>cost</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span>

<span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"firstName='John';lastName='Doe'"</span>></span>

<span>p</span>>姓名： <span>{{ <span>firstName</span> + <span>" "</span> + <span>lastName</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span>
</span></code>

结果如下：

---

AngularJS对象

其和Javascript创建对象是一样的

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-init</span>=<span>"person={firstName:'John',lastName:'Doe'}"</span>></span>

<span>p</span>>姓为 <span>{{ <span>person.lastName</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span></span></code>

上面这些东西都是一些基本的内容，基本上与JS差不多，当然现在可能不够全面，后续如果有新的内容再回来补充。

AngularJS控制器

首先，先来一段代码

<code><span><span>div</span> <span>ng-app</span>=<span>"main"</span> <span>ng-controller</span>=<span>"personController"</span>></span>

名： <span>input</span> <span>type</span>=<span>"text"</span> <span>ng-model</span>=<span>"person.firstName"</span>><span>br</span>>
姓： <span>input</span> <span>type</span>=<span>"text"</span> <span>ng-model</span>=<span>"person.lastName"</span>><span>br</span>>
<span>br</span>>
姓名： <span>{{<span>person.firstName</span> + <span>" "</span> + <span>person.lastName</span>}}</span><span>

<span><span>div</span>></span>

<span>script</span>></span><span>
<span><span>function</span> <span>personController</span><span>($scope)</span> {</span>
    $scope.person = {
        firstName: <span>"John"</span>,
        lastName: <span>"Doe"</span>
    };
}
</span><span><span>script</span>></span></code>

运行结果如下：

这里直接说说我对这个控制器的理解吧，其实他就是一个简单的类的创建，对应着JAVA来看，ng-controller="personController" 就对应着JAVA中创建了一个名字为personController的类，而下面以这个类的名字来命名的一个函数就是这个类对应的构造函数，$scope可以是看做JAVA中的this，而$scope.person = {....} 则是为这个personController添加了一个名为person的属性，这里，这个person属性是一个对象属性，其也有两个属性firstName和lastName而两个input域里面的值也对其person属性中的这两个属性进行了绑定，其实换做Java代码可以看成这样

<code><span>class</span> personController{

    Person person;

    personController(){
        <span>this</span>.person.firstName = <span>"John"</span>;
        <span>this</span>.person.lastName = <span>"Doe"</span>;
    }
}

<span>class</span> Person {

    <span>String</span> firstName;

    <span>String</span> lastName;
}</code>

当然，函数也是可以作为对象的属性的

<code><span>script</span>><span>
<span><span>function</span> <span>personController</span><span>($scope)</span> {</span>
    $scope.person = {
        firstName: <span>"John"</span>,
        lastName: <span>"Doe"</span>,
        fullName: <span><span>function</span><span>()</span> {</span>
            <span>var</span> x;
            x = $scope.person;
            <span>return</span> x.firstName + <span>" "</span> + x.lastName;
        }
    };
}
</span><span><span>script</span>></span></code>

这种就相当于

<code><span>class</span> personController{

    Person person;

    personController(){
        <span>this</span>.person.firstName = <span>"John"</span>;
        <span>this</span>.person.lastName = <span>"Doe"</span>;
    }
}

<span>class</span> Person {

    <span>String</span> firstName;

    <span>String</span> lastName;

    private <span>String</span> fullName(){
        <span>this</span>.firstName + <span>" "</span> + <span>this</span>.lastName;
    }
}</code>

控制器也是可以有方法的

<code><span>script</span>><span>
<span><span>function</span> <span>personController</span><span>($scope)</span> {</span>
    $scope.person = {
        firstName: <span>"John"</span>,
        lastName: <span>"Doe"</span>,
     };
     $scope.fullName = <span><span>function</span><span>()</span> {</span>
         <span>var</span> x;
         x = $scope.person; 
         <span>return</span> x.firstName + <span>" "</span> + x.lastName;
     };
}
</span><span><span>script</span>></span></code>

这里就相当于

<code><span>class</span> personController{

    Person person;

    personController(){
        <span>this</span>.person.firstName = <span>"John"</span>;
        <span>this</span>.person.lastName = <span>"Doe"</span>;
    }

    private <span>String</span> fullName(){
        <span>return</span> <span>this</span>.person.firstName + <span>" "</span> + <span>this</span>.person.lasName;
    }
}

<span>class</span> Person {

    <span>String</span> firstName;

    <span>String</span> lastName;

}</code>

所以目前简单看起来，AngularJs的控制器可以把它当做一个Java的类来看待

AngularJS过滤器

AngularJS过滤器可以用来转换数据，其可以通过一个”|”管道字符添加到表达式或者指令的后面来将数据进行转换，例如：

<code><span><span>div</span>  <span>ng-init</span>=<span>"firstName='John';lastName='Doe'"</span>></span>
<span>p</span>>姓名： <span>{{ (<span>firstName</span>  + <span>" "</span> + <span>lastName</span>) | <span>uppercase</span> }}</span><span><span><span>p</span>></span>
<span><span>div</span>></span></span></code>

输出结果如下：

<code>姓名： JOHN DOE</code>

可以看到当添加uppercase过滤器之后，输出的字符串都被大写了

还有几种简单的过滤器

lowercase 过滤器 就是将表达式的值变为小写

currency 过滤器 将数值转化为金钱

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-controller</span>=<span>"costController"</span>></span>

数量：<span>input</span> <span>type</span>=<span>"number"</span> <span>ng-model</span>=<span>"quantity"</span>>
价格：<span>input</span> <span>type</span>=<span>"number"</span> <span>ng-model</span>=<span>"price"</span>>

<span>p</span>>总价 = <span>{{ (<span>quantity</span> * <span>price</span>) | <span>currency</span> }}</span><span><span><span>p</span>></span>

<span><span>div</span>></span></span></code>

结果：

orderBy 过滤器

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-controller</span>=<span>"namesController"</span>></span>
<span>p</span>>循环对象：<span><span>p</span>></span>
<span>ul</span>>
  <span>li</span> <span>ng-repeat</span>=<span>"x in names | orderBy:'country'"</span>>
    <span>{{ <span>x.name</span> + ', ' + <span>x.country</span> }}</span><span>
  <span><span>li</span>></span>
<span><span>ul</span>></span>
<span>div</span>></span></code>

结果：

<code>循环对象:
Kai, Denmark
Jani, Norway
Hege, Sweden</code>

这个过滤器对repeat指令中的数组进行了排序，并且是以country字段为依据进行排序，可以看到输出的结果中Country字段的值就是按由小到大排列而成的

filter 过滤器
其可以过滤出含有输入的字段的值的条目

<code><span><span>div</span> <span>ng-app</span>=<span>""</span> <span>ng-controller</span>=<span>"namesController"</span>></span>

<span>p</span>>输入过滤：<span><span>p</span>></span>
<span>p</span>><span>input</span> <span>type</span>=<span>"text"</span> <span>ng-model</span>=<span>"name"</span>><span><span>p</span>></span>
<span>ul</span>>
  <span>li</span> <span>ng-repeat</span>=<span>"x in names | filter:name | orderBy:'country'"</span>>
    <span>{{ (<span>x.name</span> | <span>uppercase</span>) + ', ' + <span>x.country</span> }}</span><span>
  <span><span>li</span>></span>
<span><span>ul</span>></span>
<span><span>div</span>></span></span></code>

当我什么都没有输入的时候，输出结果如下

当我输入g之后，输出结果如下

可以看到，输出的结果中就只有那些含有输入字符串的项目了
从这个例子中也可以看出过滤器是可以连续使用的