脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular环境搭建

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

 更新时间：2021年05月28日 14:28:40   作者：无风听海  
Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目，本文通过实例代码给大家分享Angular环境搭建及简单体验，感兴趣的朋友跟随小编一起学习吧

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中定义模板

<p>mango, hello-world works!</p>

为了使用新增加的组件，我们把标签添加到app.component.html中。

<h1>
  <app-hello-world></app-hello-world>
</h1>

执行 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的值

<p>
    {{name}} welcome  into Angular world.
</p>

将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数组

<ul>
    <li *ngFor="let name of names">Hello {{name}}</li>
</ul>

将组件添加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的模板

<ul>
    <app-user-item *ngFor="let name of names" [name]="name"></app-user-item>
</ul>

保存查看浏览器执行情况。

六、启动过程分析

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

您可能感兴趣的文章:

相关文章

  • Angular Ngrx Store应用程序状态典型示例详解

    Angular Ngrx Store应用程序状态典型示例详解

    这篇文章主要为大家介绍了Angular Ngrx Store应用程序状态典型示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • AngularJS实践之使用ng-repeat中$index的注意点

    AngularJS实践之使用ng-repeat中$index的注意点

    最近通过客户的投诉主要到在ng-repeat中使用了$index引发的一个bug，下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训。有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-12-12
  • angular $watch 一个变量的变化(实例讲解)

    angular $watch 一个变量的变化(实例讲解)

    下面小编就为大家带来一篇angular $watch 一个变量的变化(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • angular简介和其特点介绍

    angular简介和其特点介绍

    这篇文章主要介绍了angular简介和其特点介绍,本文讲解了关于和jquery的比较、关于适用场合、关于UI的结合、关于angularjs的特点等内容,需要的朋友可以参考下
    2015-01-01
  • 详解如何为你的angular app构建一个第三方库

    详解如何为你的angular app构建一个第三方库

    这篇文章主要介绍了详解如何为你的angular app构建一个第三方库，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 浅谈Angular4实现热加载开发旅程

    浅谈Angular4实现热加载开发旅程

    本篇文章主要介绍了浅谈Angular4实现热加载开发旅程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Angular 2父子组件数据传递之@Input和@Output详解 (上)

    Angular 2父子组件数据传递之@Input和@Output详解 (上)

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。
    2017-07-07
  • angularjs创建弹出框实现拖动效果

    angularjs创建弹出框实现拖动效果

    这篇文章主要为大家详细介绍了angularjs创建弹出框实现拖动效果的相关资料，angularjs modal模态框创建可拖动的指令，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • AngularJS 表达式详解及实例代码

    AngularJS 表达式详解及实例代码

    这篇文章主要介绍了AngularJS 表达式，这里整理了详细的资料，有需要的小伙伴可以参考下
    2016-09-09
  • 浅谈AngularJs指令之scope属性详解

    浅谈AngularJs指令之scope属性详解

    下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10

最新评论