Applications Google Angular Team 编著 北京 • BEIJING 序 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到 端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌 面应用的能力。 i 前言 Web 应用程序的安全涉及到很多方面。针对 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.1.2 模板、指令和数据绑定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 1.2 NgModule 和 . . . . . . . . . . . . 6 第二章 服务与依赖注入 7 2.1 服务 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.2 依赖注入（dependency injection） . . . . . . .

介绍 应用 & 组件实例 模板语法 Data Properties and Methods 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 深入组件 组件注册 Props 非 Prop 的 Attribute 自定义事件 插槽 提供 / 注入 动态组件 & 异步组件 模板引用 处理边界情况 过渡&动画 - 2 - 本文档使用 书栈网 · BookStack.CN 构建 响应性 深入响应性原理 响应式原理 响应式计算和侦听 组合 API 介绍 Setup 生命周期钩子 提供/注入 模板引用 渲染机制和优化 Vue 2 中的更改检测警告 工具 单文件组件 测试 TypeScript 支持 Mobile 规模化 路由 状态管理 服务端渲染 无障碍 基础 Data 选项 事件 API 过滤器 片段 函数式组件 - 3 - 本文档使用 书栈网 · BookStack.CN 构建 全局 API 全局 API Treeshaking 内联模板 Attribute key attribute 按键修饰符 在 prop 的默认函数中访问 this 渲染函数 API Slot 统一 过渡的 class 名更改 v-model v-if

图片处理：经过对源码的大量阅读及梳理，我们发现图片请求的 URL 首先会 读取 meta 标签中 assetBase 值进行 URL 路径拼接，根据拼接好的 URL 来获取资源。目前，在项目 web/index.html 模板文件中并没有 meta 标 签，于是就会根据相对路径进行请求。解决方案是在编译过程中，根据请求环 境增加 meta 标签并把 content 设置为 CDN 路径。 ● JavaScript 由各平台 Compiler 进行转译； ● Dart2JS Compiler 是 Dart-SDK 中具体负责转译 JS 的模块，它将上述中 间产物 app.dill 进行读取和解析，并注入 Math、List、Map 等 JS 工具方法， 最终生产出 Web 平台所能执行的 JS 文件。 ● 编译产物主要为 main.dart.js、index.html、images 等静态资源，Flutter- Webpack、Rollup 等打包工具进 行抽离并赋予一个稳定的 Hash 值。同时，将 Runtime Manifest （分片文件的加载 46 > 2021年美团技术年货 逻辑和映射关系）注入到 HTML 文件中，这样保证了业务代码的变动不会影响到公 共包。借助常规 Web 项目的编译思路，我们深入分析了 FlutterWeb 中 Runtime Manifest 的生成逻辑和 PartJS

功能.....13 2.3.1 准备 HTML 文件................14 2.3.2 创建数据模型.....................14 2.3.3 创建模板 ...........................17 2.3.4 创建组件 ...........................17 2.3.5 将应用程序组合起来...... 创建功能模块...................126 7.4 启动商店.................................126 7.4.1 创建 Store 组件和模板.......127 7.4.2 创建商店功能模块............128 7.4.3 更新根组件和根模块.........129 7.5 添加商店功能：产品详情......130 TypeScript 开始 Angular 开发.........................214 11.2.1 创建数据模型...............216 11.2.2 创建模板和根组件.........219 11.2.3 创建 Angular 模块 .........220 11.2.4 引导应用程序...............221 Angular 5

编译和运行输出应该会在ES3/ES5引擎上产生正确的行为。 支持外部辅助库（ tslib ） TypeScript注入了一些辅助函数，如继承 _extends 、JSX中的展开运算 符 __assign 和异步函数 __awaiter 。 以前有两个选择： 1. 在每一个需要辅助库的文件都注入辅助库或者 2. 使用 --noEmitHelpers 编译参数完全不使用辅助库。 这两项还有待改 151 TypeScript 2.0 构建步骤将复制 /src/views 和 /generated/templates/views 目录下的文件输 出到同一个目录中。在运行时，视图期望它的模板和它存在同一目录中，因此应该 使用相对名称 "./template" 导入。 "rootDir" 指定的一组根目录的内容将会在运行时合并。因此在我们的例 子， tsconfig.json Cordova 应用依然有单个 tsconfig.json 文件的限制, 而这个文件 必须在根目录或者 scripts 文件夹. 多数项目类型中都没有 tsconfig.json 的模板. TypeScript Handbook（中文版） 179 TypeScript 1.8 TypeScript 1.7 支持 async / await 编译到 ES6 (Node v4+)

三斜线指令 JavaScript文件里的类型检查 - 2 - 本文档使用 书栈网 · BookStack.CN 构建 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 使用TypeScript的每日构建版本 JavaScript文件里的类型检查 实用工具类型 如何书写声明文件 介绍 目录 README - 8 - 本文档使用 书栈网 · BookStack.CN 构建 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 使用TypeScript的每日构建版本 模块解析 声明合并 JSX Decorators 混入 三斜线指令 JavaScript文件里的类型检查 实用工具类型 如何书写声明文件 介绍 库结构 举例 最佳实践 深入 模板 发布 使用 工程配置 tsconfig.json 工程引用 NPM包的类型 编译选项 配置 Watch 在MSBuild里使用编译选项 与其它构建工具整合 使用TypeScript的每日构建版本

n 为何引入Flutter n 实践之旅 Ø 技术全景 Ø 工程体系接入 Ø 业务框架升级 Ø Android插件化 n 总结 先看一下全景 开发 工具链 一键集成 SDK版本 模板脚手架 BuildRunner FlutterBox 可视化工具 构建 持续集成 安卓插件 多版本生成 lib架构管理 For Web Lint 测试 性能工具 状态上报 基 础 设 Native生态成熟 ovprogresshud 公共基础库 Res Res Res Pub 透 明 灵 活 方案1： 代理模式 独立容器 方案2： 定制AAPT 资源分段 查找容器 运行注入 ijkplayer 插件问题与挑战 – AndroidView资源使用 Build#PlatformViewsChannel::create FlutterView::createSurfaceTexture

padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12" 模板字符串 传统的JavaScript语言，输出模板通常是这样写的。 $('#result').append( 'There are ' + basket.count + ' ' + 'items in ' ); 上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。 $('#result').append(` There are ${basket.count} items in your basket, ${basket.onSale} are on sale! `); 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当 = "today"; `Hello ${name}, how are you ${time}?` 上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引 号，则前面要用反斜杠转义。 var greeting = `\`Yo\` World!`; 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。 $('#list').html(`

console.log(foo); // 2 6. })() 上面代码中，严格模式下， eval 内部还是改写了外部变量，可见安全 风险依然存在。 总之， eval 的本质是在当前作用域之中，注入代码。由于安全风险和 不利于 JavaScript 引擎优化执行速度，所以一般不推荐使用。通常 情况下， eval 最常见的场合是解析 JSON 数据的字符串，不过正确 的做法应该是使用原生的 书栈(BookStack.CN) 构建 RegExp 对象提供正则表示式的功能。 正则表达式（regular expression）是一种表达文本模式（即字符 串结构）的方法，有点像字符串的模板，常常用来按照“给定模式”匹配 文本。比如，正则表达式给出一个 Email 地址的模式，然后用它来确 定一个字符串是否为 Email 地址。JavaScript 的正则表达式体系 是参照 Perl 配（有多少个 组匹配，就有多少个对应的参数）。此外，最后还可以添加两个参数， 倒数第二个参数是捕捉到的内容在整个字符串中的位置（比如从第五个 位置开始），最后一个参数是原字符串。下面是一个网页模板替换的例 RegExp 对象 - 384 - 本文档使用 书栈(BookStack.CN) 构建 子。 1. var prices = { 2. 'p1': '$1.99', 3.

第一块内容：集成开发环境@angular/cli  第二块内容：Angular三大核心概念 Component,Module,Route  第三块内容：Angular架构特色 依赖注入、数据绑定  第四块内容：UI库 Angular-Material,Prime-NG,ng2-bootstrap,ionic  第五块内容：参考资源推荐 第一块：集成开发环境@angular/cli Angular路由用法：异步路由 Angular路由用法：路由守卫 防止未授权访问 第三块：Angular架构特色 依赖注入 依赖注入 Parent Injector Child Injector 注射器（Injector） 也是一个树型结构 依赖注入 依赖注入  每一个HTML标签上面都会有一个注射器实例  注射是通过constructor进行的  @Inj