Angular环境搭建及简单体验小结 angular环境安装

2023-03-26 21:46| 来源: 网络整理| 查看: 265

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环境搭建的资料请关注本站其它相关文章！

【本文地址】

公司简介

联系我们