标签分类
当前位置:首页 > > Web前端电子书网盘下载
Angular5高级编程 Angular5高级编程
sheepych

sheepych 提供上传

资源
13
粉丝
14
喜欢
61
评论
3

    Angular5高级编程 PDF 影印第2版

    Web前端电子书
    • 发布时间:

    给大家带来的一篇关于Web前端相关的电子书资源,介绍了关于Angular5、高级编程方面的内容,本书是由清华大学出版社出版,格式为PDF,资源大小508.1 MB,Adam编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:7.4

  • Angular5高级编程 PDF 下载
  • 下载地址:https://pan.baidu.com/s/1HA8Jr0cU2pGZmICeTkUewg
  • 分享码:v8p5
  • Angular5高级编程

    Angular5高级编程电子书封面

    读者评价

    有一类书事无巨细,但从头到尾翻一遍你还是啥都不知道。还有一类书本身写来就不是用来看的,而是用来查的。不幸也是万幸,这本书这两类都占。跟着官方文档写的时候放一本这个在身边,就算一页都没翻,但瞬间安心了好多,觉得自己啥都会

    唉,除了前两章是angular5,其他都是angular4。。既然这样编排,干嘛用5来吸引人呢。书的内容一般般。但是就光内容和介绍不符,就把书扔那没看了,心里受不了这种销售。

    书中有太多重复的描述和代码。光是叫你使用数中指定的版本在115页前都至少出现了3次。还有就是话语重复罗嗦。7.1准备项目里说要找个地方输入ng new SprotsStroe,7.1.1还是叫准备项目,还是说要找个地方输入ng new SprotsStroe。还有就是,完全按照说上的版本安装软件,敲的代码,程序很多都执行不了。

    内容介绍

    《Angular 5 高级编程(第2版)》内容已经全面更新到*版Angular 5!本书将告知读者如何充分利用领先的一体化框架 Angular 5来构建动态的JavaScript应用程序。畅销书作家Adam Freeman首先介绍了MVC模式及其 优势,然后展示了如何在项目中使用Angular框架,从*基本的功能开始,逐步建立*和复 杂的功能,深入理解开发Angular应用程序所需的知识。《Angular 5 高级编程(第2版)》对每个主题的诠释都非常清晰且简洁凝练,并且包含大量能够助你学以致用的细节,以 务实的视角深入讨论Angular框架*重要的一些功能,每章都包括常见问题并详细讲解如何避免 这些问题发生。 《Angular 5 高级编程(第2版)》特色: ● 如何在架构层面深入理解MVC模式 ● 如何使用Angular 5创建丰富而动态的Web应用程序客户端 ● 如何扩展和定制Angular 5 ● 如何测试Angular 5项目

    内容节选

    简述Angular 5 快速入门

     

    一、概述

    尽管被称为Angular5,实际上它只是这个诞生于2012年的前端框架的的第四个版本:


    angular history

    看起来差不多半年就发布一个新版本,不过实际上从重写的版本2开始,开发接口与核心思想就稳定下来了,并基本保持着与前序版本的兼容性。

    在5这个新的版本中,Angular团队将改进重点放在以下特性方面:

    1. 更易于构建渐进式Web应用 —— __P__rogressive __W__eb __A__pp
    2. 使用构建优化器剔除无用代码,以获得更小的应用、更快的网络加载时间
    3. 使物化设计组件兼容服务端渲染

    PWA是Google提出的一个标准,旨在让Web应用在移动终端上获得媲美原生应用的用户体验。一个PWA应用主要利用Service Worker和浏览器缓存来提省交互体验,它不仅可以直接部署在手机桌面,而且可以离线应用:

    pwa

    二、引入angular环境

    Angular推荐使用TypeScript来开发应用,这要求使用一个在线编译器(JIT)实时编译代码,或者在开发期采用预编译器(AOT)提前编译代码。

    为了避免这个繁琐的过程影响对Angular框架本质的思考,我们将这些必需品进行了必要的配置和打包,以便适应在线编写和实验。现在只需要引入一个库a5-loader就可以了。

    下图是库的构成示意,其中的蓝色部件均打包在库中:

    a5-loader

    你可能注意到Angular框架并不是蓝色的。的确,我们没有把它打包在a5-loader中,而是让模块加载器(SystemJS)根据应用的需要自动加载。这么做的目的,是为了让应用代码,和后续课程中采用的后端构建方法保持一致。

    如果你对这个库有兴趣,可以访问github上的 http://github.com/hubwiz/a5-loader 仓库。

    三、创建Angular组件

    Angular是面向组件的前端开发框架。如果你从事过C/S图形化应用的开发,应该知道组件这个词的含义。基本上,组件代表着一些具有图形界面,并且具有内在逻辑能力的程序单元。下图列出了三种用于实现乒乓切换的组件:

    component sample

    组件提供了很好的复用性,在一堆组件的基础上,我们使用简单的胶水代码就可以实现相当复杂的交互功能。

    现在让我们来创建Angular组件,代码相当简单:

    @Component({ selector: "ez-app", template: `<h1>Hello,angular5</h1>`})class EzComp{}

    在Angular框架中,组件就是指一个应用了Component装饰器的类。Component装饰器的作用,就是为被装饰的类附加元数据信息:

    annotations

    Angular框架对应用进行编译引导时,将使用这些元数据构造视图。其中的两个元数据非常重要:

    1. selector:组件宿主元素的CSS选择符,声明了组件在DOM树中的渲染锚点
    2. template:组件的模板,框架将以这个模板为蓝图构建视图

    四、创建Angular模块

    Angular框架的核心是组件化,同时它的设计目标是适应大型应用的开发。因此,在应用开发中引入了模块(NgModule)的概念来组织不同的组件(及服务),一个Angular应用至少需要创建一个模块。

    为了区别于JavaScript语言本身的模块概念,在本课程中将使用NG模块来表示一个Angular模块。

    类似于组件,NG模块就是一个应用了NgModule装饰器的类。例如,下面的代码创建了一个NG模块EzModule:

    @NgModule({
     imports: [ BrowserModule ],
     declarations: [ EzComp ],
     bootstrap: [ EzComp ]
    })
    class EzModule{}

    同样,NgModule装饰器用来给被装饰的类附加模块元数据,可以查看被装饰类的__annotations__属性来观察这一结果:

    ngmodule annotations

    NgModule装饰器声明了一些关键的元数据,来通知框架需要载入哪些NG模块、编译哪些组件以及启动引导哪些组件:

    1. imports: 需要引入的外部NG模块
    2. declarations:本模块创建的组件,加入到这个元数据中的组件才会被编译
    3. bootstrap:声明启动引导哪个组件,必须是编译过的组件

    需要强调的是,bootstrap元数据声明的组件必须是编译过的组件:它要么属于使用imports元数据引入的外部NG模块,要么是已经在declarations元数据中声明的本地组件。

    NG模块BrowserModule定义于包@angular/platform-browser,它是Angular跨平台战略的重要组成部分。BrowserModule封装了浏览器平台下的核心功能实现,与之对应的其他平台实现还有:

    1. ServerModule:服务端实现
    2. WorkerAppModule:WebWorker实现

    通常情况下开发Web应用时,我们都需要引入BrowserModule这一NG模块。

    五、启动Angular应用

    前面课程中,我们已经创建了一个组件和一个NG模块,不过似乎只是定义了一堆的元数据,几乎没有写太多有价值的代码。
    但这就是Angular框架的一个特点:声明式开发。这些元数据是用来向框架声明如何引导启动应用程序的重要信息。

    启动代码很简单,引入platformBrowserDynamic()工厂函数、创建平台实例、启动指定模块:

    import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
    const pref = platformBrowserDynamic()
    pref.bootstrapModule(EzModule)

    √ 平台对象:PlatformRef

    platformBrowserDynamic()函数返回一个PlatformRef对象(Angular对平台的抽象),这个函数最重要的作用,在于其内部创建了一个即时(__J__ust __I__n __T__ime)编译器,可以在线实时编译NG模块和组件,这也是它被称为动态(Dynamic)的原因:

    dynamic bootstrap

    平台对象的bootstrapModule()方法用来启动指定的NG模块,启动的绝大部分工作,在于利用JIT编译器编译NG模块和组件,当这些编译工作都完成后,则根据启动模块的bootstrap元信息,渲染指定的组件。

    六、为什么这么复杂?

    可能你已经感觉有点复杂了:只是为了写一个Hello,World,就要写这么多代码。

    事实上这些复杂性是随着Angular的发展逐步引入的,从好的一方面说,是提供给开发者的可选项逐渐增多了,适用场景变多了。

    比如,在Angular2正式版之前,都没有NG模块的概念,你只要写一个组件就可以直接启动应用了。Angular团队的预期应用场景是大规模前端应用开发,因此显式的NG模块声明要求也是容易理解的。不过即使是小型的应用,由于可以只使用一个NG模块,因此这一点的复杂性增加倒也不多,只是增加了学习和运用这个新概念的成本。

    另一个显而易见的复杂性,在于多平台战略的引入。Angular希望让应用可以跨越浏览器、服务器等多个平台(基本)直接运行。因此免不了抽象一个中间层出来,我们需要在应用中显式地选择相应的平台实现模块:

    multiple platform

    第三个复杂性来源于对预编译(AOT:Ahead Of Time)的支持。在早期,Angular只有即时编译(JIT:Just In Time),也就是说应用代码是在运行时编译的。即时编译的第一个问题是在应用中需要打包编译器代码,这增加了最终发布的应用代码的
    大小;另一个问题在于编译需要时间,这增加了用户打开应用的等待时间。因此现在的Angular是同时支持JIT和AOT的,但启动JIT编译的应用,和启动AOT编译的应用,在目前需要显式地进行选择:

    aot vs. jit

    对于Angular而言,编译将入口NG模块定义转换为NG模块工厂(NgModuleFactory)。对于JIT而言,这一步是隐含在bootstrapModule()中的。而对于AOT而言,生成模块工厂就结束了,应用启动时使用bootstrapModuleFactory()调用生成的模块工厂即可。

    尽管AOT编译通常在构建阶段运用,我们可以在浏览器里模拟这个分两步的过程。

    七、理解Angular的初衷

    除了框架本身的功能强大导致的复杂性,Angular的另一个复杂性来源在于其高度封装的声明式API,让开发者难以揣摩、洞察框架的实现机制,因此使用起来就很心虚,一旦出现问题则难以分析排错:

    angular error

    不能把Angular当作黑盒来使用。

    一方面原因在于,Angular是以其声明式的模板语法为核心提供API开发接口的,开发者书写的模板,经过框架相当复杂的编译处理,才渲染出最终的视图对象。如果不尝试了解从模板到视图对象这个过程究竟发生了什么,我相信你始终会有一种失控的感觉。

    另一方面原因在于,Angular是一个框架,它搭好了应用程序的架子,留了一些空隙让开发者填充。如果不尽可能地了解框架的运行机制,很难充分地利用好框架。

    开发Angular的出发点,是为了实现用HTML来编写用户界面,想想一个静态网页有多容易开发,你就知道这是多么好的想法:

    html challenge

    原生HTML的问题在于,首先它需要借助于JavaScript才能实现过得去的用户交互,其次它只有那么多标签可用,难以担当开发用户界面的大任。

    既然浏览器不能直接解释<ez-gauge>这样的标签,Angular团队就引入了编译器的概念:
    在送给浏览器之前,先把有扩展标签的HTML翻译成浏览器支持的原生HTML:

    html compiler

    目录

    • 第1章  准备工作     1
    • 1.1  需要了解什么     1
    • 1.2  本书结构     1
    • 1.2.1  第1部分:准备     2
    • 1.2.2  第2部分:使用Angular     2
    • 1.2.3  第3部分:Angular的
    • 高级功能     2
    • 1.3  大量示例     2
    • 1.4  获取示例代码     4
    • 1.5  如何搭建开发环境     4
    • 1.6  联系作者     4
    • 1.7  本章小结     4
    • 第2章  第一个Angular应用程序     5
    • 2.1  准备开发环境     5
    • 2.1.1  安装Node.js     5
    • 2.1.2  安装angular-cli包     6
    • 2.1.3  安装Git     6
    • 2.1.4  安装编辑器     7
    • 2.1.5  安装浏览器     7
    • 2.2  创建并准备项目     8
    • 2.2.1  创建项目     8
    • 2.2.2  创建包文件     8
    • 2.2.3  启动服务器     10
    • 2.2.4  编辑HTML文件     11
    • 2.3  向项目中添加Angular功能     13
    • 2.3.1  准备HTML文件     14
    • 2.3.2  创建数据模型     14
    • 2.3.3  创建模板     17
    • 2.3.4  创建组件     17
    • 2.3.5  将应用程序组合起来     19
    • 2.4  向示例应用程序中添加功能     21
    • 2.4.1  添加待办事项表格     21
    • 2.4.2  创建双向数据绑定     25
    • 2.4.3  添加待办事项     27
    • 2.5  本章小结     29
    • 第3章  创建项目     31
    • 3.1  准备创建项目     31
    • 3.2  创建项目     32
    • 3.2.1  创建项目的Angular部分     33
    • 3.2.2  创建项目的ASP.NET
    • Core MVC部分     34
    • 3.3  配置项目     35
    • 3.3.1  准备项目(Visual Studio)     35
    • 3.3.2  创建和编辑配置文件     36
    • 3.3.3  启用日志消息     39
    • 3.3.4  更新Bootstrap包     39
    • 3.3.5  移除文件     40
    • 3.3.6  更新控制器、布局和视图     40
    • 3.4  运行项目     42
    • 3.5  理解合并项目和工具     44
    • 3.5.1  理解项目结构     44
    • 3.5.2  理解工具集成     44
    • 3.5.3  理解项目变更系统     45
    • 3.5.3  检测TypeScript错误     48
    • 3.6  本章小结     50
    • 第4章  HTML和CSS入门     51
    • 4.1  准备示例项目     51
    • 4.2  理解HTML     53
    • 4.2.1  理解空元素     54
    • 4.2.2  理解属性     54
    • 4.2.3  应用无值属性     54
    • 4.2.4  在属性中引用字面量     55
    • 4.2.5  理解元素内容     55
    • 4.2.6  理解文档结构     55
    • 4.3  理解Bootstrap     57
    • 4.3.1  应用基本的Bootstrap类     57
    • 4.3.2  使用Bootstrap样式化表格     61
    • 4.3.3  使用Bootstrap创建表单     62
    • 4.3.4  使用Bootstrap创建网格     63
    • 4.4  本章小结     68
    • 第5章  JavaScript与TypeScript:
    • 第1部分     69
    • 5.1  准备示例项目     70
    • 5.1.1  创建HTML和JavaScript
    • 文件     71
    • 5.1.2  配置TypeScript编译器     72
    • 5.1.3  运行示例项目     72
    • 5.2  理解script元素     73
    • 5.2.1  使用JavaScript模块
    • 加载器     73
    • 5.2.2  理解基本工作流     74
    • 5.3  使用语句     75
    • 5.4  定义和使用函数     75
    • 5.4.1  定义带参数的函数     77
    • 5.4.2  定义返回结果的函数     79
    • 5.4.3  将函数用作其他函数的
    • 实参     79
    • 5.5  使用变量和类型     80
    • 5.6  使用JavaScript操作符     84
    • 5.6.1  使用条件语句     84
    • 5.6.2  相等操作符和恒等操作符     85
    • 5.6.3  显式类型转换     86
    • 5.7  处理数组     87
    • 5.7.1  使用数组字面量     88
    • 5.7.2  数组内容的读取和修改     88
    • 5.7.3  遍历数组内容     89
    • 5.7.4  使用内置数组方法     89
    • 5.8  本章小结     91
    • 第6章  JavaScript与TypeScript:
    • 第2部分     93
    • 6.1  准备示例项目     93
    • 6.2  使用对象     94
    • 6.2.1  使用对象字面量     95
    • 6.2.2  将函数用作方法     95
    • 6.2.3  定义类     96
    • 6.3  处理JavaScript模块     99
    • 6.3.1  创建模块     99
    • 6.3.2  从JavaScript模块导入     100
    • 6.4  有用的TypeScript特性     103
    • 6.4.1  使用类型注解     103
    • 6.4.2  使用元组     109
    • 6.4.3  使用可索引类型     109
    • 6.4.4  使用访问修饰符     110
    • 6.5  本章小结     111
    • 第7章  SportsStore:一个真实的
    • 应用程序     113
    • 7.1  准备项目     113
    • 7.1.1  准备项目     114
    • 7.1.2  创建文件夹结构     114
    • 7.1.3  安装额外的NPM软件包     114
    • 7.1.4  准备RESTful Web服务     116
    • 7.1.5  准备HTML文件     118
    • 7.1.6  运行示例应用程序     119
    • 7.1.7  启动RESTful Web服务     119
    • 7.2  准备Angular项目功能     120
    • 7.2.1  更新根组件     120
    • 7.2.2  更新根模块     121
    • 7.2.3  检查引导文件     121
    • 7.3  启动数据模型     122
    • 7.3.1  创建模型类     122
    • 7.3.2  创建虚拟数据源     123
    • 7.3.3  创建模型存储库     124
    • 7.3.4  创建功能模块     126
    • 7.4  启动商店     126
    • 7.4.1  创建Store组件和模板     127
    • 7.4.2  创建商店功能模块     128
    • 7.4.3  更新根组件和根模块     129
    • 7.5  添加商店功能:产品详情     130
    • 7.5.1  显示产品详情     130
    • 7.5.2  添加类别选择     132
    • 7.5.3  添加产品分页功能     133
    • 7.5.4  创建自定义指令     137
    • 7.6  本章小结     140
    • 第8章  SportsStore:订单和结账     141
    • 8.1  准备示例应用程序     141
    • 8.2  创建购物车     141
    • 8.2.1  创建购物车模型     141
    • 8.2.2  创建购物车概览组件     143
    • 8.2.3  将购物车集成到商店中     145
    • 8.3  添加URL路由     148
    • 8.3.1  创建购物车详情和结账
    • 组件     148
    • 8.3.2  创建和应用路由配置     150
    • 8.3.3  应用程序导航     151
    • 8.3.4  守卫路由     154
    • 8.4  完成购物车详情功能     156
    • 8.5  处理订单     159
    • 8.5.1  扩展模型     159
    • 8.5.2  收集订单详情     161
    • 8.6  使用RESTful Web服务     165
    • 8.7  本章小结     168
    • 第9章  SportsStore:管理     169
    • 9.1  准备示例应用程序     169
    • 9.1.1  创建模块     169
    • 9.1.2  配置URL路由系统     172
    • 9.1.3  导航到管理URL     173
    • 9.2  实现身份验证     175
    • 9.2.1  理解身份验证系统     175
    • 9.2.2  扩展数据源     176
    • 9.2.3  创建身份验证服务     177
    • 9.2.4  启用身份验证     178
    • 9.3  扩展数据源和存储库     181
    • 9.4  创建管理功能结构     185
    • 9.4.1  创建占位符组件     185
    • 9.4.2  准备常用内容和功能
    • 模块     186
    • 9.4.3  实现产品功能     189
    • 9.4.4  实现订单功能     193
    • 9.5  本章小结     195
    • 第10章  SportsStore:部署     197
    • 10.1  准备部署应用程序     197
    • 10.2  将SportsStore应用程序
    • 容器化     197
    • 10.2.1 安装Docker     197
    • 10.2.2 准备应用程序     198
    • 10.2.3 创建Docker容器     199
    • 10.2.4 运行应用程序     200
    • 10.3  本章小结     201
    • 第11章  创建Angular项目     203
    • 11.1  准备TypeScript Angular
    • 开发项目     203
    • 11.1.1 创建项目文件夹结构     204
    • 11.1.2 创建和提供HTML
    • 文档     204
    • 11.1.3 准备项目配置     205
    • 11.1.4 添加包     205
    • 11.1.5 启动监视进程     213
    • 11.2  使用TypeScript开始
    • Angular开发     214
    • 11.2.1 创建数据模型     216
    • 11.2.2 创建模板和根组件     219
    • 11.2.3 创建Angular模块     220
    • 11.2.4 引导应用程序     221
    • 11.2.5 配置JavaScript模块
    • 加载器     222
    • 11.2.6 更新HTML文档     226
    • 11.2.7 运行应用程序     227
    • 11.3  利用@angular/cli工具
    • 创建项目     229
    • 11.3.1 创建示例项目     229
    • 11.3.2 创建包文件     230
    • 11.3.3 启动服务器     231
    • 11.4  本章小结     231
    • 第12章  使用数据绑定     233
    • 12.1  准备示例项目     234
    • 12.2  理解单向数据绑定     234
    • 12.2.1 理解绑定目标     236
    • 12.2.2 理解表达式     237
    • 12.2.3 理解括号     238
    • 12.2.4 理解宿主元素     239
    • 12.3  使用标准属性和属性绑定     239
    • 12.3.1 使用标准属性绑定     239
    • 12.3.2 使用字符串插入绑定     241
    • 12.3.3 使用元素属性绑定     242
    • 12.4  设置CSS类和样式     244
    • 12.4.1 使用类绑定     244
    • 12.4.2 使用样式绑定     248
    • 12.5  更新应用程序的数据     252
    • 12.6  本章小结     254
    • 第13章  使用内置指令     255
    • 13.1  准备示例项目     256
    • 13.2  使用内置指令     257
    • 13.2.1 使用ngIf指令     258
    • 13.2.2 使用ngSwitch指令     260
    • 13.2.3 使用ngFor指令     262
    • 13.2.4 使用ngTemplateOutlet
    • 指令     271
    • 13.3  理解单向数据绑定的限制     273
    • 13.3.1 使用幂等表达式     274
    • 13.3.2 理解表达式上下文     276
    • 13.4  本章小结     279
    • 第14章  使用事件和表单     281
    • 14.1  准备示例项目     282
    • 14.1.1 添加表单模块     282
    • 14.1.2 准备组件和模板     283
    • 14.2  使用事件绑定     285
    • 14.2.1 理解动态定义的属性     286
    • 14.2.2 使用事件数据     288
    • 14.2.3 使用模板引用变量     290
    • 14.3  使用双向数据绑定     292
    • 14.4  处理表单     295
    • 14.4.1 向示例应用程序添加
    • 表单     295
    • 14.4.2 添加表单数据验证     297
    • 14.4.3 验证整个表单     307
    • 14.5  使用基于模型的表单     313
    • 14.5.1 启用基于模型的表单
    • 功能     313
    • 14.5.2 定义表单模型类     314
    • 14.5.3 使用模型进行验证     317
    • 14.5.4 根据模型生成元素     321
    • 14.6  创建自定义表单验证器     322
    • 14.7  本章小结     325
    • 第15章  创建属性指令     327
    • 15.1  准备示例项目     328
    • 15.2  创建简单的属性指令     330
    • 15.3  在指令中访问应用程序
    • 数据     333
    • 15.3.1 读取宿主元素属性     333
    • 15.3.2 创建数据绑定输入
    • 属性     335
    • 15.3.3 响应输入属性变化     338
    • 15.4  创建自定义事件     340
    • 15.5  创建宿主元素绑定     343
    • 15.6  在宿主元素上创建双向
    • 绑定     344
    • 15.7  导出指令用于模板变量     348
    • 15.8  本章小结     350
    • 第16章  创建结构型指令     351
    • 16.1  准备示例项目     352
    • 16.2  创建简单的结构型指令     353
    • 16.2.1 实现结构型指令类     354
    • 16.2.2 启用结构型指令     356
    • 16.2.3 使用结构型指令的
    • 简洁语法     358
    • 16.3  创建迭代结构型指令     359
    • 16.3.1 提供额外的上下文
    • 数据     362
    • 16.3.2 使用简洁的结构语法     363
    • 16.3.3 处理属性级数据变更     364
    • 16.3.4 处理集合级数据变更     365
    • 16.4  查询宿主元素内容     376
    • 16.4.1 查询多个子内容     379
    • 16.4.2 接收查询变更通知     381
    • 16.5  本章小结     382
    • 第17章 理解组件     385
    • 17.1  准备示例项目     386
    • 17.2  使用组件来组织应用程序     386
    • 17.2.1 创建新组件     388
    • 17.2.2 定义模板     391
    • 17.2.3 完成组件的重组     400
    • 17.3  使用组件样式     401
    • 17.3.1 定义外部组件样式     402
    • 17.3.2 使用高级样式特性     403
    • 17.4  查询模板内容     410
    • 17.5  本章小结     412
    • 第18章  使用和创建管道     413
    • 18.1  准备示例项目     414
    • 18.2  理解管道     418
    • 18.3  创建一个自定义管道     419
    • 18.3.1 注册自定义管道     421
    • 18.3.2 应用自定义管道     421
    • 18.3.3 组合管道     423
    • 18.3.4 创建非纯管道     423
    • 18.4  使用内置管道     427
    • 18.4.1 格式化数值     428
    • 18.4.2 格式化货币值     431
    • 18.4.3 格式化百分比     433
    • 18.4.4 格式化日期     435
    • 18.4.5 改变字符串大小写     438
    • 18.4.6 将数据序列化为JSON
    • 数据     439
    • 18.4.7 将数据数组切片     440
    • 18.5  小结     442
    • 第19章  使用服务     443
    • 19.1  准备示例项目     444
    • 19.2  理解对象分发问题     445
    • 19.2.1  问题的提出     445
    • 19.2.2  利用依赖注入将对象
    • 作为服务分发     450
    • 19.2.3  在其他构造块中声明
    • 依赖     455
    • 19.3  理解测试隔离问题     461
    • 19.4  完成服务的融入     465
    • 19.4.1  更新根组件和模板     465
    • 19.4.2  更新子组件     466
    • 19.5  小结     468
    • 第20章  使用服务提供程序     469
    • 20.1  准备示例项目     470
    • 20.2  使用服务提供程序     471
    • 20.2.1  使用类提供程序     474
    • 20.2.2  使用值提供程序     481
    • 20.2.3  使用工厂提供程序     483
    • 20.2.4  使用已有服务提供
    • 程序     486
    • 20.3  使用本地提供程序     487
    • 20.3.1  理解单个服务对象的
    • 限制     488
    • 20.3.2  在一条指令中创建本地
    • 提供程序     489
    • 20.3.3  在组件中创建本地提供
    • 程序     491
    • 20.3.4  控制依赖解析     495
    • 20.4  小结     498
    • 第21章  使用和创建模块     499
    • 21.1  准备示例项目     499
    • 21.2  理解根模块     501
    • 21.2.1 理解imports属性     504
    • 21.2.2 理解declarations属性     504
    • 21.2.3 理解providers属性     504
    • 21.2.4 理解bootstrap属性     504
    • 21.3  创建功能模块     507
    • 21.3.1 创建模型模块     508
    • 21.3.2 创建实用工具功能
    • 模块     512
    • 21.3.3 用组件创建一个功能
    • 模块     518
    • 21.4  小结     521
    • 第22章  创建示例项目     523
    • 22.1  启动示例项目     523
    • 22.2  添加和配置包     524
    • 22.2.1  配置TypeScript     525
    • 22.2.2  配置HTTP开发
    • 服务器     525
    • 22.3  创建模型模块     526
    • 22.3.1  创建产品数据类型     526
    • 22.3.2  创建数据源和存储库     526
    • 22.3.3  完成模型模块     528
    • 22.4  创建核心模块     528
    • 22.4.1  创建共享状态服务     528
    • 22.4.2  创建表格组件     529
    • 22.4.3  创建表单组件     531
    • 22.4.4  完成核心模块     533
    • 22.5  创建消息模块     533
    • 22.5.1  创建消息模型和服务     533
    • 22.5.2  创建组件和模板     534
    • 22.5.3  完成消息模块     535
    • 22.6  完成项目     535
    • 22.6.1  创建Angular引导程序     536
    • 22.6.2  创建HTML文档     536
    • 22.7  运行示例项目     537
    • 22.8  小结     538
    • 第23章  使用Reactive Extensions     539
    • 23.1  准备示例项目     540
    • 23.2  理解问题     540
    • 23.3  使用Reactive Extensions
    • 解决问题     543
    • 23.3.1  理解Observable     544
    • 23.3.2  理解Observer     545
    • 23.3.3  理解Subject     547
    • 23.4  使用async管道     548
    • 23.5  扩展应用程序功能模块     551
    • 23.6  基础之上更进一步     553
    • 23.6.1  过滤事件     554
    • 23.6.2  转换事件     555
    • 23.6.3  只接收不同的事件     558
    • 23.6.4  获取和忽略事件     560
    • 23.7  小结     561
    • 第24章  生成异步HTTP请求     563
    • 24.1  准备示例项目     564
    • 24.1.1 配置模型功能模块     565
    • 24.1.2 更新表单组件     566
    • 24.1.3 运行示例项目     567
    • 24.2  理解RESTful Web服务     568
    • 24.3  替换静态数据源     569
    • 24.3.1 创建新的数据源服务     569
    • 24.3.2 配置数据源     572
    • 24.3.3 使用REST数据源     572
    • 24.3.4 保存和删除数据     574
    • 24.4  加强HTTP请求     576
    • 24.5  生成跨域请求     578
    • 24.6  配置请求头     581
    • 24.7  处理错误     584
    •  
    • 24.7.1 生成用户可以使用的
    • 消息     585
    • 24.7.2 处理错误     586
    • 24.8  小结     588
    • 第25章  路由和导航:第1部分     589
    • 25.1  准备示例项目     590
    • 25.2  开始学习路由     593
    • 25.2.1 创建路由配置     594
    • 25.2.2 创建路由组件     595
    • 25.2.3 更新根模块     596
    • 25.2.4 完成配置     596
    • 25.2.5 添加导航链接     597
    • 25.2.6 理解路由的效果     600
    • 25.3  完成路由实现     602
    • 25.3.1 在组件中处理路由
    • 变化     602
    • 25.3.2 使用路由参数     605
    • 25.3.3 在代码中导航     611
    • 25.3.4 接收导航事件     614
    • 25.3.5 删除事件绑定和
    • 支持代码     615
    • 25.4  小结     618
    • 第26章  路由与导航:第2部分     619
    • 26.1  准备示例项目     619
    • 26.2  使用通配符和重定向     626
    • 26.2.1 在路由中使用通配符     626
    • 26.2.2 在路由中使用重定向     628
    • 26.3  在组件内部导航     630
    • 26.3.1 响应正在发生的
    • 路由变化     631
    • 26.3.2 为活动路由设置不同
    • 样式的链接     633
    • 26.3.3 修复All按钮     636
    • 26.4  创建子路由     637
    • 26.4.1 创建子路由出口     638
    • 26.4.2 从子路由访问参数     640
    • 26.5  小结     644
    • 第27章  路由与导航:第3部分     645
    • 27.1  准备示例项目     645
    • 27.2  守卫路由     647
    • 27.2.1 使用解析器推迟导航     647
    • 27.2.2  避免带有守卫的导航     654
    • 27.3  动态加载功能模块     667
    • 27.3.1  创建一个简单的功能
    • 模块     667
    • 27.3.2  动态加载模块     669
    • 27.3.3 守卫动态模块     672
    • 27.4  指定命名出口     675
    • 27.4.1  创建附加的出口元素     676
    • 27.4.2  在使用多个出口的
    • 情况下导航     678
    • 27.5  小结     680
    • 第28章  使用动画     681
    • 28.1  准备示例项目     682
    • 28.1.1  添加动画polyfill     682
    • 28.1.2  禁用HTTP延迟     685
    • 28.1.3  简化表格模板和
    • 路由配置     686
    • 28.2  开始学习Angular动画     688
    • 28.2.1  创建动画     688
    • 28.2.2  应用动画     691
    • 28.2.3  测试动画效果     694
    • 28.3  理解内置的动画状态     696
    • 28.4  理解元素过渡     697
    • 28.4.1  为内置状态创建迁移     697
    • 28.4.2  控制动画过渡     699
    • 28.5  理解动画样式分组     704
    • 28.5.1  在可重用分组中定义
    • 公共样式     704
    • 28.5.2  使用元素变形     705
    • 28.5.3  应用CSS框架样式     707
    • 28.6  理解动画触发器事件     709
    • 28.7  小结     712
    • 第29章  Angular单元测试     713
    • 29.1  准备示例项目     714
    • 29.1.1  添加测试包     715
    • 29.1.2  创建一个简单的
    • 单元测试     719
    • 29.1.3  启动工具     719
    • 29.2  使用Jasmine完成单元
    • 测试     721
    • 29.3  测试Angular组件     722
    • 29.3.1 使用TestBed类完成
    • 工作     722
    • 29.3.2 测试数据绑定     726
    • 29.3.3 测试带有外部模板的
    • 组件     728
    • 29.3.4 测试组件事件     730
    • 29.3.5 测试输出属性     732
    • 29.3.6 测试输入属性     734
    • 29.3.7 测试异步操作     736
    • 29.4  测试Angular指令     739
    • 29.5  小结     740

    上一篇:玩转虚拟机-基于VMware+Windows  下一篇:标准C程序设计

    展开 +

    收起 -

    码小辫二维码
     ←点击下载即可登录

    Web前端相关电子书
    学习笔记
    网友NO.723831

    AngularJs+Bootstrap实现漂亮的计算器

    之前看到一个试题,要求用angularJs和Bootstrap写一个简单的计算器,通过百度,发现没有什么好的例子,所以呢,我就把自己写的一个例子发出来给大家。(大牛勿喷) HTML代码: !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" title计算器/title link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/ link rel="stylesheet" type="text/css" href="css/style.css" / /head body div ng-app="myApp" ng-controller="myController" class="row" div class="col-md-5 col-xs-5"/div div class="col-md-4 col-xs-4" div id="a" div id="show" input type="text" name="show" ng-model="shuzi" value="{{shuzi}}" class="form-control" disabled/ input type="text" name="show" ng-model="jieguo" value="{{jieguo}}" class="form-control" disabled id="b"/ /div br / div class="row" div class="col-md-7 col-xs-7" button type="button" ng-click="num(7)" class="btn btn-default" id="but"7/button button type="button" ng-click="num(8)" class="btn btn-default" id="but"8/button button type="button" ng-click="num(9)" class="btn btn-default" id="but"9/button button type="button" ng-click="num('/')" class="btn btn-default" id="but"÷/button br/ button type="button" ng-click="num(4)" class="btn btn-default" id="but"4/button button type="button" ng-click="num(5)" class="btn btn-default" id="but"5/button button type="button" ng-click="num(6)……

    网友NO.524182

    Angular+Bootstrap+Spring Boot实现分页功能实例代码

    需要用到的js angular.js(用angular.min.js会导致分页控件不显示) ui-bootstrap-tpls.min.js angular-animate.js 需要用到的css bootstrap.min.css 由于本项目使用了路由,所以讲js以及css文件的应用都放在一个主html,请同学们在html页面中添加以上文件 在开始之前,我先简单介绍下分页的原理。 分页的实质其实就是一条sql语句, 比如查找第二页,即第16到第30条数据 在MySQL中是 select * from table limit 15,15 order by id desc Sql server中是select * from (select top 15 * from (select top (30) * from table order by id desc) order by available asc) order by id desc Oracle是(oracle中的row从1开始):select * from (select a.*,rownum from (select * from tablet order by id desc) a ) b where b.rownum between 16 and 30 一般情况下,查询得到的数据采用倒序排序,这样可以将用户最新插入的数据放在最前面。 那么这三条sql语句中的这些数值是怎么计算得到的呢?它们就是根据1、CurrentPage 当前在哪一页 2、PageSize 每页展示多少条 来的到的,因此后台需要从前端获取这两个数值。又为了告诉用户一共有多少页,我们还要3、TotalSize 一共多少条 。 现在有了上面1 2 3值,我们就可以来进行分页了。在前端我们需要一个Table来帮我们展示数据,还需要一个小控件,让用户去选择第几页,而bootstrap就为我们提供了这个小控件(uib-paginat……

    网友NO.687081

    bootstrap tooltips在 angularJS中的使用方法

    使用bootstrap自带的提示控件,省去了不少事情 div class="s2" ng-init="InitTooltip()" input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\'\\/\+%\$\#\=~:_\-\s@]+$/" class="inputwords" id="txtExamination" name="txtExamination" ng-model="csInfo.ExamUrl" placeholder="测验地址" span data-toggle="tooltip" data-placement="top" data-html="true" title="1、点击《新建测验》按钮 br/ 2、测验创建完成后,点击页面右上角《共享》按钮点击《复制》按钮 br/ 3、把复制的url粘贴到此处即可" i class="fa fa-question-circle-o examSpan"/i /span span a target="_blank" href="https://forms.office.com/Pages/DesignPage.aspx"创建测验/a/span/div 控制器或者js代码: $scope.InitTooltip = function() { //初始化tips提示控件 $("[data-toggle='tooltip']").tooltip(); }; 控制颜色,类名是生成弹出层后的类名: /**控制弹出层颜色和大小*/.tooltip-inner { background: #fafafa !important; text-align: left !important; color: #363636 !important; border: 1px solid #dedede; max-width: 400px !important; padding: 4px;}/**控制小三角透明度*/.tooltip-arrow{ border-bottom-color: #ffffff !important; opacity: 0.3;} 默认背景颜色 设置颜色后 总结 以上所述是小编给大家介绍的bootstrap tooltips在 angularJS中的使用方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! ……

    网友NO.48945
    网友NO.48945

    新特性
    Angular Material和CDK稳定版
    CLI中支持Service Worker
    在CLI中改进了Universal和AppShell的支持
    改进了装饰器的错误信息
    支持TypeScript2.5
    有关功能和bug修复的完整列表,请参阅Angular,Material和CLI的更新日志。
    在发布了11个alpha版本,12个beta版本以及3个候选版本之后,我们很高兴现在能够标记Angular Material和Angular CDK的5.0.0的稳定版。基于Google的Material Design视觉设计语言,Angular Material提供了30个UI组件给你的Angular应用。组合使用Angular CDK,Angular CDK(组件开发工具包)提供了一组构建模块,帮组您构建自己的定制组件,而不需要再次解决常见问题。这些组件已经被许多GOogle应用程序(包括Google Analytics套件,Google云平台开发人员控制台以及Google Shopping Express)用于生产。
    从这个版本开始,Angular Material将遵循与Angular相同的语义化哲学,主版本的Angular Materital和Angular CDK同时作为其它平台的主版本发布。bug修复的版本将按照每周的迭代进行,而次版本将在功能完成时发布。
    访问matrial.angular.io获取文档,演示和我们的入门指南。你还可以在Github上跟进我们的进度,因为我们将继续为框架添加更多类容。在接下来的几个月中,请关注诸如新的mat-tree,virtual scrolling,组件测试套件以及拖放功能。
    CLI1.6的Service Worker支持
    性能一直是Web开发人员的一个重要目标,在今天的局域网WIFI和移动网络事件中,性能一直是一个重要的目标。现代浏览器有一个新的API用于构建可靠且快速加载的站点,称为Service Worker API。
    Angular5.0.0附带了一个为Angular应用程序定制的新的Service Worker实现,而Angular CLI 1.6包含了支持利用这个新特性构建应用的功能。使用@angular/service-worker可以提升你的应用的加载性能在支持该API的浏览器中,以及使你的应用的加载体验更像是本地app。
    在我们的文档网站中,学习更多关于Angular Service的内容。
    CLI1.6 改进Universal和App Shell支持
    此外,随着Angular CLI1.6的发布,更好的通过Schematics将Universal添加到你现有的项目中,并为App Shell提供支持。

    网友NO.32925
    网友NO.32925

    构建优化器
    5.0.0开始,通过CLI执行的产品构建默认使用构建优化器。
    构建优化器是CLI中的一个工具,它基于我们对你Angular应用的理解,可以把构建后的包变得更小。
    构建优化器有两个主要任务。首先,把你应用的某些部分标记为pure,以便原有工具利用它改进“tree shaking”的优化效果,同时删除应用中不必要的东西。
    其次,构建优化器会从你的应用中删除Angular装饰器代码。装饰器只有编译器会用,运行时不用,可以删掉。上述两项优化都可以减少生成JS包的大小,同时加快应用启动速度。
    Angular Universal状态转交API及对DOM的支持
    这样更便于在服务端和客户之间共享应用状态。
    Angular Universal是一个帮助开发者执行服务端渲染(SSR)的项目。服务端渲染生成的HTML对不支持JS的蜘蛛和爬虫友好,同时有助于提升用户感知性能。
    在5.0.0中,开发团队添加了ServerTransferStateModule及对应的BrowserTransferStateModule。这个模块可以帮开发者在服务端渲染生成的内容中加入相关信息,然后传送给客户端,从而避免重复生成。这对于通过HTTP获取数据的场景是很有用的。通过把状态从服务器传送到客户端,开发者就不用再发第二次HTTP请求了。状态转交的相关文档几周后会发布。
    Angular Universal团队还把平台服务器Domino加到了平台服务器中。Domino支持在服务器端环境下更多的开箱即用的DOM操作,可以改进我们对非服务端第三方JS及组件库的支持。
    编译器改进
    为支持递增编译,我们改进了Angular编译器。结果让重新构建加快,特别是对产品构建和AOT构建,效果更明显。我们还增强了装饰器,通过删除空白达到减少包大小的目的。
    TypeScript转换
    现在,Angular编译器底层的工作机制是TypeScript转换,从而让递增式重新构建快了很多。TypeScript转换是TypeScript 2.3新增的一个特性,可以让我们深入到标准TypeScript编译管道。
    在打开AOT标签的情况下,运行ng serve就可以利用上述机制。
    ng serve --aot
    建议大家都试一下。将来这个配置会成为CLI的默认值。很多项目都有性能问题,涉及上千组件,我们希望各种规模的项目都能从这些改进中受益。
    在执行https://angular.io 的递增AOT构建时,新编译器管道可节省95%的构建时间(在我们开发机上测试的结果是从40多秒减少为不到2秒)。
    我们的目标是让AOT编译快到能开发者用它开发的程度。现在,我们已经冲进了2秒以内,因此将来的CLI中可能会默认开启AOT。
    作为向本次转换过渡的一步,我们不再需要genDir,而outDir也变了:现在,我们会把为包生成的文件都打到node_modules里。

    Copyright 2018-2019 xz577.com 码农之家

    版权责任说明