IT营Angular5 Angular4.X入门实战视频教程

01 Angular4.x介绍以及和vue、react对比# \3 I7 _1 n; @

一、Angular4.x介绍？ 8 k2 K( E' Y( {% s: Q0 e1 L
二、TypeScript介绍 2 ]3 q9 @: g0 J8 M y+ ~
三、Angular4.x能干什么？
四、Angular4.x 、Vue2.x、React 15.x.x对比 . o- x. h+ z+ m5 {/ q: v1 E6 P
五、Angular4.x 开发工具介绍 & h- f8 D( v6 B: j( _7 O% e
% n R) c0 P5 B' Y' G; _
02 Angular4.x 安装使用目录结构以及启动分析
0 B# F2 d7 v' z' j7 T J

每天都会分享各大视频资源站资源，大家一起学习

qq群：377215114

一、安装最新版本的nodejs
二、全局安装 Angular CLI 脚手架工具(只需要安装一次) ( ^: \; d6 S0 e6 d0 S; Y
三、创建项目
四、目录结构分析
五、Hello Angular 4.0 以及 app.module.ts、组件分析
. d$ E+ C# j9 z! @: |
1 i) U0 {, B( t. W8 R2 |7 [7 e
03 Angular4.x 创建组件 、Angular4绑定数据、Angular4绑定属性、Angular4数据循环(上)! u& O% L" s' Z9 e# W% ` N; \( @* {
一、创建angualr组件 w# F7 z. t+ c8 a, g: T! N
二、angualr4.0绑定数据
三、数据循环 *ngFor ( L" p- N: D/ U% f- W
四、条件判断 *ngIf ! v* p5 T. |* F) A( H
五、执行事件 (click)=”getData()” * q. u+ F0 G; e7 y
六、绑定属性
七、表单处理 1 Q- c9 L, C0 e$ h. N
八、双向数据绑定 1 N+ e5 d+ f2 B/ f2 t
九、Todolist功能" _4 K4 G: t# n+ \; u+ O

04 Angular4.x组件 声明属性 、Angular4绑定数据、Angular4 绑定属性 、Angular4条件判断、、Angular4事件、、Angular4表单处理、、Angular4双向数据绑定(中)) C2 O- A- A0 O& ^ K4 c& G7 D( F
8 ~, S" q' `2 M* h- M j- [) l
一、创建angualr组件 ) d0 C4 w9 Y: l8 M$ J
二、angualr4.0绑定数据 4 s& M& P# V, c: `
三、数据循环 *ngFor
四、条件判断 *ngIf $ x2 C* W# u6 x) S4 A" u' M
五、执行事件 (click)=”getData()” 8 Q+ u: |5 F- b) r8 P3 c7 a8 ^ m
六、绑定属性 % @( ]& W9 i! }2 e9 Z# X
七、表单处理 # w5 e, C% m: h9 c* U1 p0 J
八、双向数据绑定
九、Todolist功能

05 Angular4.x组件 声明属性 绑定数据 绑定属性 数据循环项目 toDolist(下)

( o. i7 ?9 a9 N, p C) g: [
一、Angular4 Todolist功能

! ?6 w/ y9 q& C1 z
06 Angular4.x中的服务% ]; C$ i! N/ _+ z8 c

一、Angualr CLI创建服务
二、创建服务命令
三、app.module.ts里面引入创建的服务 # d) W6 b" r4 H x
四、使用的页面引入服务，注册服务

07 Angular4.x请求数据(上)

Z; t7 ^- F3 a) M
一、app.module.ts注册HTTP JSONP服务 6 z( k/ J+ p0 A; L
二、通过 Http、Jsonp请求数据、不用RxJs 0 a9 V1 R* l8 e& r$ m( j
三、通过 Http、Jsonp请求数据、使用RxJs

08 Angular4.x请求数据(下)4 x0 U, J( J! }7 {

一、app.module.ts注册HTTP JSONP服务 / \. C. c7 p1 f% u$ _
二、通过 Http、Jsonp请求数据、不用RxJs
三、通过 Http、Jsonp请求数据、使用RxJs
7 m6 L; I9 t7 x7 f& ]- }; Y4 w" L
09 Angular4.x父子组件的传值2 y* d3 v. T& d- z& v9 L

一、父组件给子组件传值 -@Input
二、父子组件传值的方式让子组件执行父组件的方法
三、子组件通过@Output执行父组件的方法 " H( c9 h0 K8 n' E) f8 W. r/ }
四、父组件通过局部变量获取子组件的引用 ，主动获取子组件的数据和方法（一）
五、父组件通过ViewChild主动获取子组件的数据和方法
7 a5 }6 n+ ^* g0 v- b! M3 ]
10 Angular4.x 中的路由父子路由1 J$ j) H1 ~# m2 X3 d. j

一、父组件给子组件传值 -@Input ) T/ v9 @. x9 O
二、父子组件传值的方式让子组件执行父组件的方法 " j. u, i& }& `* ^; K
三、子组件通过@Output执行父组件的方法
四、父组件通过局部变量获取子组件的引用 ，主动获取子组件的数据和方法（一）
五、父组件通过ViewChild主动获取子组件的数据和方法+ {1 n0 [9 l& @. x% [- B ~0 V8 ]' l% B6 `
5 b( p8 P0 u; {7 D/ g+ v4 v
11 angular4.x 中的路由 --routing生成路由 配置路由 路由重定向（1）

一、Angular命令创建一个配置好路由的项目 0 n8 L9 _/ b; J
二、Angula4.x在已有的项目中配置路由
三、Angular routerLink页面跳转 默认跳转路由 5 j6 m) N$ }+ Q! a
四、Angular routerLinkActive设置routerLink默认选中路由
五、路由的动态传值
六、路由的js跳转 4 e% M7 Y2 F" D; s6 q: e
七、路由的js跳转 get传值 + K7 \* o* h1 ~+ ~) r+ s( w& d
八、父子路由
: C0 j, v6 S; p1 O$ j
12 angular4.x 中已经存在的项目配置路由、路由选中、动态路由（2）3 n" \0 W/ ~+ X/ A

一、Angular命令创建一个配置好路由的项目 2 r4 U# [: Q( X" F, d0 v, F6 p
二、Angula4.x在已有的项目中配置路由 . _" O+ R+ E) H: y/ K
三、Angular routerLink页面跳转 默认跳转路由
四、Angular routerLinkActive设置routerLink默认选中路由
五、路由的动态传值
六、路由的js跳转 ; k1 Y! ]' q" u% u4 m
七、路由的js跳转 get传值
八、父子路由

13 angular4.x 中路由的js跳转（3)

. k3 \, D$ L8 ~9 y- Y x

14 angular4.x中路由的Get传值和获取传值（4）

( Z5 L" g" J# B4 n- _

- P b. o; y" n: b7 y
15 angular4.x路由的嵌套 父子路由（5）

一、Angular4.x路由嵌套 : c' Y2 B: X- k
二、Angula4.x路由嵌套后台管理系统框架搭建

每天都会分享各大视频资源站资源，大家一起学习

qq群：377215114