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
login
register
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
流程
扩展语法
编写html
组件类
***.component.ts
服务类
***.service.ts
发布
根模块
import
modules
NgModule
core
BrowserModule
platform-browser
FormsModule
forms
HttpModule
http
component
{MyComponent} from 'url'
{MyService} from 'url'
providers:
services
imports:
declaration:
components
pipes
directives
根组件
router-outlet
路由器
path:
component:
canActivate:
guard.service.ts
shortcut:a-guard-can-activate
Injectable
router
@Injectable
export
myGuard
constructor(){}
children:
组件
框架
创建
声明
使用
shortcut
a-component
Component
@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\"
自定义
目的：个性化
Directive
ElementRef
Input
@Directive
selector:'[test]'
TestDirective
constructor(myER:ElementRef)
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
Pipe
PipeTransform
@Pipe
name:'myPipe'
TestPipe
transform(value:any...args:any):any{}
服务
export
TestService
fn(){}
constructor
（private myTS:TestService）
fn
this.myTS.***
http Service
shortcut: a-s-h
{Injectable} from '@angular/core'
{Observable} from 'rxjs/Observble'
'rxjs/add/operator/map'
'rxjs/add/operator/catch'
decorator
@Injectable()
class MyHttpService
constructor(private http:Http){}
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()sonName=\"\";
this.sonName
events up
绑定
function
handleEvent(msg:string){}
(toFatherEvent)=\"handleEvent($event)\"
触发
Output
EventEmmiter
@Output()toFatherEvent=new EventEmitter
ngOnInit(){}
handleClick(){this.toFatherEvent.emit('123')}
html/template
button (click)='handleClick()'
本地变量
mySon.
ViewChild
ViewChild from core
@ViewChild('mySon')mySon=null;
路由
url-组件
映射关系
步骤
根组件/父组件
容器
创建app.router.ts
Router
Shortcut:a-r
{NgModule} from '@angular/core'
const routes
@NgModule
imports:[RouterModule.forRoot(routes)]
Initialize the router and start it listening for browser location changes
exports:[RouterModule]
declarations:[AppComponent]
bootstrap:[AppComponent]
class AppRoutingModule{}
配置
验证
导航
url修改
js
跳转
import Router
myRouter:Router
this.myRouter.navigatedByUrl('/login')
前进后退
Location
myLC:Location
this.myLC.back/forward()
routerLink='/login'
传参
明确发收
配置接收方
路由地址
path:'/detail'--path:'detail/:id'
接收数据
ActivatedRoute from router
private myAR:ActivatedRoute
this.myAR.params.subscribe(()={})
this.myRouter.navigateByUrl('/detail/123')
this.myRouter.navigateByUrl('/detail/'+myId)
routerLink
routetLink=\"/detail/123\"
[routerLink]=\"'/detail/'+myId\"
嵌套
父组件
追加容器
路由设置
路由守卫
目的
保护访问
方法
创建守卫服务
Injectable from core
export DemoGuard
调用
0 条评论
回复 删除
下一页
