Angular2官网项目

来自官网:

    这篇《英雄指南》涵盖`了 Angular 的核心原理。这次构建的应用会涉及很多特性：获得并显示英雄列表，编辑所选英雄的详情，并在英雄数据的多个视图之间建立导航。这些特性，在成熟的、数据驱动的应用中经常见到。

完成本教程后，我们将学习足够的 Angular 核心技术，并确信 Angular 确实能做到我们需要它做的。 我们将涵盖大量入门级知识，同时我们也会看到大量链接，指向更深入的章节。

   一 ：为本地开发搭建环境

        a.检查@angular/cli版本.

        在命令行输入 ng -v  -----版本号必须大于1.0.0-beta.24

       b.新建工程
　        　工程所在目录，命令行ng new 项目名称 --style=scss　　带style参数原因：ng-bootstrap要求使用scss（scss--》css的预编译语言 https://www.sass.hk/） 

      c.运行项目

           命令行进入你的项目根目录

             执行  cnpm start

          在浏览器输入http://localhost:4200/

     d.布局会引用Bootstrap布局（引入bootstrap插件）

          只使用它的css和一些图标样式---->只需引入css文件和fonts文件

          1.在src/assets文件下创建bootstrap文件夹

                目录结构:

                -assets

                    -bootstrap

                        -css

                            -bootstrap.min.css

                        -fonts

         2.在.app/app.component.html

        <span class="glyphicon glyphicon-plus"></span>

        3.浏览器页面呈现出图标。引入bootstrap成功。

二:显示此英雄

    .app/app.compoent.ts

            export class AppComponent {      title = 'Tour of Heroes';      hero = 'Windstorm';}

    ./app/app.component.html

        <h1>`title`</h1><h2>`hero` details!</h2>`

保存后，浏览器应自动刷新，显示标题和英雄。

这里的双大括号是Angular中的插值表达式绑定语法。它们表示组件的title和hero属性的值会作为字符串插入到HTML标签中间。

三:General对象

    创建一bean文件夹(用于存放数据模型)

        ./src/bean/General.ts

                创建General.ts

export class General{

constructor(

public id:number,

public name:String,

public source:String

){}

}

        在.app/app.component.ts

            引入

            import {General}  from "../bean/General";

            general: General= {          id: 1,          name: '赵云'};

        .app/app.component.html

            <h1>`title`</h1><h2>`general`.`name` details!</h2>

四；编辑英雄名字

用户应该能在一个<input>输入框中编辑英雄的名字。 当用户输入时，这个输入框应该能同时显示和修改英雄的name属性。

也就是说，我们要在表单元素<input>和组件的hero.name属性之间建立双向绑定。

            双向绑定 

[(ngModel)]是一个Angular语法，用与把hero.name绑定到输入框中。 它的数据流是双向的：从属性到输入框，并且从输入框回到属性。

虽然NgModel是一个有效的Angular指令，但它默认情况下却是不可用的。 它属于一个可选模块FormsModule。 我们必须选择使用那个模块。

        注意:

                .app/app.module.ts                

            引入

//双向数据绑定依赖的模块

import { FormsModule }   from '@angular/forms';

  imports: [

    BrowserModule,

    FormsModule

  ]

        .app/app.component.html重构

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

五:显示我们的英雄

    创建英雄

       创建data文件夹(用于存放数据)

        ./src/data/mock-general.ts

             创建mock-general.ts  

import {General} from '../bean/General';

export const Generals:General[]=[

new General(11,"孙武",'春秋'),

new General(12,"白起",'秦'),

new General(13,"霍去病",'西汉'),

new General(14,"马援",'东汉'),

new General(15,"谢玄",'两晋'),

new General(16,"张须陀",'隋'),

new General(17,"李靖",'唐'),

new General(18,"薛仁贵",'唐'),

new General(19,"岳飞 ",'宋'),

new General(20,"戚继光",'明'),

];

HEROES是一个由Hero类的实例构成的数组，我们在第一部分定义过它。 我们当然希望从一个 Web 服务中获取这个英雄列表，但别急，我们得把步子迈得小一点，先用一组模拟出来的英雄。

        暴露英雄

        ./app/app.component.ts

    1.导入import {Generals} from "../data/mock-general";

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

        微调AppComponent

export class AppComponent implements OnInit {

  title = 'MY General';

 // generals:General[]=Generals;

  generals:General[];

  ngOnInit(){

  this.generals=Generals;

  }

}

在模板中显示英雄

        *ngFor 官网https://angular.cn/guide/displaying-data#ngFor

    重构./app/app.component.html

<div class="container">

<div class="row">

<h1>`title`</h1>

</div>

<div>

<ul >

<li *ngFor="let item of generals"><span>`item`.`id` </span> `item`.`name` `item`.`source`</li>

</ul>

</div>

</div>

当浏览器刷新时，我们就看到了英雄列表