我不是 Angular 的布道者，但如今自称 Angular 派，使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过，博客中也有三者的相关教程，最早接触的是 React，但是并没有实际的项目经验，只做过一些 Demo 。使用 Vue 做过一个比较复杂的移动端大数据项目，技术栈采用 Framework7 + Vue + Vuex，整体效果还是满意的。
利用Cordova插件加载本地图片显示在html中，有时等很久才显示，以为是插件的问题，但是调试的时候，发现图像数据很快就返回了，那猜想是显示的问题，同时发现，当页面切换到其它页面再切换回来时，图片很快就显示了，所以，认为是ts的绑定数据更新了，但是视图页面却没有更新，这个时候，ChangeDetectorRef就派上用场了。
利用 Angular 模板，我们可以创建各种类型表单，例如：登录表单，联系人表单，商品详情表单等，而且我们也为这些表单的字段添加数据校验。
文件上传，我们一般需要和本地文件打交道，先安装file插件（全称cordova-plugin-file）,
src是开发目录，生产打包后会产生一个dist目录； 初步说下你从启动到浏览器看到app works!依赖了哪些文件，有哪些作用
想来想去，概念这些东西不怎么想讲，更多的是想讲点实战性的内容。 所以有些东西跳过去了，小伙伴们请去看官方文档哈；跳跃性的前进，写的不好多包涵。。。
本文的目的是通过一步步实现一个旅游清单项目，让大家快速入门Angular8以及百度地图API。我们将收获：
Input 是属性装饰器，用来定义组件内的输入属性。在实际应用场合，我们主要用来实现父组件向子组件传递数据。Angular 应用是由各式各样的组件组成，当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。
现在我们可以app.component.html用这个替换：Angular是由Google开发的AngularJS框架的新版本。它带有一个完整的重写，以及各种改进，包括优化构建和更快的编译时间。在这个Angular 5教程中，我们将从头开始构建一个笔记应用程序。如果您一直在等待学习Angular 5，本教程适合您。
—\ntheme: fancy\n—\n\n### 介绍\n\n提前获取意味着在数据呈现在屏幕之前获取到数据。本文中，你将学到，在路由更改前怎么获取到数据。通过本文，你将学会使用 resolver， 在 Angular App 中应用 resolver，应用到一个公共的预加载导航。\n\n### 你为什么应该使用 Resolver\n\nResolver 在路由跟组件之间扮演着中间件服务的角色。假设你有一个表单，没有数据时，你想向用户一个空的表单，当在加载用户数据时展示一个 loader，然后当数据返回时，填充表单并隐藏 loader。\n\n通常，我们都会在组件的 ngOnInit() 钩子函数中获取数据。也就是说，组件加载完之后，我们发起数据请求。\n\n在 ngOnInit() 中操作，我们需要在每个需要的组件加载后，在其路由页面中添加 loader 展示。Resolver 可以简化 loader 的添加使用。你可以只添加一个适用于每个路由的 loader，而不是每个路由中都添加 loader。\n\n本文将结合示例来解析 resolver 的知识点。以便于你可以牢记它并在项目中使用它。\n\n### 在应用中使用 Resolver\n\n为了在应用中使用 resolver，你需要准备一些接口。你可以通过 JSONPlaceholder 来模拟，而不需要自己开发。\n\nJSONPlaceholder 是一个很棒的接口资源，你可以借助它更好学习前端的相关概念而不被接口所约束。\n\n现在，接口的问题解决了，我们可以开始 resolver 的应用了。一个 resolver 就是一个中间件服务，所以我们将创建一个服务。\n\nbash\n ng g s resolvers/demo-resolver --skipTests=true\n\n\n> –skipTests=true 跳过生成测试文件\n\nsrc/app/resolvers 文件夹中创建了一个服务。resolver 接口中有一个 resolve() 方法，它有两个参数：route（ActivatedRouteSnapshot 的实例）和 state(RouterStateSnapshot 的实例)。\n\nloader 通常是在 ngOnInit() 中编写所有的 AJAX 请求，但是逻辑将会在 resolver 中实现，替代 ngOnInit()。\n\n接着，创建一个服务来获取 JSONPlaceholder 中列表数据。然后在 resolver 中底调用，接着在路由中配置 resolve信息，（页面将会等待）直到 resolver 被处理。在 resolver 被处理之后，我们可以通过路由来获取数据然后展示在组件中。\n\n### 创建服务并编写逻辑获取列表数据\n\nbash\n ng g class models/post --skipTests=true\n\n\npost.ts\n\ntypescript\nexport class Post {\n id: number;\n title: string;\n body: string;\n userId: string;\n}\n\n\nmodel 就绪，是时候获取帖子 post 的数据了。\n\npost.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport { HttpClient } from "@angular/common/http";\nimport { Post } from "../models/post";\n\n@Injectable({\n providedIn: "root"\n})\nexport class PostsService {\n constructor(private _http: HttpClient) {}\n\n getPostList() {\n let URL = "https://jsonplaceholder.typicode.com/posts";\n return this._http.get<Post[]>(URL);\n }\n}\n\n\n现在，这个服务随时可被调用。\n\ndemo-resolver.service.ts\n\ntypescript\nimport { Injectable } from "@angular/core";\nimport {\n Resolve,\n ActivatedRouteSnapshot,\n RouterStateSnapshot\n} from "@angular/router";\nimport { PostsService } from "..
应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。
连更的这几天的文章，我们已经了解了不少 angular 的知识点了，这次我们来个小成品。
我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦！这又是一个主版本，包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、更好用的一贯目标。
前提: 准备一个空的angular项目(ng new angular-course)
上一节中我们定义了一个响应式表单，其中表单数据是在定义的时候就初始化好的，但是很多时候数据需要异步获取，比如 打开一个编辑页面，需要
Angular 是一个用html 和typescript 构建客户端应用的平台与框架。 它将核心功能和可选功能作为一组TypeScript 库进行实现，你可以把它们导入到你的应用中。
我们可以借助Angular的formControl来实现，这里我们基于FormControl创建一个子类ProductFormControl来提高可复用性
表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块； import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Angular 提供了两种不同的方法来通过表单处理用户输入：响应式表单和模板驱动表单。 本节先讲响应式表单。 最终实例demo app-component.ts
测试：在NG表达式可以执行哪些代码？（Y表示可以，N表示不可以） 算术运算：Y。比较运算：Y。逻辑运算：Y。三目运算：Y。 调用函数：Y。创建对象：N。JSON序列化：N。 NG表达式禁止出现new关键字。NG表达式中JSON是undefined。 结果展示：
码良是一个在线生成H5页面并提供页面管理和页面编辑的平台，用于快速制作H5页面。用户无需掌握复杂的编程技术，通过简单拖拽、少量配置即可制作精美的页面，可用于营销场景下的页面制作。同时，也为开发者提供了完备的编程接入能力，通过脚本和组件的形式获得强大的组件行为和交互控制能力。
序言：本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易，对于 Ionic 入门学习有一定帮助。因为文章是去年发表，所以教程内关于 Okta 的一些使用步骤不太准确，但是通过 Okta 的官网也可以找到对应的内容。另外，使用 npm 安装 Ionic starter 模板可能会有安装失败的情况，建议不要在这方面浪费太多时间，可以直接在 Ionic 的 GitHub 仓库 中下载 starter 模板。 原文：How to Sprinkle ReactJS i
本文将分为几个章节来讲解，这些章节根据应用核心需求和生命周期来拆分。现在，我们开始吧！
一、版本说明 原始版本： 2.0.0-beta.6 目标版本： 4.1.1 新增脚手架： Angular-cli 脚手架版本： 1.0.0-rc.1 升级后主要依赖版本如下： "dependenci
使用 Okta 和 OpenID Connect (OIDC)，可以很轻松的在 Ionic 应用中添加身份认证，完全不需要自己实现。 OIDC 允许你直接使用 Okta Platform API 进行认证，本文的目的就是告诉你如何在一个 Ionic 应用中使用这些 API。我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录； 由于功能还在开发中，所以省略了用户注册。
这部分，我们写一个表单程序，使用angularjs的检测并完成表单属性的获取与拷贝。 在AngularJS中，也支持html5中多种控件的自动检测，如：text、number、url、email、radio、checkbox等等。 可以通过anuglar.copy()自动拷贝form表单的数据。 代码参考如下： <!doctype html> <html ng-app> <head> <meta http-equiv="Content-Type" content=
本节课的重构完成之后，HeroesComponent 变得更精简，并且聚焦于为它的视图提供支持。这也让它更容易使用模拟服务进行单元测试。
本文使用Ionic2从头建立一个简单的Todo应用，让用户可以做以下事情： 查看todo列表 添加新的todo项 查看todo详情 保存 todo到持久化存储 0 开始之前 本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。 1 创建新的Ionic 2工程 我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。 运行以下命令创建新项目 ionic start ionic-todo blank --v2 一
angular 入坑记录的笔记第三篇，介绍 angular 中表单控件的相关概念，了解如何在 angular 中创建一个表单，以及如何针对表单控件进行数据校验。
为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库. 可以在项目里面建立一个database.sql, 并且建立一个数据库连接的profile(参考
曾经找到过“Editor.md”，看之心喜，一直想在Angular中集成下这款markdownpad编辑器玩，在网上也只找到一篇通过指令集成的，虽然可以实现，但还是希望能做成组件形式的，之后看到一篇自定义组件的文章，了解到ControlValueAccessor才真正完成这个心愿，现在记录分享与诸公。
本文是深入浅出 ahooks 源码系列文章的第十六篇，这个系列的目标主要有以下几点：
接下来我们使用 ngModel 进行双向数据绑定，通过监听 DOM 事件，来实现更新组件的属性。
1、背后靠山（google），有着稳定的维护团队。且google的Adwords业务就使用了angular，作为一个赚钱的业务，google也会让它的环境更稳定一些。 2、angular+typescript，google和微软的双剑合璧。angular全面支持typescript语法，typescript不仅包含es6中的语法，也包括一些新的语法， 最重要的一点是它增加了类型规则，这让代码的可读性和可维护性大大的提高，它也可以让有java或.net背景的开发人员更快的掌握。 3、完整。其实相对react和vue来说，angular更可以说是一个框架，而react和vue本身只能算是一个库。angular自带了几乎所有页面应具有的功能，路由、表单、ajax、模版、双向数据绑定等等。它原生的form表单模块非常强大，除了双向绑定的基本功能，还自带验证等，开发人员不需要再去为了这些功能找第三方库，angular一个框架就包含了这些的所有，因此对于选择困难症人群，这是一个优点。 4、每个框架都有自己的cli脚手架，可以快速搭建项目雏形。angular-cli自带国际化。 5、它的每一个组件都是一个文件夹，html、js、和css文件是分开的，让代码更加清晰。 而且它的各类型文件单独存在，在开发中使用任何IDE都可以检查代码。可以使用自带的格式化功能，让开发过程中的代码更整洁。
React React 和 Vue 有许多相似之处，它们都有： 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 由于有着众多的相似处，我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性，同时也兼顾了平衡的考量。我们需要承认 React 比 Vue 更好的地方，比如更丰富的生态系统。 相似之处 React与Vue存在很多相似之处，例如他们都是JavaS
ngAfterContentInit:当把内容投影进组件之后调用，第一次调用ngDocheck()之后调用，只调用一次，只适用于组件
在项目中，可以使用angular中的 @angular/forms模块处理表单，但是并不需要在app.module中引用@angular/forms模块，因为在app.module中已经引入了@angular/platform-browser模块，而在@angular/platform-browser模块中又导出了 @angular/forms 。也就是说，引入@angular/platform-browser模块之后就可以直接使用@angular/forms模块中提供的组件等内容。
本课程是一个系列基础教程，目标是带领读者上手实战，课程以新版本 Angular 的 3 个核心概念作为主线：组件、路由、模块，加上业务开发过程中必须用到的特性：工具、指令、表单、RxJS、i18n、测试，一共分为 9 部分，34 篇文章。
官方的教程，其实已经很详细且易懂，这里再次梳理的目的在于复习和巩固相关知识点，刚开始接触学习 Angular 的还是建议以官网为主。
刚拿到这个产品的代码时，我也是一头雾水，动就上千行的逻辑代码，看的让人很费劲，完全没有任何套路可言，一撸到底的代码，拿到后，我就先把代码拆开，一块一块的看
Angular 入坑记录的笔记第六篇，介绍 Angular 路由模块中关于路由守卫的相关知识点，了解常用到的路由守卫接口，知道如何通过实现路由守卫接口来实现特定的功能需求，以及实现对于特性模块的惰性加载
> 这里我是有些偷懒的，因为我看了官网的解释以后，我自己不太能知道怎么再使用我自己的语言重新给你们描述一次，你们可以选择直接看我的这个demo，简单暴力，也可以选择看一下官方的解释，本身就是白话文，所以就没有翻译的必要了。angular生命周期
表单是商业应用程序的主流。您可以使用表单登录，提交帮助请求，下订单，预订航班，安排会议，并执行无数其他数据录入任务。
PHP 超全局变量 _GET 和 _POST 用于收集表单数据（form-data）。
领取专属 10元无门槛券
手把手带您无忧上云
