本文共 9472 字，大约阅读时间需要 31 分钟。

Angular

1.Angular

简单对比三大框架

2.环境搭建

2.1安装node.js、npm

npm install -g cnpm --registry=https://registry.npm.taobao.org # cnpm可以更快下载包，推荐安装

2.2安装脚手架

npm install -g @angular/cli

2.3创建项目

ng new demo

2.4编译打开运行

ng serve --open

2.5项目结构介绍

• src
  • app：组件和根模块
  • karma.config.js：端到端测试文件
  • polyfills.js：填充库，需要添加 (window as any).global = window

// app.module.ts// 这个文件时angular的根模块，告诉angular如何组装应用import {
    BrowserModule } from '@angular/platform-browser'; // 浏览器解析模块import {
    NgModule } from '@angular/core'; // angular核心模块import {
    AppComponent } from './app.component'; // 根组件// NgModule装饰器，接受一个对象，告诉angular如何编译和启动应用@NgModule({
     declarations: [ // 配置当前模块运行的组件     AppComponent // 根组件  ],  imports: [    BrowserModule // 当前项目依赖的其他模块  ],  providers: [],// 配置当前项目所需要的其他服务  bootstrap: [AppComponent] // 指定应用的主视图(根组件)，通过引导根AppModule来启动应用，一般是根组件})// 不需要暴露任何东西，因为没有模块引用根组件export class AppModule {
    }

// app.component.ts// 引入核心模块的componentimport {
    Component } from '@angular/core';@Component({
     selector: 'app-root', // 组件的名称  templateUrl: './app.component.html', // html  styleUrls: ['./app.component.scss'] // css})export class AppComponent {
     title = 'demo1'; // 暴露根组件}

2.6创建自定义组件

会在app/components/目录下创建news文件夹，包含组件的HTML、style、ts等文件

ng g component components/news

// app.module.tsimport {
    NewsComponent } from './components/news/news.component' // 引入自定义组件@NgModule({
     declarations: [ // 配置当前模块运行的组件     AppComponent, NewsComponent  ],  // ...})// 然后在其他组件的HTML使用
   即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAkE1kBD-1608216905832)(image-20201215230155951.png)]

3.基本语法

3.1动态属性

3.2ngFor、ngSwitch

   
   
   
 
        
    
{
  {item.title}}
    
    [{
  {key}}]    
    
{
  {item.content}}
   
   
   
    
    
Common
   
   
   
    
    
     你居然打老子一巴掌
    
    
    
     你居然又打老子一巴掌
    
    
    
     你滚！
    
    
    
     你还没挨老子！
    
   
   
   

3.3管道

   {
  {today|date:'yyyy/MM/dd HH:mm:ss'}}
   

3.4事件

   Load more
   

3.5双向数据绑定

// 双向数据绑定需要用到FormsModule模块，因此需要先引入，才能使用// app.module.tsimport {
    FormsModule} from '@angular/forms'@NgModule({
     // ...  imports: [    BrowserModule,FormsModule // 当前项目依赖的其他模块  ],  // ...})

-{
  {keywords}}

3.6服务

类似于Vuex或Mixin，封装了多个组件公共使用的东西

ng g service services/store

// app.module.ts 引入并配置服务import {
    StoreService } from './services/store.service'; // 根组件@NgModule({
     // ...  providers: [StoreService],// 配置当前项目所需要的其他服务  // ...})// 例如 home 组件需要用（home.component.ts）import {
    StoreService } from '../../services/store.service'; // 先引入export class HomeComponent implements OnInit {
     // ...  constructor(public store: StoreService) {
    // 使用public，在类其他地方就可以直接使用了    console.log(store);// 官方推荐使用  }  ngOnInit(): void {
       // 这个是在指令和组件初始化完成，并不是DOM加载完成  	// 页面每次刷新都会调用这个函数  }  // ...}

3.7DOM操作

• 原生操作DOM（当然不建议）

       
       
          这个box在ngOnInit()是获取不到的！
       

  // home.component.tsngOnInit(): void {
           // 这个是在指令和组件初始化完成，并不是DOM加载完成  	// 页面每次刷新都会调用这个函数}ngAfterViewInit():void{
           // 这里才可以拿到所有的HTML元素（建议在这里操作DOM）    let box:any = document.getElementById('box1')}

• @ViewChild操作DOM

       
       
      
        
  您好，angular！
       

  @ViewChild('box') box:any // 拿到id是box的HTML元素，并赋值给boxngAfterViewInit():void {
           console.log(this.box);    this.box.nativeElement.style.letterSpacing='2px'}

3.8父子组件通信

• （子调父）@Input：使得父组件不仅可以给子组件传值，还可以把父组件的方法、甚至父组件传给子组件

  // news.component.tsexport class NewsComponent implements OnInit {
         @Input('title') title:any;  @Input('homeFun') homeFun:any;  @Input('homeComp') homeComp:any  // ...  ngAfterViewInit():void{
           this.box.nativeElement.style.letterSpacing='2px'    this.homeFun() // 调用home组件方法    console.log(this.homeComp); // 父组件  }  // ...

• （父调子）@ViewChild()

  // home.component.ts@ViewChild('homeNews') news: any // 拿到子组件 news ngAfterViewInit(): void {
           console.log(this.news.test()); // 逻辑处理}

3.9生命周期函数

• ngOnInit()：用来请求数据

• ngAfterViewInit()：DOM操作

• ngOnDestroy()：离开某页面保存数据

3.10异步编程(Rxjs)

RxJS是一个异步编程的库,同时它通过observable序列来实现基于事件的编程（类似于Promise，但是比它更强大）

• 简单使用：先写一个request服务，然后组件调用

  // request.service.ts（服务需要先在根组件引入和注册）import {
        Injectable } from '@angular/core';import {
        Observable } from 'rxjs' // 1.引入类@Injectable({
         providedIn: 'root'})export class RequestService {
         constructor() {
        }  getRxjsData(): any {
           // 2.实例化一个对象，并写逻辑    return new Observable((observer: any) => {
             setTimeout(() => {
               var data = {
                 name: 'yuwan',          age: 22        }        observer.next(data) // 成功调用        // observer.error(msg) 失败调用      }, 2000)    })  }}// home.component.tsimport {
        RequestService } from '../../services/request.service'; // 引入服务@Component({
         selector: 'app-home',  templateUrl: './home.component.html',  styleUrls: ['./home.component.scss']})export class HomeComponent implements OnInit {
         // ...  constructor(public request: RequestService) {
         }  ngOnInit(): void {
           var resp=this.request.getRxjsData() // 请求数据    resp.subscribe((data)=>{
             console.log(data); // 获取数据    })  }  // ...}

• 取消订阅：即撤销发送请求（Promise是无法实现的）

  // ...var opt=resp.subscribe((data)=>{
             console.log(data);})opt.unsubscribe() // 取消逻辑，例如一秒后取消发送

• 多次执行：订阅后，可多次执行（Promise是无法实现的）

  // request.service.ts getRxjsData(): any {
           return new Observable((observer: any) => {
             let count=0      setInterval(() => {
               count++        observer.next(count) // 成功调用        // observer.error(msg) 失败调用      }, 2000)    })  }// ...var opt=resp.subscribe((data)=>{
             console.log(data); // 会2秒执行一次})// ...

• 处理数据：如上所示，如果要打印2,4,6…，需要处理数据（管道）

  import {
        map, filter } from 'rxjs/operators'  ngOnInit(): void {
           var resp = this.request.getRxjsNum() // 先设置管道过滤再打印数据，filter、map     resp.pipe(filter((val: any) => {
             if (val % 2 == 0) {
               return true      }    })).subscribe(data => {
             console.log(data);    })}

3.11数据交互（和服务器打交道）

angular可通过自带与服务器交互的模块HttpClientModule、jsonp（可解决跨域）、axios第三方库等方式

jsonp原理：大概是传一个回调函数去服务端，然后执行拿到数据后，再返回，url格式如http://www.xxx.com/api/goodslist?callback=xxx

// app.module.tsimport {
    HttpClientModule，HttpClientJsonpModule} from '@angular/common/http' // 引入@NgModule({
       // ...  imports: [    HttpClientModule,HttpClientJsonpModule // 当前项目依赖的其他模块  ],	// ...})// home.component.tsimport {
    HttpClient,HttpHeaders } from '@angular/common/http' // 引入这个服务export class HomeComponent implements OnInit {
     // ...  constructor(public http:HttpClient ) {
   } // 实例化  getData():void{
    // get方法    this.http.get('http://a.itying.com/api/productlist').subscribe(data=>{
         console.log(data);    })  }  postData(): void {
    // post方法    var headOptions = {
         headers: new HttpHeaders({
           'Content-Type': 'application/json'      })    }    this.http.post('url', {
    username: 'yuwan', password: '123456' }, headOptions).subscribe(...)  }  getJsonPData(): void {
    // jsonp方式，其中第二个参数：cb或者callback 由服务端决定    this.http.jsonp('url', 'callback').subscribe(resp => {
         console.log(resp);    })  } // ...}

3.12路由

创建项目时，选择安装路由，基本只需要在routes里更改，然后自定义组件即可

   Homeabout

// app-routing.module.tsimport {
    HomeComponent } from './components/home/home.component';import {
    AboutComponent } from './components/about/about.component';const routes: Routes = [  {
       path: 'home',     component: HomeComponent  },  {
       path: 'about',     component: AboutComponent  },  {
    // 匹配不到路由的时候，默认重定向到 home    path: '**',     redirectTo: 'home'  },];

普通路由传参

   点我跳转

// news.component.tsimport {
    ActivatedRoute } from '@angular/router'export class NewsComponent implements OnInit {
     constructor(public activeRoute: ActivatedRoute) {
    }  ngOnInit(): void {
       this.activeRoute.queryParams.subscribe(data => {
         console.log(data);    })  }}

动态路由传参

   点我跳转 
   

// app-routing.module.tsconst routes: Routes = [	// ...  {
       path: 'news/:aid',     component: NewsComponent  }    // ...];// news.component.tsexport class NewsComponent implements OnInit {
     constructor(public activeRoute: ActivatedRoute) {
    }  ngOnInit(): void {
       this.activeRoute.params.subscribe(data=>{
    // 接收参数      console.log(data);    })  }}

普通路由跳转和动态路由跳转

import {
    Router，NavigationExtras } from '@angular/router'export class NewsComponent implements OnInit {
     // ...  jump():void{
         this.router.navigate(['/news/','1234']) // 动态路由跳转     this.router.navigate(['/home']) // 普通路由跳转  }  jump2():void{
    // get方式跳转      let queryParams:NavigationExtras={
         queryParams:{
           'aid':'1233'        }       }      this.router.navigate(['/news'],queryParams)  }}

嵌套路由

先创建相关组件，再修改app-routing.module.ts

ng g component components/service/requestng g component components/service/state

// app-routing.module.tsimport {
    ServiceComponent } from './components/service/service.component';import {
    RequestComponent } from './components/service/request/request.component';import {
    StateComponent } from './components/service/state/state.component';{
       path: 'service',    component: ServiceComponent,    children: [      {
           path: 'request',        component: RequestComponent      },      {
           path: 'state',        component: StateComponent      }    ]},

    跳转request跳转state
   
    
    
   

转载地址：https://blog.csdn.net/qq_39811414/article/details/111349717 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！