- 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 系列不一样。同时维护 <br />
作用：<br />
APP和微信上的单页面应用
借助Ionic、React Native开发跨平台的原生APP
可以开发桌面应用，创建能在桌面环境下安装的应用，横跨Mac、Windows和Linu
x
<br />
特点：
组件化
模块化
开发单页面应用 <br />
开发工具: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. 创建项目
<article class="markdown-body" id="preview" data-open-title="Hide Preview" data-closed-title="Show Preview" style="text-size-adjust: 100%; color: rgb(36, 41, 46); font-family: -apple-system, BlinkMacSystemFont, 微软雅黑, "PingFang SC", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", SimSun, 宋体, Heiti, 黑体, sans-serif; font-size: 14px; line-height: 1.5; word-wrap: break-word; min-width: 256px; max-width: 978px; margin: 0px auto; padding: 20px 20px 602px; tab-size: 4;">
* * [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)
* [路由](#路由)
</article>
## 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 功能可以帮你保持代码风格的统一
<br />
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 文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。
6. main.ts 这是应用的主要入口点。 使用 JIT compiler编译器编译本应用，并启动应用的根模块AppModule，使其运行在浏览器中。 你还可以使用 AOT compiler 编译器，而不用修改任何代码 —— 只要给 ng build 或 ngserve 传入 --aot 参数就可以了。
7. polyfills.ts 不同的浏览器对 Web 标准的支持程度也不同。 填充库（polyfill）能帮我们把这些不同点进行标准化。 你只要使用core-js 和 zone.js 通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。
8. styles.css 这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
9. test.ts 这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
10. tsconfig.{app|spec}.json TypeScript 编译器的配置文件。
11. tsconfig.app.json 是为 Angular 应用准备的，而 tsconfig.spec.json 是为单元测试准备的。
13. AppModule组件分析
app.module.ts
import { AppComponent } from './app.component'; /*根组件*/
/*@NgModule 装饰器将 AppModule 标记为 Angular 模块类（也叫 NgModule 类）。
@NgModule 接受一个元数据对象，告诉 Angular 如何编译和启动应用。 */
@NgModule({
declarations: [ /*引入当前项目运行的的组件*/
AppComponent
],
imports: [ /*引入当前模块运行依赖的其他模块*/
BrowserModule,
FormsModule,
HttpModule
],
providers: [], /*定义的服务 回头放在这个里面*/
bootstrap: [AppComponent] /* 指定应用的主视图（称为根组件） 通过引导根 AppModule 来启动
应用 ，这里一般写的是根组件*/
})
/*根模块不需要导出任何东西， 因为其它组件不需要导入根模块。 但是一定要写*/
export class AppModule { }
## 创建组件、绑定数据、绑定属性、数据循环、条件判断、事件、表单处理、双向数据绑定
#### 1. 创建组件
Scaffold | Usage
---|---
componnet | `ng g component my-new-component 指定目录创建 ： ng g component components/Footer`
Directive | `ng g directive my-new-directive`
Pipe |`ng g pipe my-new-pipe`
Service|`ng g service my-new-service`
Class|`ng g class my-new-class`
Guard|`ng g guard my-new-guard`
Interface|`ng g interface my-new-interface`
Enum|`ng g enum my-new-enum`
Mudule|`ng g module my-module`
#### 2. 绑定数据
{{title}}
this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>
<div [innerHTML]="h"></div>
#### 3. 数据循环 *ngFor
<ul>
<li *ngFor="let item of list">
{{item}}
</li>
</ul>
<ul>
<li *ngFor="let item of list;let i = index;">
{{item}} --{{i}}
</li>
</ul>
<ul>
<li template="ngFor let item of list">
{{item}}
</li>
</ul>
#### 4. 条件判断
<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>
<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p>
#### 5. 执行事件
<button class="button" (click)="getData()">
点击按钮触发事件
</button>
<button class="button" (click)="setData()">
点击按钮设置数据
</button>
getData(){ /自定义方法获取数据/
//获取
alert(this.msg);
}
setData(){
//设置值this.msg='这是设置的值';
}
#### 6. 绑定属性
动态设置id 和title
<div [id]="id" [title]="msg">调试工具看看我的属性</div>
#### 7. 表单处理
<input type="text" (keyup)="keyUpFn($event)"/>
keyUpFn(e){
console.log(e)
}
#### 8. 双向数据绑定
需要引入:FormsModule
修改数据直接相互影响
<input [(ngModel)]="inputValue">
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<input type="text" [(ngModel)]="inputValue"/> --双向数绑定
{{inputValue}} --读取值
## get post jsonp请求数据
#### app.module.ts注册HTPP JSONP服务
1. 引入HttpModule、JsonpModule
import { HttpModule, JsonpModule } from '@angular/http'
2. HttpModule 、 JsonpModule 依赖注入
@NgModule({
declarations: [
AppComponent,
HomeComponent,
NewsComponent,
NewscontentComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
AppRoutingModule
],
providers: [StorageService,NewsService],
bootstrap: [AppComponent]
})
export class AppModule { }
3. 通过Http、Jsonp请求数据GET
--需要请求的页面引入
import {Http,Jsonp} from "@angular/http";
--构造方法
constructor(private http:Http,private jsonp:Jsonp) { }
--请求方法 HTTP GET
this.http.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2").subscribe(
function(data){
console.log(data);
},function(err){
console.log('失败');
}
);
--请求方法 JSONP GET 增加&callback=JSONP_CALLBACK参数
this.jsonp.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2&callback=JSONP_CALLBACK").subscribe(
function(data){
console.log(data);
},function(err){
console.log('失败');
}
);
4. 通过Http、Jsonp请求数据POST
-- 引入Http、Headers
import {Http,Jsonp,Headers} from "@angular/http";
-- 实例化Headers
private headers = new Headers({'Content-Type': 'application/json'});
-- 提交数据
this.http.post('http://localhost:8008/api/test',
JSON.stringify({username: 'admin'}),
{headers:this.headers})
// .toPromise()
.subscribe(function(res){
console.log(res.json());
});
5. 使用RxJS
-- 引入Http 、 Jsonp、 RxJs 模块
import {Http,Jsonp} from "@angular/http";
import {Observable} from "rxjs";
import "rxjs/Rx";
--构造函数内声明
constructor(private http:Http,private jsonp:Jsonp) { }
--get 请求
this.http.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2").map(res => res.json())
.subscribe(
function(data){
console.log(data);
}
);
--Jsonp请求&callback=JSONP_CALLBACK
this.jsonp.get("https://services.odata.org/v4/(S(hxv25dolqxu3jayczcr4h0rt))/TripPinServiceRW/People?$top=2&callback=JSONP_CALLBACK")
.map(res => res.json()).subscribe(
function(data){
console.log(data);
}
);
http.get 方法中返回一个 Observable 对象，我们之后调用 RxJS 的 map 操作符对返回的数据做处理。
## 创建使用服务
##### 创建服务
ng g service my-new-service
创建到指定目录下面
ng g service services/storage
##### app.moduel.ts引入服务
--app.module.ts
import { StorageService } from './services/storage.service';
-- NgModule 里面的 providers 里面依赖注入服务
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NewsComponent,
TodolistComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [StorageService],
bootstrap: [AppComponent]
})
export class AppModule { }
##### 使用页面引入、注册服务
import { StorageService } from '../../services/storage.service';
constructor(private storage: StorageService) {
}
##### 使用
addData(){
// alert(this.username);
this.list.push(this.username);
this.storage.set('todolist',this.list);
}
removerData(key){
console.log(key);
this.list.splice(key,1);
this.storage.set('todolist',this.list);
}
## 父子组件传值 @Input @Output @ViewChild
1. 父组件给子组件传值
父组件调用子组件的时候传入数据
<app-header [msg]="msg"></app-header>
- 子组件引入 Input 模块
import { Component, OnInit ,Input } from '@angular/core'; - 子组件中 @Input 接收父组件传过来的数据export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}
} - 子组件中使用父组件的数据
<h2>这是头部组件--{{msg}}</h2>
2. 父组件传值的方式让子组件执行父组件方法
将方法名传入，后执行。
- 父组件定义方法
run(){
alert('这是父组件的 run 方法');
}
2．调用子组件传入当前方法
<app-header [msg]="msg" [run]="run"></app-header>3. --子组件接收父组件传过来的方法
--引入模块
import { Component, OnInit ,Input } from '@angular/core';
--定义接收变量
@Input() run:any;
--完整代码
export class HeaderComponent implements OnInit {
@Input() msg:string
@Input() run:any;
constructor() { }
} - 子组件使用父组件的方法。
export class HeaderComponent implements OnInit {
@Input() msg:string;
@Input() run:any;
constructor() { }
ngOnInit() {
this.run(); /子组件调用父组件的 run 方法/
}
}
3. 子组件通过@Output执行父组件方法
EventEmitter:事件触发器 emit:发出
- 子组件引入 Output 和 EventEmitter
import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';
2.子组件中实例化 EventEmitter
@Output() private outer=new EventEmitter<string>();
/用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量/
- 子组件通过 EventEmitter 对象 outer 实例广播数据
sendParent(){
// alert('zhixing');
this.outer.emit('msg from child')
}
4.父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer
<app-header (outer)="runParent($event)"></app-header>
将 outer 与父组件方法 runParent 绑定，执行outer.emit即执行runParent
5.父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据//接收子组件传递过来的数据
runParent(msg:string){
alert(msg);
}
4. 父组件通过局部变量获取子组件的引用，主动获取子组件的数据和方法（一）
- 定义 footer 组件
export class FooterComponent implements OnInit {
public msg:string;
constructor() {
}
ngOnInit() {
}
footerRun(){
alert('这是 footer 子组件的 Run 方法');
}
} - 父组件调用子组件的时候给子组件起个名字
<app-footer #footer></app-footer>3. 直接获取执行子组件的方法
<button (click)='footer.footerRun()'>获取子组件的数据</button>
5. 父组件通过 ViewChild 主动获取子组件的数据和方法
1.调用子组件给子组件定义一个名称
<app-footer #footerChild></app-footer>
- 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core'; - ViewChild 和页面引入的子组件关联起来。别名一致
@ViewChild('footerChild') footer;
4.调用子组件
run(){
this.footer.footerRun();
}
## 路由
1. 创建一个配置好路由的项目
1.创建项目
ng new demo02 –-routing
- 创建需要的组件
ng g component home
ng g component news
ng g component newscontent - 找到 app-routing.module.ts 配置路由
引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';
配置路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',pathMatch: 'full'
}
]; - 找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由
<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
2. 给没有路由的项目配置路由
新建组件
ng g component home
ng g component news
ng g component newscontent新建 app-routing.module.ts ,app-routing.module.ts 中引入模块
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';app-routing.module.ts 中引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent/newscontent.component';app-routing.module.ts 中配置组件
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];app-routing.module.ts 中配置模块 暴露模块
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }在 app.module.ts 引入刚才定义的路由
import { AppRoutingModule } from './app-routing.module';
7.app.module.ts 里面的 import 注册这个路由模块
imports: [
BrowserModule,
AppRoutingModule
]
8.找到 app.component.html 根组件模板，配置 router-outlet 显示动态加载的路由<h1>
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
</h1>
<router-outlet></router-outlet>
3. Angular routerLink 页面跳转 默认跳转路由
<a routerLink="/home">首页</a>
<a routerLink="/news">新闻</a>
//刚进来路由为空跳转的路由
{
path:'',
redirectTo:'home',
pathMatch:"full"
}
//匹配不到路由的时候加载的组件 或者跳转的路由
{
path: '', /任意的路由/
// component:HomeComponent
redirectTo:'home'
}
4. Angular routerLinkActive 设置 routerLink 选中样式
<h1>
<a routerLink="/home" routerLinkActive="active">首页</a>
<a routerLink="/news" routerLinkActive="active">新闻</a>
</h1>
-- css 样式 类
.active{
color:red;
}
5. 路由的动态传值.
1.配置动态路由
const routes: Routes = [
{path: 'home', component: HomeComponent},
{path: 'news', component: NewsComponent},
{path: 'newscontent/:id', component: NewscontentComponent},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
];
2.获取动态路由的值
import { Router, ActivatedRoute, Params } from '@angular/router';
constructor( private route: ActivatedRoute) {}
ngOnInit() {
console.log(this.route.params);//
this.route.params.subscribe(data=>this.id=data.id);
}
6. 路由的 js 跳转.
- 引入
import { Router } from '@angular/router';
2.初始化
export class HomeComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}
goNews(){
// this.router.navigate(['/news', hero.id]);
this.router.navigate(['/news']);
}
}
3.路由跳转
this.router.navigate(['/news', hero.id]);
7. 路由的 js 跳转 get 传值
- 引入 NavigationExtras
import { Router ,NavigationExtras,ActivatedRoute } from '@angular/router';
2.定义一个 goNewsContent 方法执行跳转， 用 NavigationExtras 配置传参。
goNewsContent {
let navigationExtras: NavigationExtras = {
queryParams: { 'session_id': '123' },
fragment: 'anchor'
};
this.router.navigate(['/news'],navigationExtras);
}
3.获取 get 传值
constructor(private route: ActivatedRoute) {
console.log(this.route.queryParams);
}
8. 父子路由
创建组件引入组件
import { NewsaddComponent } from './components/newsadd/newsadd.component';
import { NewslistComponent } from './components/newslist/newslist.component';
- 配置路由
{
path: 'news',
component:NewsComponent,
children: [
{
path:'newslist',
component:NewslistComponent
},
{
path:'newsadd',
component:NewsaddComponent
}
]
} - 父组件中定义 router-outlet
<router-outlet></router-outlet>
