Angular介绍
Angular是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
根据项目数统计angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。
Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。
关于Angular版本，Angular官方已经统一命名Angular 1.x统称为Angular JS；Angular 2.x及以上统称Angular；
目前2019年12月25日angular最新版本angular9.x。根据官方介绍，Angular每过几个月就会更新一个版本。Angular2.x以后所有的Angular版本用法都是一样的，此教程同样适用于Angular7.x 、Angular8.x、Angular9.x 以及未来的其它版本…。
学习Angular必备基础
必备基础：html 、css 、js、es6、ts
一、安装开发环境
npm install -g typescript npm install -g @angular/cli
二、创建hello-world项目
创建项目
ng new angular2-hello-world
查看新建项目的目录结构
cd angular2-hello-world sudo apt install tree tree -F -L 1
. ├── angular.json ├── karma.conf.js ├── node_modules/ ├── package.json ├── package-lock.json ├── README.md ├── src/ ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json 2 directories, 8 files
查看src目录里的结构
cd src tree -F
启动应用,可以在http://localhost:4200查看运行结果
ng serve
创建hello-world组件
ng-generate component hello-world
在hello-world.component.ts中定义新的组件
//导入依赖
import { Component, OnInit } from '@angular/core';
//通过注解声明控件的选择器和相关的文件url
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
//组件的数据模型
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
在hello-world.component.html中定义模板
mango, hello-world works!
为了使用新增加的组件，我们把 标签添加到app.component.html中。
执行 ng serve查看执行效果
三、创建展示用户的user-item指令
生成指令组件
mango@mango:~/angular2-hello-world$ ng generate component user-item CREATE src/app/user-item/user-item.component.css (0 bytes) CREATE src/app/user-item/user-item.component.html (24 bytes) CREATE src/app/user-item/user-item.component.spec.ts (641 bytes) CREATE src/app/user-item/user-item.component.ts (286 bytes) UPDATE src/app/app.module.ts (585 bytes)
为组件声明并初始化一个name字段
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-item',
templateUrl: './user-item.component.html',
styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
name: string,
constructor() {
this.name = 'mango';
}
ngOnInit(): void {
}
}
在模板中显示变量name的值
{{name}} welcome into Angular world.
将app-user-item添加到app.component.html中，查看浏览器执行结果。
四、创建用户列表user-list指令
创建新组件
mango@mango:~/angular2-hello-world$ ng generate component user-list CREATE src/app/user-list/user-list.component.css (0 bytes) CREATE src/app/user-list/user-list.component.html (24 bytes) CREATE src/app/user-list/user-list.component.spec.ts (641 bytes) CREATE src/app/user-list/user-list.component.ts (286 bytes) UPDATE src/app/app.module.ts (677 bytes)
在组件中声明并初始化names数组
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
names: string[];
constructor() {
this.names = ['mango', 'pear', 'grap', 'apple'];
}
ngOnInit(): void {
}
}
在组件的模板中递归遍历names数组
- Hello {{name}}
将组件添加app.component.html中，查看浏览器执行结果。
五、组合使用user-item和user-list
修改user-item的name参数使用外部输入
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-user-item',
templateUrl: './user-item.component.html',
styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
@Input()
name!: string;
constructor() {
}
ngOnInit(): void {
}
}
修改user-list的模板
保存查看浏览器执行情况。
六、启动过程分析
ng会首先从angular.json中查找程序的main入口为src/main.ts
{
"outputPath": "dist/angular2-hello-world",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
查看main.ts文件，发现启动的Module是AppModule，位于app/app.module.ts中
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
在app.module.ts中可以看到，通过NgModule标注声明了本模块中的组件以及依赖的外部Module及作为顶层组件启动的AppComponent；
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { UserItemComponent } from './user-item/user-item.component';
import { UserListComponent } from './user-list/user-list.component';
@NgModule({
declarations: [
AppComponent,
HelloWorldComponent,
UserItemComponent,
UserListComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
以上就是Angular环境搭建及简单体验的详细内容，更多关于Angular环境搭建的资料请关注脚本之家其它相关文章！