Angular 基础部分 1.1 简介

最新推荐文章于 2022-03-05 12:11:43 发布

QiaoranC

最新推荐文章于 2022-03-05 12:11:43 发布

阅读量362

点赞数

分类专栏： ng-book-2

ng-book-2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基础部分：创建投票网站

building user components
user input from forms
lists of objects to views
user clicks
deployer app to server

Building Components

ng new XX

目录结构

根目录主要是一些设定 config

├── README.md
├── .angular-cli.json // angular-cli configuration file
├── e2e/ // end to end tests
├── karma.conf.js // unit test configuration
├── node_modules/
├── package.json // npm configuration
├── protractor.conf.js // e2e test configuration
├── src/ // 项目源数据
└── tslint.json // linter config file

打开src/index.html

<body>
    <app-root>Loading...</app-root>
</body>

app-root tag是底层application，位于app之下，
tag可以自定义
loading…会在app-root加载前显示

创建component

给浏览器定义新的tag，就像原生 <select> or <form> <video>
ng generate component hello-world

会在app/目录下生成 hello-world文件夹包含
hello-world.component.css
hello-world.component.html
hello-world.component.spec.ts
hello-world.component.ts

同时自动注册update app.module

导入依赖

hello-world.component.ts

import { Component, OnInit } from '@angular/core'; //导入component OnInit
@Component({ //ts语法 declaring 声明 helloword 为component
  selector: 'app-hello-world', //注册<app-hello-world> tag
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

@angular/core where to find the dependencies

templateUrl 导入HTML
template 也可以直接写入HTML，但是目前IDE不支持对应的HTML语法高亮

@Component({
  selector: 'app-hello-world',
  template: `
    <p>
      hello-world works inline!
      </p>
  `
})

styleUrls导入css, 一个style对应一个component

注意app.module.ts 自动生成的路径可能有问题，
把../src/app/hello-world/hello-world.component换成
./hello-world/hello-world.component

使用component，直接在html文件tag即可
<app-hello-world></app-hello-world>

在组件中添加数据

创建并显示用户列表，需要先提交一个独立用户。
先新建一个component: user-item
ng generate component user-item
并添加到app.component.html

在user-item.component.ts中添加name属性

export class UserItemComponent implements OnInit { 
  name: string; // added name property

  constructor() {
    this.name = 'Jack'; // set the name
  }

  ngOnInit() {
  }
}

设置name属性，type为string
在constucture中，设置name的值

然后在user-item.component.html中用 {{ }}表达变量

<p>
  Hello {{ name }} // 等于 this.name 也就是Jack
</p>

*ngFor 遍历数组
新建user-list component
新建数组 array
在component.ts中，设置

names:string [];
... 
this.names = ['A1','B1','C1']

*ngFor
- 遍历数组每一个值
- 每个值生成一个单独的tag

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

*ngFor 使用ngFor指定, 类似于for
let name of names 其中names指的是数组，name为局部变量，也就是把names每一个数值分别分配到name变量中
hello {{ name }} 执行每一个name
这里写图片描述

连接两个component

把UserItem作为子组件导入到UserList中
UserItem作为template,

配置 UserListComponent 渲染 UserItemComponent(in the template)
配置 UserItemComponent 接收name变量
配置 UserListComponent template 把name传递到 UserItemComponent.

在userItem中导入

import {
  Component,
  OnInit,
  Input // <--- added this
} from '@angular/core';

...
export class UserItemComponent implements OnInit {
  @Input() name: string; // <-- added Input annotation
  ...
}

在userList中渲染

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

在Angular中 [name]表示递入一个名为name的值

引导程序

用Angular CLI作为app主入口
ng serve 会根据 .anjular-cli.json中的配置，打开入口

.anjular-cli.json中main设定为主入口，默认指定为src/main.ts
处理一个Angular module，使用AppModule引导app，路径为src/app/app.module.ts
AppModule指定一个默认最高级的组件，默认为AppComponent
其余子组件依赖于AppComponent

NgMoudle Angular主要概念之一是模块设计，当启动一个Angular app,并不是直接启动组件，而是创建一个NgMoudle指向一个需要加载的组件。本文路径在src/app/app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent,
    UserItemComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

declarations 定义在这个模块中的组件，Angular理念是：
必须把components在NgModule中声明，才能使用

imports 导入这个模块所需要的依赖(dependencies),用于templates 或者依赖注入(dependency injection)
providers 用于依赖注入（dependency injection）
bootstrap 启动app时机，已AppComponent用作最高级别组件启动