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