文档章节

学习 AngularJS (二)

刘军兴
 刘军兴
发布于 2015/12/07 14:36
字数 1350
阅读 96
收藏 6
点赞 0
评论 0

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

© 著作权归作者所有

共有 人打赏支持
刘军兴
粉丝 54
博文 150
码字总数 226172
作品 0
昌平
[Angular Material完全攻略] Day 01 - 开始 & 简介

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

readilen ⋅ 05/21 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

【Angular】之Angular环境搭建

前言 小编最近在学习angular的内容,万事开头难,完成了开头也便成功了一半。这句话小编在这次的学习实践之旅中,深有体会,下面小编就来讲一讲,angular环境搭建之旅吧! 一、环境搭建 1.下...

m18633778874 ⋅ 05/08 ⋅ 0

[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

AngularJS 的 Material Design 风格框架 - AngularJS Material

AngularJS Material 是 AngularJS 框架的谷歌 Material Design 标准的实现。AngularJS Material 包含一组丰富的、可重用、经过充分测试并可访问的 UI 组件。 针对 Angular 2 或更高版本的实现...

匿名 ⋅ 05/15 ⋅ 0

Angular 6 服务端渲染之 udao 终章

先介绍下小朋友 udao,首先是一个开源项目,代码足够简单,其次是跟随 Angular 大小版本一起成长的项目,会定期更新所有依赖包以及兼容最新版本的写法 Github 地址也贴出来好多次了:github....

orangexc ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jsonrpc-4j代码解析

解析文件 AutoJsonRpcServiceImplExporter JsonServiceExporter AutoJsonRpcServiceImplExporter 路径:com.googlecode.jsonrpc4j.spring.AutoJsonRpcServiceImplExporter AutoJsonRpcServi......

郭恩洲_OSC博客 ⋅ 33分钟前 ⋅ 0

百度搜索

from selenium import webdriver import time brower=webdriver.Firefox() brower.get('http://www.baidu.com') input=brower.find_element_by_id('kw') input.send_keys('中南大学') time.s......

南桥北木 ⋅ 40分钟前 ⋅ 0

tomcat 日志记录器

1、日志记录器是记录消息的组件 日志记录器需要与某个servlet 容器相关联 2、Logger 接口 共定义了5种日志级别:FATAL、ERROR、WARNING、INFORMATION、DEBUGGER setVerbosity 设置级别 setC...

职业搬砖20年 ⋅ 41分钟前 ⋅ 0

Thrift RPC实战(三) Thrift序列化机制

1.Thrift基础架构 Thrift是一个客户端和服务端的架构体系,数据通过socket传输; 具有自己内部定义的传输协议规范(TProtocol)和传输数据标准(TTransports); 通过IDL脚本对传输数据的数据结构...

lemonLove ⋅ 42分钟前 ⋅ 0

网站建设就要像2018世界杯的俄罗斯队大杀四方[图]

今天心情不错,因为昨天晚上观看了世界杯比赛,尤其是对俄罗斯队的大杀四方感到十分霸气侧漏啊,因此我联想到了自己的博客网站,我的博客是去年年底上线的,一直想建设一个关于读书和读后感作...

原创小博客 ⋅ 50分钟前 ⋅ 0

Greenplum 三节点安装教程(非root用户)

Greenplum 三节点安装教程(非root用户) 环境准备 安装vmware,装三台centos 虚拟机设置: 主机名 IP 内存 硬盘 node1 Xxx1 2G 80G node2 Xxx2 2G 80G node3 Xxx3 2G 80G CSDN下载greenplum...

仔仔1993 ⋅ 51分钟前 ⋅ 0

linux 信号机制

signal(SIGPIPE, SIG_IGN); TCP是全双工的信道, 可以看作两条单工信道, TCP连接两端的两个端点各负责一条. 当对端调用close时, 虽然本意是关闭整个两条信道, 但本端只是收到FIN包. 按照TCP协...

xxdd ⋅ 52分钟前 ⋅ 0

SpringWind

环境搭建和系统部署

颖伙虫 ⋅ 今天 ⋅ 0

vim命令用法

第五章 vim命令 vim和vi几乎是一样的,唯一的区别就是当编辑一个文本时,使用vi不会显示颜色,而使用vim会显示颜色。 vim有三个模式:一般模式,编辑模式,命令模式。 系统最小化安装时没有安...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部