学习 AngularJS (二)

时间 2019-11-06

原文原文链接

继续学习(了解)AngularJS. php

看例子, 分明是一种模板语法: css

<body ng-controller='PhoneListCtrl'>
  <ul>
    <li ng-repeat='phone in phones'>
      {{phone.name}} <p> {{phone.snippet}}</p>
    </li>
  </ul>
</body>

{{...}} 里面是 angular expression, 就是简单表达式, 估计支持一些模式, 不支持一些模式. html

ng-repeat 至关于 foreach 循环. 估计是 directive, 估计还能够定制(本身写一个新的). 前端

function PhoneListCtrl($scope) {
  $scope.phones = [
    {name:'苹果', snippet:'土豪金' },
    {name:'安卓', snippet:'...'},
    ...
  ];
}

看起来控制器的形式是一个函数, 此简单例子中提供 view 一个数据 phones, 即 M-V 之间的数据绑定. git

<input ng-model="query">
<li ng-repeat="phone in phones | filter:query"> 这里用 $filter 函数来处理 ngRepeat 指令的输入. angularjs

测试语义例子: github

... it('应该xxx', function() {
       input('query').enter('苹果');   --- 在输入框 query 中输入 '苹果'
       expect( repeater('.phones li').count == 1 );   --- 指望(断言)重复器 phones 项目数为 1.
   }); web

以上主要是界面 MVC 模式例子, 测试. ajax

菜鸟学习 AngularJS 教程网页:
http://www.runoob.com/angularjs/angularjs-tutorial.html express

模块定义:
var app = angular.module('myApp', ...);
控制器:
app.controller('myCtrl', function($scope) { ... } );

AngularJS 指令: 扩展的 HTML 属性, 带有前缀 ng-. 如 ng-app, ng-init, ng-model 等.
重复 ng-repeat, 控制器 ng-controller, 控制器是 js 对象, 用 js构造函数建立.

过滤器: 使用管道字符 | 添加到表达式, 指令中, 可用于转换数据.
   如 currency 过滤器格式化数字为货币格式. filter 选择子集; orderBy 排序等.
   可多个过滤器组合.
   (本质上可看作: 对象至关于 input, 经 filter 产生 output, 多个过滤器组合可看作是一种链式调用.
     过滤器参数看作是调用的参数).

显示表格: 相似于重复 li, 在 tr 上添加 ng-repeat, 在 td 中添加 {{ }} 表达式.

ng-click 指令: <button ng-click='count = count+1'> 看起来像写了一个内嵌的 js 脚本, 或 lambda 表达式.

输入验证: 使用 ng-show 设置校验提醒 span 在校验出错状况下可见, 如 username.$dirty && $invalid.

指令 ng-include 包含 HTML 内容. 如 <div ng-include='my-list.html'></div>

AngularJS 在 DOM onload() 事件中自动开始, 查找 ng-app 指令, 加载模块, 编译.
若是 ng-app 指定的页面一小部分, 则会更快编译和执行.

剩下的参考教程的手册: http://www.runoob.com/angularjs/angularjs-reference.html

=== 下面应主要关心一下 angular 提供的有用的服务 =====

$http 用于读取 web 服务器上的数据. 如 $http.get(url);

跨域访问解决方案参考: PHP Ajax 跨域问题最佳解决方案。
(经过设置 Access-Contorl-Allow-Origin 来实现跨域)

AngularJS 的首选样式表是 Twitter Bootstrap, 其是当前最受欢迎的前端框架. (引用 bootstrap.min.css)

Service 都是单例的, 在一个应用中只会实例化一次(用 $injector 服务), 主要负责提供一个接口把特定函数
须要的方法放在一块儿.

咱们能够轻松地建立本身的service, 仅仅注册 service 便可. 最多见的常见方法:

angular.module('myapp.service', [])
  .factory('foobar_service', function() {
    var service_instance = {
      // ... 
    };
    return service_instance;
  });

建立一个 service 就是简单的返回一个函数, 这个函数返回一个对象, 在应用建立的时候(函数被调用)从而
建立出单实例的服务对象.

服务传递给 controller 的方式, 把 service 的名字做为参数传递:

app.controller('my_controller', ['$scope', 'my_service', 
  function() {$scope, my_service) {
    ...
  }]
);

(看起来像写出此 controller 依赖的模块/服务, 而后 angular 找到这些模块/服务, 而后注入 controller)
这是依赖注入的写法... 另外一个例子使用 $timeout 服务的例子:
http://developer.51cto.com/art/201311/415900_1.htm

app.controller('ServiceController', ['$scope', '$timeout', 'githubService',     
  function($scope, $timeout, githubService) { 
    // ...
  }]
);

(angular 依赖注入有规范...)

(因为 service 是单实例, 应用生命周期的, 因此) Services 能够在多个 controller 之间共享数据.

(就这么简单? 主要是依赖注入支持?)

=== Routing 路由 ===

在单页面应用中, 视图之间的跳转就显尤其重要. 须要方法来精确控制何时该呈现什么页面给用户.

方法: 把视图打散成 layout 和模板视图, 而后将这些 "碎片" 在布局模板中拼接起来.
angularjs 经过 $routeProvider 上声明 routes 来实现上面的构想.

第一步: 布局模板

<header>   
  <h1>Header</h1>  --- 这样每页面都有 header
</header> 
<div class="content">   
  <div ng-view></div>   --- ng-view 告诉 $routeProvider 在这里渲染模板
</div> 
<footer> <h5>Footer</h5> </footer>

第二步: 配置路由信息

两种方法: when, otherwise. (看起来像 switch 语句...)

(前面略) 添加路由例子:

..config(['$routeProvider', function($rp) {
    $rp.when('/', {     // url 还能够写某种匹配/key, 假设当作正则看...
      controller: 'home_page_controller',
      template: '...We are homepage...'
    })
    .otherwise({
      ... 不在主页的处理方式
     });
  }]);  --- 这么多配对的各类括号, 看着很辛苦, 要是都省略掉... ...

(看着像写了一个 when-each-case-and-otherwise 的语句...)

这里介绍数种过滤器, 可加深对 angular 过滤器功能/用途的印象:
http://developer.51cto.com/art/201310/414163_2.htm

建立自定义的过滤器:
把它配置到 module 下便可.

angular.module('custom.filters', [])
  .filter('大写化', function() {
    return ...具体大写字符串实现...
  });

使用:

<div> UpperCase is: {{ 'hello world' | 大写化 }} </div>
  --> 结果应该是 '上面函数处理的结果'

还有不少知识点未及谈到的:
* Promises(可让多个异步请求更加的有条理)
* 自定义指令; *$resource 服务; *单元测试(尤其重要, 推荐jasmine)
* end-to-end testing; *midway testing; *i18n *auth & customize xhr req
* $provider -> custom service; * forms and validation; * ie compatiable;

原文连接: http://blog.jobbole.com/50533/

=======

如今彷佛对 angluarjs 略知一二了, 先试着看看程序, 有须要再回头学.