天道酬勤,学无止境

Angular快速上手指南

angular快速上手指南

    • angular脚手架下载以及angular项目的新建
      • angular脚手架安装命令
      • angular创建项目命令
      • 启动angular项目
    • angular中的目录结构以及核心文件
      • 目录结构
      • 核心文件
      • 如何在angular中创建组件
      • 如何使用组件
    • Angular基本操作
      • angular中定义属性
      • angular中的数据绑定
      • angular中的属性绑定
      • 将文本解析成html
      • angular中的数据循环
      • angular中的条件渲染
      • ngswitch的使用
      • 动态绑定Class及Style
      • angular中的管道
      • angular中的事件绑定
      • 双向数据绑定
    • angular中的服务
    • angular中的dom操作
      • 通过原生JavaScript直接操作dom
      • 通过ViewChild
    • angular组件之间的通信
      • 父组件向子组件传递数据
      • 父组件向子组件传递方法
      • 父组件把自己传递给子组件
      • 子组件向父组件传递参数
      • 子组件通过output+eventEmit的方法向父组件广播数据。
      • 非父子组件之间传递参数
    • angular组件生命周期及执行顺序
      • 组件类的构造函数(constructor)
      • ngOnInit
      • ngOnChanges
      • ngOnDestory
      • ngDoCheck
      • ngAfterContentInit
      • ngAfterContentChecked
      • ngAfterViewInit
      • ngAfterViewChecked
    • angular中的rx.js异步编程
      • rx.js 基本使用
      • Rx.js如何取消
      • Rx.js多次返回值
      • angular中的前后端数据交互
    • angular中的路由
      • 在路由文件(app-routing.module.ts)中配置路由
      • 路由跳转
      • 默认路由
      • 路由选中样式
      • 路由之间传值
      • 使用JavaScript实现路由跳转
      • 嵌套路由

angular脚手架下载以及angular项目的新建

angular脚手架安装命令

npm install -g @angular/cli

angular创建项目命令

npm new  XXXX(项目名)

执行过程中会让用户自己定义配置项
1、Do you want to enforce stricter type checking and stricter bundle budgets in the workspace
是否需要更严格的类型检查和捆绑导入
可以根据自己的需要选择Y或者N
2、Would you like to add Angular routing?是否需要配置路由,这里我们选N,因为至少在项目的前几章内我们不会用到路由
3、Which stylesheet format would you like to use?您想用哪一种样式格式?开发者根据自己的喜好来选择即可。
创建完项目后,切换到项目目录下使用

npm install 

安装依赖

启动angular项目

ng serve --open

初次启动项目时有可能会出现如下一个选项。
Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics.
大意是你是否愿意分享你在angular上的使用情况给google。根据自己情况选择后就可以正常启动angular项目了。
启动成功后angular会在浏览器中自动弹出项目首页。
在这里插入图片描述

angular中的目录结构以及核心文件

目录结构

在这里插入图片描述

核心文件

app.module.ts 项目的根模块
在这里插入图片描述
app.components.ts 项目入口文件的TS。
在这里插入图片描述

如何在angular中创建组件

ng g component xxx(文件夹)/xxx(文件名)

为了使代码结构更加清晰我们一般会将组件创建到一个components文件夹中。

ng g component components/hello

执行以上代码就在src下app中的components文件夹中新建了一个hello组件。通过此方式新建的组件都会在app.module.ts中自动被注册。
在这里插入图片描述
注意看到hello组件在app.module.ts中被自动导入并且声明。此时就可以全局使用它。

如何使用组件

刚刚我们说到,app.component是项目的一个根组件,启动页上展示也是根组件html上的内容。我们可以使用我们自己的组件来替换此内容。
首先找到app.component.html文件,可以看到里面有四五百行,不管这么多全部删掉。
然后找到我们自定义的hello组件。找到hello.component.ts,从这个文件中我们可以找到如何使用该组件。
在这里插入图片描述
找到这个选择器。然后我们返回根组件的html,将hello组件挂上去。
在app.component.html中输入

<app-hello></app-hello>

此时再打开项目启动页,发现其中展示的已经是我们自定义的hello组件的内容了。

因为此时根组件挂载的就是我们自定义的hello组件,此时就可以修改hello.component.html文件来随心所欲的修改我们想展示的内容了。

Angular基本操作

angular中定义属性

相比较Vue写在data中的数据。angular直接将数据定义在组件所在的类中。

export class HelloComponent implements OnInit {
  public name:string = 'wxs'
  constructor() { }
  ngOnInit(): void {
  }
}

angular中的数据绑定

使用方法和Vue一样,使用双大括号文本插值法。
在hello.component.ts中添加定义了属性之后此时就可以在hello.component.html中使用文本插值来直接使用这个属性了。

<!-- hello.component.html文件 -->
<p>我的名字是{{name}}</p>

此时再看页面表现
在这里插入图片描述

angular中的属性绑定

相比较Vue中的“:”(v-bind)绑定属性,angular中使用"[]"来绑定属性。在组件TS中声明divClass变量

divClass:string = "activeClass"

html文件中属性绑定

<div [class]="divClass">123</div>

此时渲染到实际页面的情况:
在这里插入图片描述

将文本解析成html

相对于vue使用v-html,angular使用[innerHtml]

angular中的数据循环

相对于Vue使用的

<div :for='(item,index) in XXX '>

angular使用

<div *ngFor="let item of numberList;let index = index">{{item}}</div>

angular中的条件渲染

相比较Vue使用v-if,v-show。
angular使用

<div [hidden]="show">123</div>

本质是动态的给dom元素加上hidden属性。

ngswitch的使用

一个颇具Angular特色的操作。Vue中只能通过v-if,else-if来侧面实现。但angular实现了一般计算机语言的switch-case语法。

<div [ngSwitch]="switchTest">
    <div *ngSwitchCase=1>switchTest等于1</div>
    <div *ngSwitchCase=2>switchTest等于2</div>
    <div *ngSwitchCase=108>switchTest等于108</div>
    <div *ngSwitchDefault>默认值</div>
</div>

动态绑定Class及Style

<div [ngClass]="{activeClass: XXX}">
    ngClass测试
</div>
<!-- XXX为变量名 -->
<div [ngStyle]="{color: XXX}">
    ngStyle测试
</div>
<!-- XXX为变量名 -->

ngClass和ngStyle的用法基本一致

angular中的管道

相对于Vue中的过滤器。不过angular中自定义了一些过滤器可供开发者直接使用(如,date,json等)。同样也有自定义的管道(这个我没学明白,待补充)

angular中的事件绑定

相对于Vue使用”@“来绑定事件,angular中使用”()“。

<button (click)="print()">点击我试试</button>

直接在类中定义方法作为click调用的方法。

export class HelloComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
  print(){
    console.log(1111)
  }
}

如果需要传递事件对象的话使用$event(同Vue)

双向数据绑定

相对于Vue中的v-model。angular则是把属性绑定和事件绑定结合起来用。

<input placeholder="请输入你的名字" [(ngModel)]="modelValue">

angular中的服务

了解的不深,似乎和Vue中的$bus,中央事件总线是一个作用。
为项目中各个组件所使用的服务类。后面讲到组件之间传递参数也可以看到它也用来非父子组件之间的通信。
为了更好的展示它的作用,我们事先创建另一个world组件。

	ng g component components/world

和使用组件一样,使用之前需要先创建一个服务类。

	ng g service service/projectService

执行完以上命令,我们就在app下新建了一个service文件夹,文件夹内新建了一个projectService服务类。
需要在全局使用,首先就需要在全局引入并声明。
同我们使用ng g新建的组件一样,angular在我们新建服务的同时已经帮我们引入并全局提供了这个变量。
在这里插入图片描述
可以看到app.module.ts也是将服务类放到了provider中,这说明我们要在组件中使用它也要再次引入一次。provider只是在全局提供了这个服务类。各组件可以按需引入。
在全局配置好服务类后,在现有的hello组件中和world组件中分别导入这个服务类。
服务在组件中的导入和声明
在这里插入图片描述
配置完成之后两个组件都可以使用该服务类提供的变量或方法啦。
我们在服务类中定义一个公共方法。

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class MyStorageService {
  constructor() {
    
  }
  printUserName(name:string){
    console.log(`我的名字${name}`);
  }
}

此时在组件中调用这个公共方法。

ngOnInit(): void {
    this.storage.printUserName('wxs');
  }

在这里插入图片描述
打印成功

angular中的dom操作

尽管Vue和angular中都不推荐直接操作dom。但还是均提供了直接操作dom的方法。

通过原生JavaScript直接操作dom

<div id='div'>3333</div>
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
  modelValue:string = '12312'
  constructor() { }
  ngOnInit(): void {
  }
  ngAfterViewInit(){
    let div:any = document.getElementById('div');
    div.innerHTML = '123123123123123123'
  }
}

主要这里的dom操作是放在ngAfterViewInit周期中,关于生命周期在下面的章节会介绍到。

通过ViewChild

使用ViewChild之前需要先引入,引入之后就可以使用这个ViewChild提供的装饰器了。

<div #div>3333</div>

tips:注意如果使用ViewChild,那么dom元素的id要写成以上的形式

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
  @ViewChild('div') 
  divElement:any
  modelValue:string = '12312'
  constructor( ) { }
  ngOnInit(): void {
  }
  ngAfterViewInit(){
   	// 原生dom元素放在被修饰元素的nativeElement中
  	console.log(this.divElement.nativeElement);
  }
}

tips:viewChild不仅可以用来操作dom,更常见的用法用来操作子组件(父子组件传参)

angular组件之间的通信

父组件向子组件传递数据

类似于Vue父组件直接在子组件上绑定数据,在子组件中用props来接收。
angular也是如此,父组件在子组件上绑定属性,子组件使用input来接收(input需要导入)
我们项目中现在已经有了两个组件(hello和world)。我们把world组件挂载到hello组件下使他们成为父子关系。挂载方法之前已经介绍过。和把hello组件挂载到根组件的方法一模一样。
找到world组件的ts文件找到selector属性。
在这里插入图片描述
把这个作为dom直接挂到hello组件的html文件中即可

	<!-- hello.component.html文件 -->
	<div #div>3333</div>
	<app-world></app-world>

在父组件中定义一个父组件数据

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
  parentComponentData:string = '我是父组件的数据'
  constructor( ) { }
  ngOnInit(): void {
  }
  ngAfterViewInit(){
    console.log();
  }
}

直接挂载子组件上。
子组件使用父组件数据三部曲
1、导入input
2、使用input修饰器获取父组件传递的数据
3、直接使用
在这里插入图片描述

父组件向子组件传递方法

同传递数据一模一样

父组件把自己传递给子组件

比如父组件要传递给子组件很多参数,很多方法。此时不如直接把父组件传递给子组件。子组件就可以直接调用父组件的全部属性和方法了。
传递方法同上,传递时传递this即可

<div #div>3333</div>
<app-world [fathterComponent]='this'></app-world>

子组件向父组件传递参数

之前已经介绍过的ViewChild

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
  @ViewChild('worldComponent') worldComponent:any
  parentComponentData:string = '我是父组件的数据'
  constructor( ) { }
  ngOnInit(): void {
  }
  ngAfterViewInit(){
    console.log(this.worldComponent); // 可以拿到子组件的全部数据
  }
}

子组件通过output+eventEmit的方法向父组件广播数据。

这个有点类似于Vue在子组件中emit事件,然后在父组件中监听。
angular中稍微复杂一点。
(1)、在子组件中导入output和EventEmitter
(2)、子组件使用output装饰器装饰EventEmitter的实例
(3)、子组件通过EventEmitter实例emmit数据,父组件监听实例获取数据
子组件TS
在这里插入图片描述
父组件接受
在这里插入图片描述
tips:注意父组件是用$event来接受子组件传递的参数。
这个方法完全可以用之前两种实现。且使用较为复杂。故仅作了解。

非父子组件之间传递参数

使用之前提到的服务来实现

angular组件生命周期及执行顺序

关于angular的生命周期没有深入了解,这里只是做一些搬运工作待以后慢慢消化。

组件类的构造函数(constructor)

constructor是ES6中class中新增的属性,当class类实例化的时候调用constructor,来初始化类。Angular中的组件就是基于class类实现的,在Angular中,constructor用于注入依赖。
组件的构造函数会在所有的生命周期钩子之前被调用,它主要用于依赖注入或执行简单的数据初始化操作。

ngOnInit

在第一次 ngOnChanges 执行之后调用,并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。
在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
使用ngOnInit()有两个原因:
a:在构造函数之后马上执行复杂的初始化逻辑
b:在Angular设置完输入属性之后,对该组件进行准备。

ngOnChanges

当数据绑定输入属性的值发生变化的时候,Angular 将会主动调用 ngOnChanges 方法。它会获得一个 SimpleChanges 对象,包含绑定属性的新值和旧值,它主要用于监测组件输入属性的变化。当Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的SimpleChanges对象。
当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。
(可以这样理解,刚开始数据绑定时数据还没有初始化好,当数据初始化好之后就会触发ngOnChanges)

ngOnDestory

在指令被销毁前,将会调用 ngOnDestory 方法。它主要用于执行一些清理操作,比如:移除事件监听、清除定时器、退订 Observable 等。
当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。
在Angular销毁指令/组件之前调用。
一些清理逻辑必须在Angular销毁指令之前运行,把它们放在ngOnDestroy()中。这是在该组件消失之前,可用来通知应用程序中其它部分的最后一个时间点。这里是用来释放那些不会被垃圾收集器自动回收的各类资源的地方。 取消那些对可观察对象和DOM事件的订阅。停止定时器。注销该指令曾注册到全局服务或应用级服务中的各种回调函数。 如果不这么做,就会有导致内存泄露的风险。

ngDoCheck

当组件的输入属性发生变化时,将会触发 ngDoCheck 方法。我们可以使用该方法,自定义我们的检测逻辑。它也可以用来加速我们变化检测的速度。
检测,并在发生Angular无法或不愿意自己检测的变化时作出反应。
在每个Angular变更检测周期中调用,ngOnChanges()和ngOnInit()之后。

ngAfterContentInit

在组件使用 ng-content 指令的情况下,Angular 会在将外部内容放到视图后用。它主要用于获取通过 @ContentChild 或 @ContentChildren 属性装饰器查询的内容视图元素。
当把内容投影进组件之后调用。第一次ngDoCheck()之后调用,只调用一次。

ngAfterContentChecked

在组件使用 ng-content 指令的情况下,Angular 会在检测到外部内容的绑定或者每次变化的时候调用。
每次完成被投影组件内容的变更检测之后调用。ngAfterContentInit()和每次ngDoCheck()之后调用

ngAfterViewInit

在组件相应的视图初始化之后调用,它主要用于获取通过 @ViewChild 或 @ViewChildren 属性装饰器查询的视图元素。
初始化完组件视图及其子视图之后调用。第一次ngAfterContentChecked()之后调用,只调用一次。

ngAfterViewChecked

组件每次检查视图时调用
每次做完组件视图和子视图的变更检测之后调用。
ngAfterViewInit()和每次ngAfterContentChecked()之后调用。
说实话,搬运完这些东西之后还是一脸懵。需要时间好好消化。
附上某课程的总结
钩子中带有init的只会执行一次,带有checked的在数据变化时会就会被执行。所以可以在这些checked钩子里做一些自定义的事件。(好像类似于VUE的watch)其中ngOnchanges在父组件传入子组件的值改变时触发。

angular中的rx.js异步编程

传统解决程序异步的几种方案
1、回调函数
2、发布订阅模式
3、promise(ES6)

rx.js 基本使用

这一章主要介绍的是angular中采用的Rx.js方案。
使用起来和promise简直一毛一样好家伙。。。
首先我们来随手写一个promise例子。

<button (click)='sendAjaxRequest()'>点击我发送ajax请求</button>
sendAjaxRequest(){
    this.getJSON().then(res=>{
      console.log(res)
    });
  }
  getJSON(){
    return new Promise((resolve,rejects)=>{
      setTimeout(() => {
        resolve('json数据')
      },2000);
    })
  }

我们在sendAjaxRequest方法中获取json数据。两秒后成功获取json数据后打印到控制台
在这里插入图片描述
学习过promise可以知道,promise新建后一定会执行,不可取消,且从pending状态变更到resolve状态或者rejected状态之后不可以再次变化这就意味着它只能返回一次数据。相比较之下Rx.js有以下优势。
1、Rx.js执行之后可以中途取消
2、Rx.js可以多次返回
而使用方法除了和promise关键字不同之几乎一毛一样。我们来把上述用promise实现的例子改为用Rx.js来实现。

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
import { Observable } from 'rxjs'
@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {
  @ViewChild('worldComponent') worldComponent:any
  parentComponentData:string = '我是父组件的数据'
  constructor( ) { }
  ngOnInit(): void {
  }
  ngAfterViewInit(){
  }
  sendAjaxRequest(){
    this.getJSON().subscribe((data:any)=>{console.log(data)});
  }
  getJSON(){
    return new Observable((observe:any)=>{
      setTimeout(() => {
        observe.next('JSON数据')
      },2000);
    })
  }
}

promise —> Observable
resolve,reject —> observe
resolve(json) —> observe.next(json)
promise().then —> observe().subscribe

Rx.js如何取消

let streem = this.getJSON().subscribe((data: any) => { console.log(data) })
    streem.unsubscribe();

tips:注意此处一定是将subscribe的结果给unsubscribe掉。

Rx.js多次返回值

多次返回只需要把上例中的setTimeout换成setInterval即可。

angular中的前后端数据交互

首先应该app.module.ts项目根TS文件中引入HttpClientModule模块。
在这里插入图片描述
同样的,需要在使用到的组件内部引入。
使用步骤
在这里插入图片描述
post请求相比较get请求需要多设置一个请求头

sendAjaxRequest() {
    const options = {
      headers:new HttpHeaders({'Content-Type':'application/json'})
    }
    this.http.get(url,data,options).subscribe((data:any) => {
      console.log(data);
    })
  }

angular中的路由

路由的作用:路由是根据url地址的不同,动态的将不同的组件挂载到根页面中以达到单页面应用展示不同的页面的目的。
由于之前我们安装的项目是不选择路由的。学习到这一章我们需要新建一个带路由的项目(新建项目时是否配置路由选择Y)。
我们打开带有路由配置的项目目录。打开app.module.html文件可以看到代码最后一行多了一个

	<router-outlet></router-outlet>

类似于Vue的router-view。作为路由分发的出口

在路由文件(app-routing.module.ts)中配置路由

开始学习路由之前的基础准备工作是新建了三个组件(home,news,goods),且为了更好的观察效果,可以把app.component.html文件中全部删除,只留下一个路由分发出口
在路由文件中首先需要引入需要配置路由的组件
路由的具体配置也和Vue中的路由大同小异。
配置都需要一个属性path来指定对应的Url,还需要一个component来指定url对应的组件。路由文件最终配置如下。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GoodsComponent } from './components/goods/goods.component'
import { HomeComponent } from './components/home/home.component'
import { NewsComponent } from './components/news/news.component'
const routes: Routes = [{
  path:'home',
  component:HomeComponent
},{
  path:'news',
  component:NewsComponent
},{
  path:'goods',
  component:GoodsComponent
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

配置成功之后我们就可以在浏览器中查看效果了。
在这里插入图片描述

路由跳转

没有项目会让用户直接修改url来达到切换页面的目的,同样的,我们需要三个跳转按钮来实现页面跳转功能。
angular中可以在a标签中使用routerLink来实现路由跳转
在app.component.module中编辑如下标签。

<a [routerLink]="['/home']" >跳转到首页</a>
&nbsp;
<a [routerLink]="['/goods']">跳转到新闻</a>
&nbsp;
<a [routerLink]="['/news']">跳转到商品</a>
<router-outlet></router-outlet>

此时再来看看页面效果
在这里插入图片描述

默认路由

实现了我们想要的效果,但是似乎还有一些小问题。比如我们刚开始进项目页面时,路由对应的是空,则路由分发出口没有显示任何页面。这样是不太符合用户操作习惯的。我们需要配置一个默认页面。当用户访问到没有配置路由地址的页面时自动跳转到默认页面。
默认路由配置方法很简单

{
  path: '**',
  redirectTo:'home'
}

tips:这里的’**‘指代的是任意路由。也正因为它指代的是任意路由,也限制了它只能成为路由配置项的最后一项,当前面的路由都没有没匹配中时就会匹配中最后一项的默认路由,跳转到home页

路由选中样式

如果某路由被选中了。angular提供了被选中类。用法是在routerLink后加上

<a [routerLink]="['/home']" routerLinkActive='actived'>跳转到首页</a>
&nbsp;
<a [routerLink]="['/goods']" routerLinkActive='actived'>跳转到新闻</a>
&nbsp;
<a [routerLink]="['/news']" routerLinkActive='actived'>跳转到商品</a>

这样被选中的a标签就会被angular打上我们自定义的类名actived
在这里插入图片描述

路由之间传值

在项目中,通过路由传值的场景是很常见的。
测试准备工作:新建一个新闻详情组件。先对新闻组件内容稍作修改。使得点击新闻组件中的链接可以跳转到新闻详情中。
新建新闻详情组件

ng g component components/newsDetail

在路由中配置新闻详情

{
  path: 'newsDetail',
  component: NewsDetailComponent
},

修改news组件内容
html

<div  *ngFor="let item of newsList">
    <a [routerLink]="['/newsDetail']" routerLinkActive="router-link-active">{{item.newsTitle}}</a>
</div>

TS

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  constructor() { }
  newsList:Array<any> = []
  ngOnInit(): void {
    for (let i = 0;i<10;i++){
      this.newsList.push({
        newsTitle:`这是第${i}条新闻的标题`,
        newsContent:`这是第${i}条新闻的内容`
      })
    }
  }
}

完成这些步骤我们就可以自由的进入新闻详情页啦。
在这里插入图片描述
但是在此我们看到,不论是第几条新闻,进入的好像是同一个新闻详情页。也就是说新闻详情页面不知道该展示哪一条新闻详情的内容。这时候就需要用到路由传值了。
路由传值介绍两种方式,第一种:通过Get传值
将新闻组件的html文件改写如下就可以使用get传值

<div  *ngFor="let item of newsList;let index = index">
    <a [routerLink]="['/newsDetail']" [queryParams]='{newsId:index}' routerLinkActive="router-link-active">{{item.newsTitle}}</a>
</div>

此时可以看到参数已经通过GET方法正常传递了
在这里插入图片描述
传递参数成功之后下一步必然是在新闻详情组件中接受此参数。
接受参数方法如下
首先需要引入ActivatedRoute ,在构造函数声明之后方可使用。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
@Component({
  selector: 'app-news-detail',
  templateUrl: './news-detail.component.html',
  styleUrls: ['./news-detail.component.scss']
})
export class NewsDetailComponent implements OnInit {
  constructor(public router:ActivatedRoute) { }
  ngOnInit(): void {
    this.router.queryParams.subscribe((data) => {
      console.log(data)
    })
  }
}

tips:注意通过get传递的是一个被Rx.js封装过的对象。需要通过subscribe来调用!

第二种方法:通过动态路由传值
这个方法需要先在路由中进行配置

{
  path: 'newsDetail/:newsId',
  component: NewsDetailComponent
}

动态路由在html中就不是通过queryParams传值了。

<div  *ngFor="let item of newsList;let index = index">
    <a [routerLink]="['/newsDetail',index]"  routerLinkActive="router-link-active">{{item.newsTitle}}</a>
</div>

页面效果
在这里插入图片描述
传值成功!
这种方法接受参数的方式和之前一毛一样。只不过把queryParams换成了params。

this.router.params.subscribe((data) => {
      console.log(data)
    })

使用JavaScript实现路由跳转

在实际项目中不是每一次路由跳转都是由用户点击链接产生的。有很多情况下我们需要使用js来实现页面跳转。比如在用户支付之后我们需要帮用户自动跳转到订单详情等等。
新闻组件html页加上一个button

<button (click)='go2newsDetail()'>点击我跳到新闻详情页</button>

ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  constructor( public router:Router ) { }
  newsList:Array<any> = []
  ngOnInit(): void {
    for (let i = 0;i<10;i++){
      this.newsList.push({
        newsTitle:`这是第${i}条新闻的标题`,
        newsContent:`这是第${i}条新闻的内容`
      })
    }
  }
  go2newsDetail(){
    this.router.navigate(['/newsDetail',123])
  }
}

tips:这里需要注意的是,如果跳转的路由配置了动态路由参数,那么使用navigate一定要加参数。否则无法跳转

嵌套路由

(1)、新建嵌套组件
ng g component components/news/newsDetail
tips:既然是嵌套组件,那么我们就把组件新建到他父组件上。这里我把新闻内容组件新建到了新闻组件上
(2)、在路由中配置
在该子路由的直接父路由下添加children属性,其配置项和普通路由一样。
children:[
{
path:‘newsDetail’,
component:NewsDetailComponent
}
]
(3)、具体使用
在父路由页面配置路由分发出口(类似于vue)

至此,原本应该渲染到整个页面的组件就会被渲染到这个指定的路由分发出口了。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 200本史上最全最新前端书籍下载
    本人收集了两百多本前端书籍,包含了js、nodejs、css、移动端、框架、面试等各个类型的书籍。 1、javascript JavaScript.DOM高级程序设计 JavaScript网页特效范例宝典 JavaScript忍者秘籍 锋利的jQuery 编写高质量代码-改善JavaScript程序的188个建议 JavaScript语言精髓与编程实践 高性能JavaScript 数据结构与算法JavaScript描述 深入理解JavaScript 编写可维护的JavaScript 精彩绝伦的Jquery 深入理解ES6翻译完整版 你不知道的JavaScript(上卷) 你不知道的JavaScript(中卷) 你不知道的 JavaScript(下卷) 同构JavaScript应用开发 Learning TypeScript中文版 Typescript手书 JS高级程序设计-第3版 JS数据结构与算法 jQuery开发从入门到精通 jQuery权威指南 jquery源码_详细中文注释 JavaScript高级程序设计 JavaScript面向对象编程指南 JavaScript语言精粹 JavaScript设计模式 JavaScript设计模式与开发实践 JavaScript网页动画设计 JavaScript编程精解 JavaScript编程实战 JavaScript程序的188个建议
  • 300多本web前端书籍推荐
    从事前端开发十余年,收集了300多本前端电子书,在这里分享给大家 电子书获取地址 1、javascript 21天学通javascript ECMAScript 6入门 Effective JavaScript中文 ES6标准入门 第3版 Functional-Light JavaScript JavaScript ES6 函数式编程入门经典-试读 JavaScript Promise迷你书 javascript 权威指南 JavaScript.DOM高级程序设计 JavaScript_DOM编程艺术第二版 JavaScript编程精解 JavaScript编程实战 JavaScript程序的188个建议 JavaScript高级程序设计 javascript高效图形编程 JavaScript函数式编程 JavaScript基础教程 JavaScript脚本特效编程给力起飞 javascript捷径教程 JavaScript快速全栈开发 JavaScript框架高级编程 应用Prototype、YUI、Ext JS、Dojo、MooTools Javascript框架设计 javascript秘密花园 JavaScript面向对象编程指南 JavaScript模式.Stoyan Stefanov JavaScript权威指南 JavaScript忍者秘籍
  • Angular快速上手
    一、父子组件传值篇 @Input() 和 @Output() 为子组件提供了一种与其父组件通信的方法。 @Input() 允许父组件更新子组件中的数据。相反,@Output() 允许子组件向父组件发送数据。 父组件向子组件传值—@Input 子组件或指令中的 @Input() 装饰器表示该属性可以从其父组件中获取值。 父组件 app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'my-app'; msg = '你好,子组件'; } 父组件 app.component.html <!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> </div> <app-child [item]="msg"></app-child>
  • 前端开发」一篇文章概括目前流行的前端开发框架
    01. 概述作为前端开发者,各种框架的层出不穷,促使我们要不断学习才能防止落后,但是我们不可能做到每个框架都有学习的时间,我们只需要掌握流行的,坑少的即可。从以下三个方面了解目前流行的前端开发框架。02. 跨多平台开发框架(1).uni-app--开发一次,多端覆盖uni-app 是DCloud公司使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。框架图Github地址:https://github.com/dcloudio/uni-app官网地址:https://uniapp.dcloud.io如果学过vue,会微信小程序开发,了解mpvue,很容易上手。强烈推荐学习。(2).Taro–一次编写,多端运行Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H***pp、快应用等)运行的代码。Github地址:http://github.com/nervjs/taro官网地址:http://taro.aotu.io/多端 UI 组件库:https://aotu.io/notes/2018/08/27/the-birth-of-taro-ui/如果你会React ,很容易上手Taro。03
  • VS Code权威指南目录
    Visual Studio Code初上市 作者简介 最近一本新书出版可谓令人眼前一亮,此书是VS Code首著问世 微软官方出品 从入门到精通全方位的介绍了这个轻量级的工具。作者韩骏,毕业于上海交通大学软件学院,微软开发平台事业部软件工程师。VS Code(Visual Studio Code)中文社区创始人,VS Code代码贡献者,“玩转VS Code”微信公众号及知乎专栏作者,PyCon、JSConf、.NET Conf、Microsoft Tech Summit、Google Developer Group、COSCon 等技术大会讲师。编写过20多款VS Code插件,其中Code Runner插件下载量超过1 000万。 内容简介 本书由浅入深地介绍了Visual Studio Code的各个方面,主要包括Visual Studio Code的核心组件、使用技巧、进阶应用、插件推荐、插件开发、Visual Studio family的各个核心产品等。此外,本书还详细介绍了如何使用Visual Studio Code进行各种编程语言的开发、前端开发、云计算开发、物联网开发和远程开发。 本书适合刚开始使用Visual Studio Code的读者阅读,也适合有一定Visual Studio Code使用经验并且想更全面深入地了解Visual Studio
  • 2018上半年掘金微信群日报优质文章合集:前端篇
    在掘金微信交流群里的小伙伴们,你们每天都还在坚持读小报吗?如果你的回答是yes,那真的要给你点一万个赞了?能坚持这么久,真的很优秀噢!(嗯,每天坚持给大家收集文章的小饼也很优秀?)2018不知不觉已经过了一半了,这里是上半年的小报优质文章合集,做了一些简单分类,希望对大家有用! 编程语言相关 JavaScript 如何在疲劳的JS世界中持续学习 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 几道JS代码手写题以及JavaScript数据结构与算法资源分享 JavaScript:面试频繁出现的几个易错点 JavaScript 运行原理解析 TypeScript 实践分享 理解Underscore中的去抖函数 html2image原理简述 深入JavaScript继承原理 Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A 规范) 我们需要注意的 immutable 操作 身份证号码的正则表达式及验证详解(JavaScript,Regex) 前端模块化:CommonJS,AMD,CMD,ES6 简单快速理解js中的this、call和apply ES6 的几个小技巧 面试官:请你实现一个深克隆 ES6会这些就够了 入门babel--实现一个es6的class转换器 JavaScript 装饰器极速指南 学会了ES6,就不会写出那样的代码
  • 量角器和业力可以一起使用吗?(Can Protractor and Karma be used together?)
    问题 如果量角器正在替换Angular Scenario Runner进行E2E测试,这是否意味着我仍然可以将其与Karma一起用作我的E2E测试框架? 回答1 量角器的当前维护者不推荐使用: https://github.com/angular/protractor/issues/9#issuecomment-19927049 量角器和业力不应一起使用; 而是为运行测试提供了单独的系统。 量角器和业力涉及测试的不同方面-业力主要用于单元测试,而量角器应用于端到端测试。 Protractor建立在WebDriverJS之上,该WebDriverJS使用Selenium / WebDriver服务器来配置浏览器并驱动测试执行。 可以在以下位置找到纯WebDriverJS的示例:http://code.google.com/p/selenium/wiki/WebDriverJs 和 https://github.com/angular/protractor/issues/9#issuecomment-19931154 Georgios-我认为将量角器和Karma分开是有意义的-对于端到端测试,您需要本机事件驱动和webdriver的灵活性,而对于单元测试,则需要快速执行和自动监视文件。 回答2 更新。 这是我创建的一个简单软件包,可通过一个命令npm install min
  • 面试技巧 面试复盘 编程技术 架构 看这一篇就够了
    神经网路与深度学习 Kubernetes实战 大型网站性能监测、分析与优化 Flume日志收集与MapReduce模式 ZooKeeper:分布式过程协同技术详解 自己动手写Java虚拟机 Java WebSocket编程 开发、部署和保护动态Web应用 SpringBoot揭秘:快速构建微服务体系 Web全栈工程师的自我修养 Apache Spark源码剖析 Wireshark数据包分析实战详解 深入剖析Tomcat-网上版本不够清晰 故重做 Kafka技术内幕 图文详解Kafka源码设计与实现 HADOOP权威指南大数据的存储与分析(第4版) MongoDB实战(第二版) 深度学习精要 基于R语言 京东基础架构建设之路(全彩) Python Linux系统管理与自动化运维 DB2从入门到精通(配光盘)(软件开发视频大讲堂) Kafka入门与实践 Kotlin极简教程 大话统计学 微信公众平台企业应用开发实战 微信公众平台开发与案例分析 Hadoop大数据实战权威指南 JavaEE框架技术(SpringMVC+Spring+MyBatis) Java EE企业级应用开发教程(Spring+Spring MVC+MyBatis) 第一季Kotlin崛起:次世代Android开发 Kotlin程序开发入门精要 微信企业号开发完全自学手册 Django 2.0 入门与实践_李健
  • 如何捆绑Angular应用进行生产(How to bundle an Angular app for production)
    问题 捆绑Angular(版本2、4、6,...)以在实时Web服务器上进行生产的最佳方法是什么。 请在答案中包括Angular版本,以便在移至更高版本时可以更好地进行跟踪。 回答1 2, 4, 5, 6, 7, 8, 9, 10, 11 (打字稿)与角CLI 一次性设置 npm install -g @angular/cli ng new projectFolder创建一个新的应用程序 捆绑步骤 ng build --prod (当目录为projectFolder时在命令行中运行) 标记prod包(有关生产标记随附的选项列表,请参见Angular文档)。 使用Brotli进行压缩使用以下命令压缩资源for i in dist/*; do brotli $i; done 捆绑包默认情况projectFolder/dist(/$projectFolder成为projectFolder/dist(/$projectFolder v6 + projectFolder/dist(/$projectFolder ) ** 输出 带有CLI 11.0.5 Angular 11.0.5和不带Angular路由的选件CSS的大小 dist/main-[es-version].[hash].js您的应用程序捆绑了[ES5大小:136 KB,用于新的Angular CLI应用程序为空,已压缩38 KB
  • Angular 2快速入门:意外令牌(Angular 2 Quickstart: unexpected token <)
    问题 我正在尝试根据http://angular.io上的快速入门来设置angular 2。 我已经按照指南中的描述完全复制了每个文件,但是当我运行npm start并打开浏览器选项卡时,在控制台中出现以下错误,我得到“正在加载...”: Uncaught SyntaxError: Unexpected token < (program):1 __exec @ system.src.js:1374 Uncaught SyntaxError: Unexpected token < angular2-polyfills.js:138 Evaluating http://localhost:3000/app/boot Error loading http://localhost:3000/app/boot 这是我的app.component.ts : import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: `<h1>My First Angular 2 App</h1>` }) export class AppComponent { } 我的boot.ts : import {bootstrap} from 'angular2/platform/browser'; import
  • 2021年后台开发岗找工作需要准备什么?(JAVA/C++)
    ​2020年的秋招接近尾声了,今年的趋势大家都有目共睹,算法岗灰飞烟灭,开发岗需求旺盛,而且算法岗的薪资已经与开发岗相差不多,这是开发岗的优势。但是在找开发岗的过程中会发现,开发岗的天花板还是较低的,很难有诸如“阿里星”,“北斗计划”的五十万以上的高薪。 我个人在今年的秋招中,既做了算法岗(研究生专业)的准备,也在开发岗(本科专业)有一定的沉淀。算法岗的准备过程参考上一篇2021年算法岗找工作需要准备什么? 文章目录 1. General2. 编程语言CPPJAVA 3. 数据库数据库Redis 4. 前端(可选)前端基础知识 5. 计算机内功计算机网络数据结构操作系统 6. JAVA Web开发(可选)7. 多线程java 并发 8. 框架和中间件中间件和框架SpringBootMyBatis 常用框架Java工具 9. 分布式分布式 10. 深入学习jvmJava进阶代码优化 11. 微服务网站架构 1. General 职业生涯建议 程序员如何把控自己的职业 | | 酷 壳 - CoolShell 包罗万象的 Awesome sindresorhus/awesome 全栈开发知识点 frank-lam/fullstack-tutorial General knowledge courses 2020 logancyang/my-cs-degree 2. 编程语言 CPP
  • 使用诸如angularjs之类的框架的可访问性意味着什么?(What are the accessibility implications of using a framework like angularjs?)
    问题 我们站在哪里 我们正在努力实现网络可访问性,以符合管理公共/教育机构的某些法律。 到目前为止,我们仅需确保: 我们的布局在逻辑上是有序的; 图片具有alt=""标签。 但很快就知道我们需要采取行动,并认真考虑一下。 我们在考虑什么 我们一直在将AngularJS视为动态Web应用程序的框架,但担心它对我们的可访问性地位可能意味着什么。 我知道没有JavaScript的浏览器很可能会破坏高度动态的Angular应用程序(例如,嵌入到标记中的{{ item.something }}表达式,使用ng-repeat从单个<li>客户端构建列表部分视图(如空标签等)。 问题 我想知道这类框架是否有一个很好理解的最佳实践或信息资源,这些框架严重依赖于动态标记和行内标记,而对于屏幕阅读器甚至浏览器而言,这些标记可能会显得毫无用处。 JavaScript和CSS已关闭。 回答1 所有相同的原则都适用,例如对图像使用替代文本,对标题的充分利用,对内容使用适当的HTML(5)结构。 您可能是通过JavaScript创建的,但是近5年的屏幕阅读器了解了这一点,并使用浏览器的可访问性API来访问DOM。 非JavaScript方面根本不是可访问性问题。 不使用JavaScript的屏幕阅读器用户数量与一般人群相同,因此它是完全形成的HTML,而不是您在开发中看到的原始标记。 注意
  • 您如何部署Angular应用程序?(How do you deploy Angular apps?)
    问题 一旦进入生产阶段,您如何部署Angular应用程序? 到目前为止,我所见过的所有指南(甚至在angular.io上)都依靠可用于服务的Lite服务器和browserSync来反映更改-但是在完成开发后,如何发布该应用程序? 我是将所有已编译的.js文件导入index.html页面还是使用gulp进行压缩? 他们会工作吗? 生产版本中是否完全需要SystemJS? 回答1 您实际上是在将两个问题合而为一。 第一个是如何托管您的应用程序? 。 正如@toskv所提到的那样,它的问题实在太广泛了,无法回答,并且取决于许多不同的事物。 第二个是如何准备应用程序的部署版本? 。 您在这里有几种选择: 照原样部署。 就是这样-没有缩小,串联,名称修饰等操作。编译所有ts项目,将所有生成的js / css / ...源+依赖项复制到托管服务器,您就可以开始了。 使用特殊的捆绑工具(例如webpack或systemjs构建器)进行部署。 它们具有#1中缺少的所有可能性。 您可以将所有应用程序代码打包到HTML中引用的js / css / ...文件中。 systemjs器甚至允许您摆脱将systemjs包含在部署包中的需求。 您可以从Angular 8开始使用ng deploy从CLI部署应用程序。 ng deploy将需要与您选择的平台结合使用(例如@angular/fire )。
  • AngularJS与jQuery有何不同(How is AngularJS different from jQuery)
    问题 我只知道一个js库,那就是jQuery。 但是我小组中的其他编码人员正在将AngularJS更改为新项目中的默认库。 我对此一无所知。 与jQuery有何不同? 我已经为jQuery中的类似任务完​​成了一组功能。 我还能在AngularJS中使用jQuery吗? 回答1 Angular 1是一个框架,而Angular 2是一个平台。 (参考) 对于开发人员来说,Angular2提供了一些功能,除了在屏幕上显示数据外。 例如,使用angular2 cli工具可以帮助您“预编译”您的代码并生成必要的javascript代码(摇树)以将下载大小减小到35Kish。 Angular2模拟了Shadow DOM。 (参考) 这为服务器渲染打开了一扇门,该服务器渲染可以解决SEO问题并可以与在浏览器上不起作用的Nativescript等一起使用。 官方文件网站 ng-conf 2016的第一天主题演讲资源链接原始内容:基本上,jQuery是一个不错的工具,可用于您操纵和控制DOM元素。 如果只关注DOM元素而不关注Data CRUD,例如构建网站而不是Web应用程序,那么jQuery是顶级工具之一。 (您也可以为此目的使用AngularJS。) AngularJS是一个框架。 具有以下特点 双向数据绑定 MVW模式(MVC-ish) 模板自定义指令(可重用组件,自定义标记)
  • 2021年最不可错过学习前端框架和工具库
    最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?, 有很奇妙的感觉,因为我在最开始入门前端时,也是以Vue入的门,在“学完”Vue之后, 我也有了类似的疑问,但当时的我没多想,觉得“技多不压身”,反正都是前端,以后肯定用得上,那就学呗—— 结果我一路到现在都是处于这么一种状态:看到一个新的框架—看看文档和场景—嗯哼,不错—学! 虽然这样也造成我目前没有特别深入的方向,比如21届的大佬们在工程化、微前端、AST、NodeJS等等方向都已经开始深耕,我还在追着各种新框架学当弟弟,但不得不说,在学习新事物的过程中,你会逐渐对这些框架进行分类(比如我下面进行的归类),提取他们的共同点,这样在开始学习一个新东西时,你通常已经拥有了可复用的经验(比如在之前我感兴趣的研究了一些装饰器相关,使得后面入门Nest/Angular等都特别快),所以你的学习能力通常会是越来越强的。 这个问题的题主很明显遇到了大部分同学入门前端时会遇到的困惑:怎么这个还没学完又看到说那个才是主流的,怎么这个版本还没吃透又来了一个break change的新版本,怎么前端出框架的速度这么快?? 很简单,如果学有余力,学就是了。如果学不动了,就完全没必要盯着前沿方向学(虽然前端网红圈不是吹的),不要被“2021前端必备!再不学你就out了!” “学会这些,立刻月薪30k!”此类的标题迷花了眼
  • angular2样式指南-具有美元符号的属性?(angular2 style guide - property with dollar sign?)
    问题 父母和孩子通过Angular.io官方指南中的服务示例进行交流,它在Observable流名称中使用了美元符号。 在以下示例中,通知missionAnnounced$和missionConfirmed$ : import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable() export class MissionService { // Observable string sources private missionAnnouncedSource = new Subject<string>(); private missionConfirmedSource = new Subject<string>(); // Observable string streams missionAnnounced$ = this.missionAnnouncedSource.asObservable(); missionConfirmed$ = this.missionConfirmedSource.asObservable(); // Service message commands announceMission(mission: string) { this
  • 如何正确将Angle 2(npm)升级到最新版本?(How do I correctly upgrade angular 2 (npm) to the latest version?)
    问题 最近,我在https://angular.io/docs/ts/latest/tutorial/上开始了Angular 2教程。 并停止使用Angular 2 beta8。现在,我恢复了该教程,最新的beta是beta 14。 如果我只是简单地执行npm update ,则会更新一些模块(随本教程预装),但不会更新Angular2(我可以通过npm ls看到)。 如果我执行npm update angular 2或npm update angular2@2.0.0beta.14,它也不执行任何操作。 回答1 命令npm update -D && npm update -S将根据定义的版本范围将package.json中的所有软件包更新为最新版本。 你可以在这里读更多关于它的内容。 如果要从2.0.0-rc.1之前的版本更新Angular,则需要手动编辑package.json ,因为Angular被分为几个npm模块。 没有这个,angular2包指向2.0.0-beta.21 ,您将永远无法使用最新版本的Angular。 您可以在快速入门存储库中找到一个列表,其中包含一些您需要入门的最常用模块。 笔记: 保持软件包最新版本的一种很酷的方法是使用过时的npm,它会向您显示所有过时的软件包以及其想要的和最新的版本。 我们需要链接两个命令npm update -D和npm
  • 在Angular 2中使用HTTP Rest API(Using http rest apis with angular 2)
    问题 因此,我通过typescript在其网站上遵循angular 2指南,并停留在http api集成中。 我正在尝试制作一个可以通过soundcloud api搜索一首歌曲的简单应用程序,但是我很难实现和理解如何入门,在线资源却以多种不同方式做到这一点(我相信可以快速进行角度2语法更改早些时候)。 所以目前我的项目看起来像这样 app components home home.component.ts ... search search.component.ts ... app.ts ... services soundcloud.ts bootstrap.ts index.html 在该示例中没有任何花哨的内容,主文件将是 应用程序 import {Component, View} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {HomeComponent} from './home/home.component'; import {SearchComponent} from './search/search.component'; @Component({ selector: 'app', templateUrl: 'app
  • 并排运行Angular和AngularJS框架(Running Angular and AngularJS frameworks side by side)
    问题 我已经找到了描述如何将Angular(2)组件集成到AngularJS中的资源,但是所有这些都涉及到像Angular项目一样设置AngularJS项目,需要来自TypeScript的编译器,需要ES6,需要导入语句。 我只想在AngularJS应用程序中使用Angular组件,而又不破坏我现有的工作流程。 这有可能吗,如果可以的话,我该如何实现呢? 我以为这是升级模块的目的,但是我看过的所有教程都需要AngularJS应用程序中的import语句,该程序需要一个transpiler。 如果Angular应用程序需要提前进行编译,那是可以的,但是由于AngularJS应用程序正在django服务器上运行,因此无法对其进行编译,因此我不希望使用Transpiler运行其他服务器。 需要明确的是,我当前的AngularJS应用程序是由django提供的。 我想包括一些Angular组件。 这些在开发过程中不会被触及,因此可以在不影响工作流程的情况下提前进行转译。 有没有一种方法可以将这些组件添加到AngularJS应用中,而无需在AngularJS应用中添加转译器? 回答1 将AngularJS应用程序逐步升级到Angular。 成功升级的关键之一是通过在同一应用程序中并排运行两个框架,并将AngularJS组件一个接一个地移植到Angular,来逐步进行升级。
  • 前端项目中所使用的软件、插件、技术和框架以及一些组件库
    前端项目中所使用的软件、技术和框架 背景: 技术在不停地更新, 同步的软件框架什么的也一直在更新. 看到好多新手刚学前端时不知道使用那些软件和一些框架, 不知道在哪里找资源. 刚好趁这个机会写一篇文章分享一下资源. 最开始也写过类似的文章, 感觉写的不全面, 这篇当做一个补充吧. 一.编程软件 前端的编程软件挺多的, vscode、WebStorm、HBuilder、Sublime Text、DreamWeaver、Notepad++、微信开发者工具、Editplus和强大的记事本等。针对这几个软件做下介绍。排名不分先后。 vscode(全称Visual Studio Code) 软件截图 Visual Studio Code是一个轻量级但功能强大的源代码编辑器。它具有对JavaScript,TypeScript和Node.js的内置支持,并具有丰富的其他语言(例如C ++,C#,Java,Python,PHP,Go)和运行时(例如.NET和Unity)扩展的生态系统。优点在于可以在软件内一键下载插件,并且插件种类比较多。软件启动非常快,下载的安装包也比较小。但是如果安装好多插件,软件自然而然也会占多一点的内存 WebStorm 软件截图 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、