Angular基础认识

搭建环境

如果要是安装比较慢的话，那就用淘宝镜像，也就是cnpm；

• 全局安装Angular

cnpm install -g @angular/cli

• 创建项目目录

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

• 进入项目目录

cd angular2-demo-master

• 起服务

ng serve

• 安装webpack

cnpm install webpack --save

• 运行程序

npm start

编写程序

在项目目录下新建一个名为app的文件夹，所有的程序都在这个文件里编写；

• 新建app.component.html文件

    
  
     
根组件
  
     
    嘿嘿，{
   { greeting }}！                是否显示详细信息      
  
     
Angular 2 是 Google 推出的新一代的Web开发框架
  
       
     
从子组件获得的消息：{
   { msgFromChild || '暂无' }}
    

• 新建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文件

    
  
     
子组件
  
     
嘿嘿，我从父组件获取的值是：{
   { message }}
  
     发送到父组件
    

• 新建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
    
     ();    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文件

      
                        
    
     加载中...
          

• 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'      }    ]  }};

知识点总结

模块的两层含义

• 框架代码以模块形式组织（文件模块）

• 功能单元以模块形式组织（应用模块）

文件模块

• @angular/core 核心模块

• @angular/common 通用模块

• @angular/forms 表单模块

• @angular/http 网络模块

应用模块

知识点也总结完了，接下来就看看效果吧：