Angular 入门

• Angular介绍
• Angular安装、创建项目、目录结构、组件、服务
• 创建组件、绑定数据、绑定属性、数据循环、条件判断、事件、表单处理、双向数据绑定
  - 1. 创建组件
  - 2. 绑定数据
  - 3. 数据循环 *ngFor
  - 4. 条件判断
  - 5. 执行事件
  - 6. 绑定属性
  - 7. 表单处理
  - 8. 双向数据绑定
• get post jsonp请求数据
  - app.module.ts注册HTPP JSONP服务
• 创建使用服务
  - 创建服务
  - app.moduel.ts引入服务
  - 使用页面引入、注册服务
  - 使用
• 父子组件传值 @Input @Output @ViewChild
• 路由

Angular介绍

开源Web前端框架，被Google收购。

Angular 1.X 和 Angular 2.X 系列不一样。同时维护

作用：

• APP和微信上的单页面应用

• 借助Ionic、React Native开发跨平台的原生APP

• 可以开发桌面应用，创建能在桌面环境下安装的应用，横跨Mac、Windows和Linu

x

特点：

• 组件化

• 模块化

• 开发单页面应用
  

开发工具:Visual Studio Code

Angular安装、创建项目、目录结构、组件、服务

1. 安装最新版Node.js；安装成功后，命令提示符下输入校验：

C:\Users\reid>node -v

v8.11.1

C:\Users\reid>npm -v

5.6.0

2. 全局安装Angular CLI

npm install -g @angular/cli

--国内angular 镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g @angular/cli

3. 创建项目

*   *   [Angular介绍](#angular介绍)
    *   [Angular安装、创建项目、目录结构、组件、服务](#angular安装-创建项目-目录结构-组件-服务)
    *   [创建组件、绑定数据、绑定属性、数据循环、条件判断、事件、表单处理、双向数据绑定](#创建组件-绑定数据-绑定属性-数据循环-条件判断-事件-表单处理-双向数据绑定)
        *   *   [1\. 创建组件](#1-创建组件)
            *   [2\. 绑定数据](#2-绑定数据)
            *   [3\. 数据循环 *ngFor](#3-数据循环-ngfor)
            *   [4\. 条件判断](#4-条件判断)
            *   [5\. 执行事件](#5-执行事件)
            *   [6\. 绑定属性](#6-绑定属性)
            *   [7\. 表单处理](#7-表单处理)
            *   [8\. 双向数据绑定](#8-双向数据绑定)
    *   [get post jsonp请求数据](#get-post-jsonp请求数据)
        *   *   [app.module.ts注册HTPP JSONP服务](#appmodulets注册htpp-jsonp服务)
    *   [创建使用服务](#创建使用服务)
        *   *   *   [创建服务](#创建服务)
                *   [app.moduel.ts引入服务](#appmoduelts引入服务)
                *   [使用页面引入、注册服务](#使用页面引入-注册服务)
                *   [使用](#使用)
    *   [父子组件传值 @Input @Output @ViewChild](#父子组件传值-input-output-viewchild)
    *   [路由](#路由)



## Angular介绍
开源Web前端框架，被Google收购。
Angular 1.X 和 Angular 2.X 系列不一样。同时维护 
作用：
- APP和微信上的单页面应用
- 借助Ionic、React Native开发跨平台的原生APP
- 可以开发桌面应用，创建能在桌面环境下安装的应用，横跨Mac、Windows和Linux
特点：
- 组件化
- 模块化
- 开发单页面应用 
开发工具:Visual Studio Code

## Angular安装、创建项目、目录结构、组件、服务
1. 安装最新版Node.js；安装成功后，命令提示符下输入校验：

C:\Users\reid>node -v
v8.11.1

C:\Users\reid>npm -v
5.6.0

2. 全局安装Angular CLI

npm install -g @angular/cli
--国内angular 镜像安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @angular/cli

3. 创建项目

ng new my-app //创建项目
cd my-app
cnpm install //安装依赖
ng serve --open //启动服务

4. 项目目录结构分析
    1. e2e 端到端的测试文件
    2. node_modules Node.js创建了该文件夹，并且把package.json中列举的所有第三方模块都放在该文件夹下。
    3. src  项目所有的文件都得放在SRC下面
    4. .editorconfig    编辑器看的简单的配置文件，确保每个人都有基本的编辑器配置
    5. .gitignore   Git配置文件，确保有些文件不会提交到Git中
    6. angular.json 
    7. my-app.code-workspace
    8. package-lock.json
    9. package.json npm 配置文件，其中列出了项目使用到的第三方依赖包。 你还可以在这里添加自己的自定义脚本。
    10. README.md   项目基础文件
    11. tsconfig.json   TypeScript编译器的基础配置
    12. tslint.json 给 TSLint 和 Codelyzer 用的配置信息，当运行 `ng lint` 时会用到。Lint 功能可以帮你保持代码风格的统一
    

    1. SRC目录分析
        1. app/app.component.{ts,html,css,spec.ts} 组件 使用 HTML 模板、 CSS 样式和单元测试定义 AppComponent 组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。
        2. app/app.module.ts 定义 AppModule，这个根模块会告诉Angular 如何组装该应用。 目前，它只声明了 AppComponent。稍后它还会声明更多组件。
        3. assets/* 静态资源 这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
        4. environments/* 这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。比如你可能在产品环境中使用不同的 API端点地址，或使用不同的统计 Token 参数。甚至使用一些模拟服务。 所有这些， CLI都替你考虑到了。
        5. favicon.ico 每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。index.html 这是别人访问你的网站是看到的主页面的HTML 文件。大多数情况下你都不用编辑它。 在构建应用时， CLI 会自动把所有 js和 css 文件添加进去，所以你不必在这里手动添加任何