学习 AngularJS (二)
学习 AngularJS (二)
刘军兴 发表于2年前
学习 AngularJS (二)
  • 发表于 2年前
  • 阅读 88
  • 收藏 6
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

继续学习(了解)AngularJS.

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

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

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

ng-repeat 相当于 foreach 循环. 估计是 directive, 估计还可以定制(自己写一个新的).

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

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

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

测试语义例子:

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

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

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

模块定义:
    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 略知一二了, 先试着看看程序, 有需要再回头学.

共有 人打赏支持
粉丝 55
博文 141
码字总数 222144
×
刘军兴
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: