Angular学习笔记整理 ~ Langery Stone's Blog

Angular学习笔记和整理

所需搭建环境

node
git

环境搭建

全局安装Angular Cli,新建文件夹Agular

  $cd Angular
  $npm install -g @angular/cli

创建并进入新项目文件夹

  $ng new Text
  $cd Text

启动项目

  ng serve --open

初识

组件类文件:

app.component.ts——组件的类代码，TpeScript
app.component.html——组件的模板
app.component.css——组件的私有CSS

创建新的独立组件

  ng generate component story

生成一个新的文件夹(story),并生成storyComponent的三个文件;

  import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'app-story', // 组件选择器(CSS元素选择器)
    templateUrl: './story.component.html',  // 组件模板文件位置
    styleUrls: ['./story.component.css']  // 组件私有CSS样式文件位置
  })
  export class StoryComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }

  }

添加CSS属性，在app.component.css文件中：

    h1 {
        color: #369;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 250%;
        text-align: center;
    }
    h2, h3 {
        color: #444;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: lighter;
    }
    body {
        margin: 2em;
    }
    body, input[text], button {
        color: #888;
        font-family: Cambria, Georgia;
    }
    /* everywhere else */
    * {
        font-family: Arial, Helvetica, sans-serif;
    }

添加story属性

在story.component.ts中添加story属性:

  story = 'Lost Love';

显示story

在story.component.html中删除默认内容，改为story属性

  <p>{{story}}<p>

显示story视图

在app.component.html中增加：

  <h1>{{title}}</h1>
  <app-story></app-story>

创建story类

在src/app文件夹中为story类创建一个文件，并添加id和name

  export class story {
    id: number;
    name: string;
  }

回到story.component.ts中:

  import { Component, OnInit } from '@angular/core';
  import { story } from '../story';  

  @Component({
    selector: 'app-story',
    templateUrl: './story.component.html',
    styleUrls: ['./story.component.css']
  })
  export class StoryComponent implements OnInit {

    // story = 'Lost Love';
    story: story = {   // 重新进行属性的定义
      id: 1,
      name: 'Lost Love'
    };

    constructor() { }

    ngOnInit() {
    }

  }

显示story对象

在story.component.html中增加:

  <div><span>id:</span>{{story.id}}</div>
  <div><span>name:</span>{{story.name}}</div>

双向绑定

在story.component.html中增加:

  <div>
    <label>
      name:
      <input [(ngModel)]="story.name" placeholder="name">
    </label>
  </div>

在app.module.ts中修改：

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  // NgModel lives here
  import { FormsModule } from '@angular/forms'; // 执行双向绑定


  import { AppComponent } from './app.component';
  import { StoryComponent } from './story/story.component';


  @NgModule({
    declarations: [
      AppComponent,
      StoryComponent
    ],
    imports: [
      BrowserModule,
      FormsModule // 调用双向绑定
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

显示数据列表

创建模拟(mock)数据

在src/app/文件中创建mock-story.ts文件:

    import { story } from './story';

    export const STORY: story[] = [
      { id: 1, name: 'today' },
      { id: 2, name: 'tomorrow' }
    ];

显示数据

打开story.component.ts并导入模拟数据:

    import { Component, OnInit } from '@angular/core';
    import { story }  from '../story';

    import { STORY } from '../mock-story';

    @Component({
      selector: 'app-story',
      templateUrl: './story.component.html',
      styleUrls: ['./story.component.css']
    })
    export class StoryComponent implements OnInit {

      story = STORY;

      constructor() { }

      ngOnInit() {
      }

    }

使用*ngFor列出数据

在story.component.html中列出数据:

    <h2>Story</h2>
    <ul class="story">
      <li *ngFor="let story from story">
        <span class="list">{{story.id}}</span>{{story.name}}
      </li>
    </ul>

修改CSS数据

story.component.css文件:

    .story {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .story li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: #EEE;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
    .story li.selected:hover {
      background-color: #BBD8DC !important;
      color: white;
    }
    .story li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }
    .story .text {
      position: relative;
      top: -3px;
    }
    .story .list {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }

服务

创建StoryService

    $ng generate service hero

story.service.ts内容：

    import { Injectable } from '@angular/core';

    @Injectable()
    export class StoryService {

      constructor() { }

    }

获取story数据

    import { Injectable } from '@angular/core';

    import { story } from './story';
    import { STORY } from './mock-story';

    @Injectable()
    export class StoryService {
        getStory(): story[] {
          return STORY;
        }

      constructor() { }

    }

提供StoryService

    $ng generate service story --module=app

在app.module.ts中增加:

    providers: [
        StoryService
    ]

修改StoryComponent

在story.component.ts中删除STORY，导入StoryService:

    import { Component, OnInit } from '@angular/core';
    import { story }  from '../story';

    import { StoryService } from '../story.service';

    @Component({
      selector: 'app-story',
      templateUrl: './story.component.html',
      styleUrls: ['./story.component.css']
    })
    export class StoryComponent implements OnInit {

      story:story[];

      constructor() { }

      ngOnInit() {
      }

    }

注入StoryService

    constructor(private StoryService: StoryService) { }

添加getStory()

    getStory(): void{
        this.story = this.StoryService.getStory();
    }
    ngOnInit() {
     this.getStory();
    }

路由

生成APPRoutingModule模块类；

    $ng generate module app-routing --flat --module=app

生成文件app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: []
    })
    export class AppRoutingModule { }

修改app-routing.module.ts

    import { NgModule } from '@angular/core';
    // import { CommonModule } from '@angular/common';
    import { RouterModule, Routes } from '@angular/router';

    @NgModule({
      // imports: [
      //   CommonModule
      // ],
      // declarations: []
      exports: [ RouterModule ]
    })
    export class AppRoutingModule { }

添加路由出口：

在app.component.html中添加：

    <h1>{{title}}</h1>
    <router-outlet></router-outlet>
    <app-story></app-story>

添加路由定义

在app-routng.module.ts中添加：

    import { NgModule } from '@angular/core';
    // import { CommonModule } from '@angular/common';
    import { RouterModule, Routes } from '@angular/router';
    // 定义路由
    import { StoryComponent } from './story/story.component';

    // path:用于匹配浏览器地址栏中URL的字符串
    // component: 当导航到此路由创建组件
    const routes: Routes = [
      { path: 'storys', component: StoryComponent }
    ];
    @NgModule({
      // 初始化路由器
       imports: [
        // CommonModule
        RouterModule.forRoot(routes)
       ],
       exports: [ RouterModule ]
    })

    export class AppRoutingModule { }

添加路由链接:

在app.component.html中添加:

    <h1>{{title}}</h1>
    <nav>
      <a routerLink="/storys">story</a>
    </nav>
    <router-outlet></router-outlet>
    <app-story></app-story>

添加多个视图

    $ng generate component person

修改person.component.ts

    import { Component, OnInit } from '@angular/core';
    import { story } from '../story';

    import { StoryService } from '../story.service';

    @Component({
      selector: 'app-person',
      templateUrl: './person.component.html',
      styleUrls: ['./person.component.css']
    })
    export class PersonComponent implements OnInit {

      story: story[] = [];

      constructor(private StoryService: StoryService) { }

      ngOnInit() {

      }
    }

添加默认路由

    { path: '', redirectTo: './person', pathMatch: 'full' }

添加页面入口

在app.component.html中修改：

    <h1>{{title}}</h1>
    <nav>
      <a routerLink="/storys">story</a>
      <a routerLink="/person">person</a>
    </nav>
    <router-outlet></router-outlet>
    <app-story></app-story>

路由修改

app-routing.module.ts中修改:

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { StoryComponent } from './story/story.component';
    import { PersonComponent } from './person/person.component';

    const routes: Routes = [
      { path: '', redirectTo: './story6', pathMatch: 'full' },
      { path: 'storys', component: StoryComponent },
      { path: 'person', component: PersonComponent },
    ];

    @NgModule({
       imports: [
        RouterModule.forRoot(routes)
       ],
      exports: [ RouterModule ]
    })

    export class AppRoutingModule { }

笔记 Learning Notes Informal essay Environmental deployment

本博客所有文章除特别声明外，均采用 CC BY-SA 3.0协议。转载请注明出处！