Angular基礎認識

時間 2019-11-09

原文原文鏈接

Angular基礎認識html

搭建環境

若是要是安裝比較慢的話，那就用淘寶鏡像，也就是cnpm；webpack

全局安裝Angulares6

cnpm install -g @angular/cli

ng new angular2-demo-master --skip-install

cd angular2-demo-master

起服務bootstrap

ng serve

安裝webpack網絡

cnpm install webpack --save

運行程序angular2

npm start

編寫程序

在項目目錄下新建一個名爲app的文件夾，全部的程序都在這個文件裏編寫；app

新建app.component.html文件框架

<div class="cmp-1">
  <h1>根組件</h1>
  <p>
    嘿嘿，{{ greeting }}！
    <label>
      <input type="checkbox" [(ngModel)]="isShowMore">
      是否顯示詳細信息
    </label>
  </p>
  <p highlight *ngIf="isShowMore">Angular 2 是 Google 推出的新一代的Web開發框架</p>
  <my-child [message]="msgToChild" (outer)="receive($event)"></my-child>
  <p>從子組件得到的消息：{{ msgFromChild || '暫無' }}</p>
</div>

新建app.component.ts文件

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

import { LoggerService } from './logger.service';

@Component({
  selector: 'my-app',
  templateUrl: './app/app.component.html'
})
export class AppComponent {
  private greeting: string;
  private isShowMore: boolean;
  private msgToChild: string;
  private msgFromChild: string;

    constructor(private logger: LoggerService) {    }

  ngOnInit() {
    this.greeting = 'Angular 2';
    this.msgToChild = 'message from parent';
    this.logger.debug('應用已初始化');
  }

  receive(msg: string) {
    this.msgFromChild = msg;
  }
}

新建app.module.ts文件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { ChildComponent } from './child.component';
import { HighlightDirective } from './highlight.directive';
import { LoggerService } from './logger.service';

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ChildComponent, HighlightDirective ],
  providers: [ LoggerService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

新建child.component.html文件

<div class="cmp-2">
  <h1>子組件</h1>
  <p>嘿嘿，我從父組件獲取的值是：{{ message }}</p>
  <button (click)="sendToParent()">發送到父組件</button>
</div>

新建child.component.ts文件

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-child',
  templateUrl: './app/child.component.html'
})
export class ChildComponent {
  @Input() private message: string;
  @Output() private outer = new EventEmitter<string>();
    constructor() {    }
  
  sendToParent() {
    this.outer.emit('message from child');
  }
}

新建highlight.directive.ts文件

import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
  selector: "[highlight]"
})
export class HighlightDirective {
  constructor(
    private el: ElementRef, 
    private renderer: Renderer
  ) { 
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

新建logger.service.ts文件

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

@Injectable() 
export class LoggerService {
  constructor() { }

  debug(msg: string) {
    console.log(msg);
  }
}

注意：以上文件都是在app文件夾下建立的；

修改文件

index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Angular 2 快速上手</title>
    <base href="/">
    <style>
      html {font-family:'Microsoft Yahei';background-color:#F7F48B;}
      p {margin:8px 0;padding:0;}
      h1 {font-size:20px;}
      button,input {font-size:16px;}
      .cmp-1 {background:#A1DE93;border-radius:5px;width:500px;height:300px;margin:100px auto;padding:20px;}
      .cmp-2 {border:1px solid #ccc;border-radius:5px;background-color:#70A1D7;padding: 10px;margin:20px 0;}
    </style>
  </head>
  <body>
    <my-app>加載中...</my-app>
    <script src="bundle.js"></script>
  </body>
</html>

main.ts文件

import 'zone.js';

import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

// JiT啓動模式
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

webpack.config.js文件

module.exports = {
  entry: './main.ts',

  output: {
    filename: './bundle.js'
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
};