angular笔记

2021-03-10 09:44:51   0  举报





AI智能生成

Angular是一款由Google开发的开源Web应用框架，它让开发者能够构建出高效、复杂的单页应用。Angular的核心理念是数据驱动和组件化，通过双向数据绑定和指令等特性，使得开发者可以更加专注于业务逻辑的实现。Angular还提供了丰富的工具和库，如依赖注入、路由、HTTP服务等，帮助开发者快速构建出功能完善的应用。此外，Angular还有一个活跃的社区，提供了大量的教程、示例和第三方插件，使得学习和使用Angular变得更加容易。

angular

学习笔记

前端框架

软件开发

前端开发

作者其他创作

大纲/内容

结构

e2e

node-modules

src

app

utility

header

页头

footer

页尾

notFound

service

网络请求

carousel

轮播插件

index

userCenter

list

detail

cart

orderConfirm

app.component.ts

app.module.ts

imports

declarations

providers

app.router.ts

assets

css

fonts

img

index.html

main.js

styles.css

others

package.json

others

流程

扩展语法

编写html

组件类

***.component.ts

服务类

***.service.ts

发布

根模块

app.module.ts

import

modules

NgModule

core

BrowserModule

platform-browser

FormsModule

forms

HttpModule

http

component

{MyComponent} from 'url'

service

{MyService} from 'url'

providers:

services

imports:

modules

declaration:

components

pipes

directives

根组件

app.component.ts

router-outlet

路由器

app.router.ts

path:

component:

canActivate:

guard.service.ts

shortcut:a-guard-can-activate

import

Injectable

core

ActivatedRoutSnapshot, CanActivate, RouterStateSnapshot

router

@Injectable

export

myGuard

constructor(){}

canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){ return false/true}

children:

组件

框架

创建

声明

使用

组件

shortcut

a-component

import

Component

core

@Component

selector

myComponent

template/templateUrl

this is my component

./myComponent.component.html

styleUrls

assets/css/bootstrap.css

指令

内置

循环指令

*ngFor="let tmp of list;let myIndex=index"

选择指令

*ngIf="expression"

绑定指令

事件绑定

(click)="handleClick()"

属性绑定

[src]=""

数据绑定

[(ngModel)]="uname"

自定义

目的：个性化

创建

import

Directive

ElementRef

Input

@Directive

selector:'[test]'

export

TestDirective

constructor(myER:ElementRef)

声明

app.module.ts

import {TestDirective}

declarations[TestDirective]

使用

进阶

调用元素

myER.nativeElement

输入

@input():test="";

this.test

调用时参数

输出

管道

本质

有参数

有返回值

一种方法

筛选

过滤

格式化

语法

内置

uppercase

lowercase

date

'yy-MM-dd hh-mm-ss'

number

'3:2-2'

slice

start:end

自定义

创建

import

Pipe

PipeTransform

@Pipe

name:'myPipe'

export

TestPipe

transform(value:any...args:any):any{}

声明

使用

服务

创建

import

Injectable

@Injectable

export

TestService

fn(){}

声明

根模块

使用

组件

import

TestService

constructor

（private myTS:TestService）

this.myTS.***

http Service

shortcut: a-s-h

import

{Injectable} from '@angular/core'

{Http,Response} from '@angular/http'

{Observable} from 'rxjs/Observble'

'rxjs/add/operator/map'

'rxjs/add/operator/catch'

decorator

@Injectable()

export

class MyHttpService

constructor(private http:Http){}

sendRequest(url:string){ return this.http.get(url,{withCredentials:true}) .map((response:Response)=>response.json()) }

shortcut: a-http-get

prepare foundations cross-domain problem

service side

init.php

header('Access-Control-Allow-Origin:http://localhost:3000')

header('Access-Control-Allow-Credentials:true')

session_data.php

require_once('../init.php')

通信

props down

发送

接收

import

Input

@Input()sonName="";

this.sonName

events up

绑定

function

handleEvent(msg:string){}

事件绑定

(toFatherEvent)="handleEvent($event)"

触发

import

Output

EventEmmiter

export

@Output()toFatherEvent=new EventEmitter

ngOnInit(){}

handleClick(){ this.toFatherEvent.emit('123') }

使用

html/template

button (click)='handleClick()'

本地变量

mySon.

ViewChild

import

ViewChild from core

@ViewChild('mySon')mySon=null;

路由

本质

url-组件

映射关系

步骤

根组件/父组件

容器

router-outlet

创建app.router.ts

Router

Shortcut:a-r

import

{NgModule} from '@angular/core'

{Routes,RouterModule} from '@angular/router'

const routes

Routes=[{path:'',component:UserDefineComponent}]

decorator

@NgModule

imports:[RouterModule.forRoot(routes)]

Initialize the router and start it listening for browser location changes

exports:[RouterModule]

declarations:[AppComponent]

bootstrap:[AppComponent]

export

class AppRoutingModule{}

声明

配置

验证

导航

url修改

跳转

import Router

constructor

myRouter:Router

this.myRouter.navigatedByUrl('/login')

前进后退

import

Location

constructor

myLC:Location

this.myLC.back/forward()

routerLink='/login'

传参

明确发收

配置接收方

路由地址

path:'/detail' --path:'detail/:id'

接收数据

import

ActivatedRoute from router

constructor

private myAR:ActivatedRoute

this.myAR.params.subscribe(()=>{})

发送

this.myRouter.navigateByUrl('/detail/123')

this.myRouter.navigateByUrl('/detail/'+myId)

routerLink

routetLink="/detail/123"

[routerLink]="'/detail/'+myId"

嵌套

父组件

追加容器

router-outlet

路由设置

path:,component:'父组件',children:[]

路由守卫

目的

保护访问

方法

创建守卫服务

import

Injectable from core

ActivatedRouteSnapshot,CanActivate,RouterStateSnapshot from router

export DemoGuard

canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot){return true/false}

调用

app.router.ts

path:'',component:'',canActivate:[DemoGuard]

 收藏

立即使用

市场调研与分析思路思维导图

 收藏

立即使用

如何才能建立创新思维

 收藏

立即使用

公司组织架构图

 收藏

立即使用

新年给数百万英国家庭带来财务问题

yeah青没素

职业：硕士

去主页





0 条评论

下一页

为你推荐

查看更多

