https://github.com/xiaohuoni

在 Angular 中有三种类型的指令： 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。组件组件就是拥有模板的指令，这个我们在第五节编写第一个组件中就已经牛刀小试过了。 入门的内容就那么多的，不了解的还是回去再简单的看看。结构型指令结构型指令就是通过添加和移除DOM元素改变DOM布局

自定义管道运行ng generate pipe pipes/cny-currency 因为自定义管道使用的比较少，所以我们把管道都新建到pipes文件目录下。 打开\src\app\pipes\cny-currency.pipe.ts 这里我们编写了一个简单的管道，在输入的前面加上人民币符号，输出。 这里应该都很好理解，name是我们在html中使用的名字。 transform是

管道就是将输入的数据->通过某种转换->输出期望的值。 最常见的就是把服务端下发的时间戳转化成前端需要的时间字符串。 比如服务器下发的时间是1507519139， 而我们需要展示的时间是2017/10/9 11:18:59， 或者2017-10-9 11:18:59类似这样子的字符串， 就可以使用管道。内置管道Angular中提供了一部分常见的内置管道。DatePip

今天我们继续来看路由。 嵌套路由的使用还是蛮频繁的，使用场景场景一： 商城类应用会有大分区里面的小分区， 虽然也可以靠携带不同的路由参数来识别， 但是他们都在同一个视图里面，就会有一个很明显的问题。 有的分类内容比较多，列表很长，有些分类内容比较少，列表很短。 当从内容丰富的分类切换到内容很少的分类的时候， 会出现，内容很少的页面，下半部分会有一大片的空白。 滚动条也保留在原来的位置

我们在实际开发中，会有这样一种场景。 有些页面是允许访客登录的，有些页面是强制用户登录的。 后者，我们希望当用户没有登录的时候，无法直接进去页面， 而是先跳转到登录页面，或者先给出让用户登录的提示。路由守卫两种方法选一种就好了，文件名有冲突哦。推荐第二种。 方法一： 在src/app目录下新建guards文件夹 在src/app/guards目录下新建login.guard.t

路由策略我们上一节课中提到了{provide:LocationStrategy,useClass:HashLocationStrategy} 上一节课中我们说明了html中传统的锚标示路由。 这里我们再看新的路由的另一种实现方式了。 是HTML5的新规则，在不需要刷新页面的轻快下，允许在代码中创建新的浏览器记录并显示适当的URL。 简单的说，就是你可以用代码修改地址栏的URL而不刷新页

Angular之所以被称为单页面应用，就是因为我们在改变浏览器URL的时候， 不触发刷新当前页面的行为，我们看到的所有的界面，其实是在一个主URL中。 这个功能（功能？现象？表现？随便吧！）就是通过路由实现的。 下面我们先简单的看一个关于路由的例子。 当我们点击上面的导航栏时，当前页面的地址会变成类似http://localhost:63342/test.html#about 尾部带的

和angular1一样angular4要是有http库，用来调用外包的API。 为了不使发起的请求，导致当前进入等待而没有响应，HTTP请求都是异步的。 这个之前我们聊过类似的，JavaScript中的异步处理方法。 1、callback回调的方式。 2、promise，这个可以参考我很早之前的一篇博客。http://blog.youkuaiyun.com/onil_chen/article/detai

这节课我们讲解如何使用bootstrap 4 编写响应式布局。 参考图我们还是参照Angular中文社区http://www.angularjs.cn/ 图中标注红色的部分，我自己不是很喜欢，所以做了一点小改动。 他这里也没有做响应式布局，所以样式就不抄他的，我们自己重写。 首先我们先简要的分析一下这个navbar。 整体是一个黑色的navbar。 参考代码：<nav class="

讲了四节了，一行代码都没有敲，虽说磨刀不误砍柴工，但我们也是时候，上场砍点啥啦。 今天我们就来编写我们的第一个组件，效果图如下。 首先我们使用angular-cli的generate命令来帮我们自动化创建组件。 $ ng generate component site_status 通过分析效果图我们知道了我们有8个数据需要绑定到页面上。 我们先打开src\app\site-sta

首先我们打开我们新建的项目。 我们先来看一下新建项目的目录结构。查看项目目录结构src文件夹你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。 根目录src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。 运

这节课，我们将要了解的是如何使用VS Code安装Chrome扩展对Angular进行调试。步骤一：确保环境确保将谷歌浏览器安装在其默认位置。 确保在VS Code中安装了插件：Debugger for Chrome 使用npm在全局范围内安装了angular/cli （我们第一节课中就讲过这个了，你也可以在确认一下。Windows用户快捷键win+r ，输入 ng -v） 使用angular

上一节课我们已经创建了一个新的项目， 这节课我们了解一下如何创建码云（https://git.oschina.net/）管理我们的代码。 在工作中，不管是自己一个人开发，还是团队开发，都会涉及到版本控制。 比较常用的版本控制软件有svn和git。 （如果你会使用git，会版本控制，那你就不需要在往下看了。git clone这个地址https://git.oschina.net/xiaohuO

步骤一：安装开发环境在开始学习angular之前，我们要先设置好开发环境。 一般现在的的开发环境基本上都是nodejs， 因为基本上都有使用了nodejs的npm管理和安装依赖包。 如果你的电脑上已经安装过nodejs，那你可以现在命里行中输入node -v 和 npm -v查看他们的版本。 angular 要求node 6.9.x 和 npm 3.x.x 以上的版本。 如果你电脑上的