Angular快速了解并使用

对目前的我来说，前端就是能够拿来即用就可以，并没有多深入的学习，重点还是在后端，所以，有些东西就需要快速的了解并使用。

TypeScript

  Angular是基于TypeScript的语法，所以，它是跳不过的，但是快速了解TypeScript也很快，官方有一篇文档就是5分钟快速了解。在目前的我看来，它其实就是把JavaScript又封装了一下，将JavaScript这个弱类型语言，又增加了一些规范，变成了稍微强一点的“强类型语言”。编译完之后，它依然是一个JavaScript。
  所以，我们只需要知道，冒号是用来定义类型的就可以了。

小提示：如果我们在接口或者参数类型中见到参数名后面有’ ? : '，这样问号加冒号的形式，就表示这是个可选参数，可有可无的参数。

Angular

  想要快速学习一个这样的框架，我觉得语法不是最重要的，像什么if判断，for循环，数据绑定，这些都很简单，基本看一遍就会了。所以我们主要是学这些：

• 项目结构
• 组件
• 路由
• 请求数据
• ······

  只有学完了这些相关的内容，我才能迅速上手一个框架，并做出来一个hello world出来。

上手第一步

  那我们就根据官方教程创建一个项目出来。以下是项目的目录结构。

  我们能看到，这里面有很多文件，这些先统统不用管，因为大部分都是配置文件，我们基本是不改动这些文件，那在哪写代码呢？我们直接看src文件夹下边的app文件夹。

  我们能看到这里有css文件，html文件，ts文件这些东西我们一看就知道是干什么的，写样式、写标签、写TypeScript。

• app.component.spec.ts 这个文件我几乎没有动过，先不用管
• app.component.ts 这个文件就很重要了，我们大部分除了写html就是写这个了，在html里绑定的数据，定义的函数什么的都在这里面写。
• app.module.ts 看这个名字我们就知道，模块，组件的意思，我们定义的组件基本上是要在这里声明一下才能使用，比如看我还有两个文件夹，layout和login，这是两个组件，这些都需要在这里声明一下才能使用。
• app-routing.module.ts 如果项目添加了路由模块，就会有这个文件，如果没有，那我们使用命令 ng generate module app-routing --flat --module=app就可以生成该文件。

  一个项目里有很多页面，每个页面或者每个区域都可以是一个组件，我们就来练习一下创建组件的命令：ng generate component login，这是创建一个叫login的组件，然后我们再创建一个布局组件：ng generate component layout。
  然后我们就能看到，组件里的文件有哪些，比如这个login组件里：

login.component.ts这个文件里主要是定义变量和函数，当然还有一些生命周期钩子函数。

开发实战

  那我们来写一个小小小小的项目，练练手就能对Angular有所了解。
  提一个小小的需求，**做一个登录界面，然后，输入用户名和密码之后，弹窗出现登录成功，并显示输入的用户名和密码，然后跳转到布局页面。大体效果如下：


  这个界面是用的ng-zorro组件做的小demo，我是实在不想写CSS，所以就这么丑着来吧。

引入ng-zorro-antd组件

  我们在package.json文件中引入依赖"ng-zorro-antd": "^9.3.0"。
  接着引入全局的css文件，在src文件夹下的style.css文件里引入：

@import "~ng-zorro-antd/ng-zorro-antd.min.css";
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */

然后在app.module.ts文件里引入ng-zorro-antd组件。

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import {NgZorroAntdModule} from 'ng-zorro-antd';



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

理论上来说是这样引入的。

构建布局组件

  我们看效果图，布局组件里有一个侧边栏，一个头部，一个主页，这三个是不是可以分别做成组件呢？没错，我又在layout里创建了三个组件：

依旧是使用创建组件的命令，例如：ng generate component layout/header。

登录组件

  基本的文件我们都有了，现在写登录组件，其中的login.component.html文件的代码如下：

<div nz-row>
  <div nz-col nzSpan="7">
    <input type="text" nz-input [(ngModel)]="username" placeholder="Username" />
  </div>
</div>
  <br>
<div nz-row>
  <div nz-col nzSpan="7">
    <input type="password" nz-input [(ngModel)]="password" placeholder="Password" />
  </div>
</div>
  <div nz-row >
    <div nz-col [nzSpan]="4">
      <label nz-checkbox [(ngModel)]="remember">
        <span>Remember me</span>
      </label>
    </div>
    <div nz-col [nzSpan]="4">
      <a class="login-form-forgot">Forgot password</a>
    </div>
  </div>
<div nz-row>
  <div nz-col nzSpan="7">
    <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'" (click)="submitForm()">Log in</button>
    Or <a> register now! </a>
  </div>
</div>

然后是login.component.js文件代码如下：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {NzMessageService} from 'ng-zorro-antd';
import {Router} from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username = '';
  password = '';
  remember = true;


  submitForm(): void {
    if (this.username == '' || this.password == ''){
      let content = '用户名或密码不能为空！';
      this.message.create('error', content,{nzDuration: 2000});
    }else {
      let content = `登录成功--》 ${"用户名："+this.username+"\n"+"密码："+this.password}`;
      this.message.create('success', content,{nzDuration: 2000});
      this.router.navigateByUrl('home').then();
    }
    console.log(this.username+"="+this.password+"="+this.remember);
  }

  constructor(
    private message: NzMessageService,
    private router: Router
  ) {
  
  }
  ngOnInit(): void {
  }
}

路由组件

  少不了还有路由组件，app-routing.module.ts的代码如下：

import { NgModule } from '@angular/core';
import {Routes,RouterModule} from '@angular/router'
import {LayoutComponent} from './layout/layout.component';
import {LoginComponent} from './login/login.component';
import {MainComponent} from './layout/main/main.component';


const routes: Routes = [
// 主页面
  {
    path: 'home',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'index',
        pathMatch: 'full'
      },
      {
        path: 'index',
        component: MainComponent
      }
    ]
  },
  // 登录
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '**',
    redirectTo: 'home/index',
    pathMatch: 'full'
  }
];

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

  理论上来说这样应该是可以运行的，但是我多写了一点东西，所以更具体的代码请看码云仓库，可以直接把该博客的代码下载下来
https://gitee.com/siumu/blog_code.git