会vue就会angular 6 - 项目初始化

有不清楚的地方可以加QQ群: 142681686. 不会24小时全天问答(毕竟还有工作), 但是当你遇到问题没地方找到答案的时候,来这里提问一下,死马当活马医万一我看到了刚好也知道答案呢? 也不浪费你啥是不是!!

前言

因项目要求, 需要使用angular 6.X, 然后就边学边使用angular开发项目; 在学习过程中碰到很多坑, 而且国内使用angular的开发这挺少的, 资料比vue相关的资料少太多了.所以在这里记录下从vue技术栈切换到angular.有的朋友会说: 我不会typescript呢, 对学习angular有障碍吗? 我个人觉得没啥障碍, 你一步一步的往下走,慢慢的你就会ts了.

angular-cli

在vue中咱们开始一个新的项目都是使用vue-cli,同样的,angular也有自己的脚手架工具angular-cli;使用方式和vue-cli有很多类似.

1. 全局安装脚手架: npm install -g @angular/cli
2. 创建一个新项目: ng new ng-hello
3. 启动服务器: cd ng-hello && ng serve --open
4. 编译生成生产环境的代码: ng build:bundle

angular组件

angular组件和vue组件一样包含三个部分: 模版(html) + 样式(css) + 交互(js/ts), 比如我们来写一个简单的欢迎组件(welcome):

welcome.ts

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
  public name = 'Angular';
  clickHandler() {
    console.log('你点我干嘛?');
  }
}

welcome.html

<h2 (click)="clickHandler($event)">你好, 欢迎来到{{ name }}!</h2>

welcome.css

h2{
  font-size: 18px;
  color: red;
}

这里的html的内容对应vue里<template>中的内容, ts文件对应<script>中的内容, css对应<style>中的内容.现在这就是我们一个可用的angular组件了; 至于说 @Component({}) 你不明白是什么东西,你现在可以不用管, 只要记住组件是这样写的就可以.selector的值就是等会你在使用这个组件的时候的标签名称.

组件中定义了一个变量name属性, 以及一个函数clickHandler;name属性就相当于咱们vue中data属性中定义的属性, clickHandler相当于vue中methods中的函数.

使用组件

1. 修改app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './components/welcome/welcome';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

把刚才咱们写的组件导入进来, 并且在declarations的数组中增加一条WelcomeComponent; 这个WelcomeComponent就是咱们在welcome中export导出的类 2. 在app.component.html中增加一句:

<app-welcome></app-welcome>

3. 大功告成

最后

恭喜你, 你写完这个后你基本上angular已经入门了, 接下来咱们会一步一步的对着vue的官方文档, 告诉你vue每一个API在angular中与之对应的用法.