文档章节

学习 AngularJS (二)

刘军兴
 刘军兴
发布于 2015/12/07 14:36
字数 1350
阅读 106
收藏 6

继续学习(了解)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 略知一二了, 先试着看看程序, 有需要再回头学.

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 56
博文 189
码字总数 231687
作品 0
昌平
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 你一口我一口多咬一口是小狗

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文 :分享Roy Orbison的单曲《She's a Mystery to Me》 《She's a Mystery to Me》- Roy Orbison 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
69
4
Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
12
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
21
0

中国龙-扬科
昨天
4
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部