当前位置:首页 > >
《Angular5高级编程》电子书封面

Angular5高级编程

  • 发布时间:2019年08月09日 13:05:52
  • 作者:Adam
  • 大小:508.1 MB
  • 类别:Web前端电子书
  • 格式:PDF
  • 版本:影印第2版
  • 评分:7.1

    Angular5高级编程 PDF 影印第2版

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

      内容介绍

      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

      学习笔记

      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-cont……

      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.row……

      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提示控件 $……

      以上就是本次介绍的Web前端电子书的全部相关内容,希望我们整理的资源能够帮助到大家,感谢大家对码农之家的支持。

      上一篇:玩转虚拟机-基于VMware+Windows

      下一篇:标准C程序设计

      展开 +

      收起 -

      • 《Angular5高级编程》PDF下载

      下载地址:百度网盘下载
      Web前端相关电子书
      AngularJS即学即用
      AngularJS即学即用 高清版

      如果你想要学习AngularJS,无论是作为练手之作,或是看成现有工具的额外补充,把它还是作为主业,这本书都相当实用,它可以指引你逐步学习这个强大的框架,从最基本的概念到高阶应用。

      立即下载
      中文版Excel 2013高级VBA编程宝典
      中文版Excel 2013高级VBA编程宝典 全书第7版

      根据学习培训VBA编程技术来拓展Excel2013 当你出自于工作中必须或个人兴趣爱好,想掌握怎样开发设计程序流程来提高Excel并全自动进行测算每日任务,那麼excel表先生JohnWalkenbach毫无疑问是你的

      立即下载
      Spring5高级编程
      Spring5高级编程 完整第5版

      获取Spring 5经验的必备图书!全面的Spring 参考和实用指南,Spring 5的新特性和方法,精通数据访问和事务处理,创建微服务和其他Web服务和与Java 9的互操作性。

      立即下载
      高级R语言编程指南
      高级R语言编程指南 扫描版

      本书讲述R语言的基础知识,深入介绍R函数式编程、R语言的面向对象特性、程序的调试、代码优化和性能调优等内容,展示了许多必备的技巧

      立即下载
      C#高级编程
      C#高级编程 高清第10版

      Visual Studio 2015、ASP.NET Core 1.0和Universal Windows Platform的推出,为开发人员提供了使用C#创建应用程序的新方式。作为经典C#畅销书 , C#高级编程(第10版) 涵盖了充分利用升级功能,积极简化工作流

      立即下载
      Python高级编程
      Python高级编程 全书中文第2版

      Python作为一种高-级程序设计语言,本书于Python 3.5版本进行讲解,深度揭示了Python编程的高级技巧,适合想要进一步提高自身Python编程技能的读者阅读,也适合对Python编程感兴趣的读者参考学习

      立即下载
      读者留言
      网友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里。

      sheepych

      sheepych 提供上传

      资源
      13
      粉丝
      8
      喜欢
      188
      评论
      2

      Copyright 2018-2020 www.xz577.com 码农之家

      投诉 / 推广 / 赞助:QQ:520161757