AngularJs自学笔记（2）

原创: 2016-06-07 15:33:09 699浏览

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 属性

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

<p ng-bind="firstName">p>
<p>{{ firstName }}p>

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

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

type="number" ng-model="quantity">

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

ng-repeat
例如：

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

结果如下：

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

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

AngularJS 表达式

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

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

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

div>

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

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

div>

结果如下：

AngularJS对象

其和Javascript创建对象是一样的

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

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

div>

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

AngularJS控制器

首先，先来一段代码

<div ng-app="main" ng-controller="personController">

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

div>

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

运行结果如下：

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

class personController{

    Person person;

    personController(){
        this.person.firstName = "John";
        this.person.lastName = "Doe";
    }
}

class Person {

    String firstName;

    String lastName;
}

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

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

这种就相当于

class personController{

    Person person;

    personController(){
        this.person.firstName = "John";
        this.person.lastName = "Doe";
    }
}

class Person {

    String firstName;

    String lastName;

    private String fullName(){
        this.firstName + " " + this.lastName;
    }
}

控制器也是可以有方法的

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

这里就相当于

class personController{

    Person person;

    personController(){
        this.person.firstName = "John";
        this.person.lastName = "Doe";
    }

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

class Person {

    String firstName;

    String lastName;

}

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

AngularJS过滤器

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

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

输出结果如下：

姓名： JOHN DOE

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

还有几种简单的过滤器

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

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

<div ng-app="" ng-controller="costController">

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

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

div>

结果：

orderBy 过滤器

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

结果：

循环对象:
Kai, Denmark
Jani, Norway
Hege, Sweden

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

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

<div ng-app="" ng-controller="namesController">

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