您的位置:首页 > 编程学习 > > 正文

angular使用方法(Angular环境搭建及简单体验小结)

更多 时间:2022-01-25 00:42:14 类别:编程学习 浏览量:2696

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环境搭建的资料请关注开心学习网其它相关文章!