learning angular.js(1)

Comments

最近在学angular.js，按照这个教程：通俗易懂的教程

3月3日

part1 简介
  • ng-app 即angular.js application,将会被angular管理
  • {{ }} 数据绑定的表达式。里面可以是各种东西等等，这些都会被计算出来。比如：
    • {{10 + 1}}
    • {{ 1 == 2}}
    • 对象：{{ {name: ‘David’, age: ‘20’}.name }}
    • 数组：{{ [‘David’, ‘Pam’][0] }}
part2 module和controller
  • module: 相当于main方法一样的存在，确定ng-app如何被启动，创建方法为：
    1
    var myApp = angular.module("myApp",[]);

此处有两个参数，第一个参数：app name，第二个参数，这个module依赖的其他module

  • controller: 和mvc里的controller一样，创建方法为：
    1
    2
    3
    var myController = function($scope){
      $scope.message = "hello";
    }

此处$scope会被自动传进来。它的作用是把数据附加在上面，然后在view（html）里面就可以用这些数据了，当然它也可以附加对象等等。

  • controller如何注册module：

    1
    myApp.controller("myController",myController);

  • 如何使用module驱动ng-app，比如在html里

    1
    2
    3
    4
    5
    <div ng-app = "myApp">
      <div ng-controller = "myController">
        &#123;&#123; message &#125;&#125;
      </div>
    </div>
part3 注意点controllers

一些tips：

  1. html里ng-controller的名字不要拼错（会报错的）
  2. html里属性名拼错是不回报错的，只会不显示内容，比如{{ message }}写成了{{ messag }}
  3. part2所有过程可以写成一行
    1
    2
    3
    4
    5
    var myApp = angular
        .module("myApp",[])
        .controller("myController",function($scope){
              $scope.message = "hello";
        })
part4 ng-src

使用ng-src可以保证{{…}}在被求值后再向服务器发送请求，以避免404和不必要的多次请求。

例如：将图片地址动态绑定，如果这样写

1
<img src = &#123;&#123; image.path &#125;&#125;>

会造成404报错，但图片可以显示出来。原因是当dom被解析后就会向服务器发送请求以获得有效地址，此时{{..}}的值还没有被计算出来，所以这并不是一个有效地址，所以会导致404。在{{…}}的值被计算出来后，会再次向服务器发送请求，此时已变成有效地址故图片能显示出来。

使用ng-src可以解决这个问题。写法如下：

1
<img ng-src = &#123;&#123;image.path&#125;&#125;>

此时在可以保证{{…}}在被求值后再向服务器发送请求，解决上述2问题。

3月4日

part5 数据绑定的两种方式

数据绑定：view和model同时更新。

  1. 改变model改变view：{{para}}
  2. 改变view改变model：ng-model = “para”
part6 ng-repeat

例子，js里有个数组

1
2
3
4
var employees = [
  {name:"David", age:"20"},
  {name:"Jason", age:"21"}
]

html里有个表格需要显示employee信息

1
2
3
4
<tr ng-repeat = "e in employees">
  <td>&#123;&#123;e.name&#125;&#125;</td>
  <td>&#123;&#123;e.age&#125;&#125;</td>
</tr>

part7 ng-click(event)

例子：点击button触发事件

1
2
3
$scope.clickEvent = function(){
  ...
}

1
<input type = "button" ng-click = "clickEvent">
part8 Filter-Format

格式：

1
&#123;&#123;experssion | filterName : parameter&#125;&#125;

  1. lowercase

    1
    &#123;&#123;user.name | lowercase&#125;&#125;

  2. uppercase

    1
    &#123;&#123;user.name | uppercase&#125;&#125;

  3. date

    1
    &#123;&#123;user.dateOfBirth | data : "dd/MM/yyyy"&#125;&#125;

  4. number(例子中为保留两位小数)

    1
    &#123;&#123;user.salary | number:2&#125;&#125;

  5. currency

    1
    &#123;&#123;user.salary | currency:"$"&#125;&#125;

  6. limitTo

    1
    $scope.rowLimit = 3;
1
2
3
4
<tr ng-repeat = "e in employees | limitTo : rowLimit">
  <td>&#123;&#123;e.name&#125;&#125;</td>
  <td>&#123;&#123;e.age&#125;&#125;</td>
</tr>
part9-10 Filter-sorting

格式：

1
&#123;&#123;experssion | orderBy : expression: reserve&#125;&#125;

eg.

1
ng-repeat = "e in es | orderBy : 'salary' : false"

  1. 升序：
    • false
    • +salary
  2. 降序：
    • true
    • -salary

eg.全局搜索

1
2
3
4
5
6
<input type = "test" placeholder = "search"
  ng-model = "searchText"/>

<tr ng-repeat = "e in es | filter : searchTest">
  ...
</tr>

eg.搜索特定（比如city）

1
2
3
4
5
6
<input type = "test" placeholder = "search"
  ng-model = "searchText.city"/>

<tr ng-repeat = "e in es | filter : searchTest">
  ...
</tr>

eg.精确搜索(filter后面加一个参数)

1
2
3
<tr ng-repeat = "e in es | filter : searchTest:true">
  ...
</tr>

  • copyright: please indicate the source.