Angular2官网项目 第一天

来自官网:

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

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

   一 ：为本地开发搭建环境

        a.检查@angular/cli版本.

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

       b.新建工程

      c.运行项目

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

             执行  cnpm start

     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中的插值表达式绑定语法。它们表示组件的<code>title</code>和<code>hero</code>属性的值会作为字符串插入到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

            &lt;h1&gt;`title`&lt;/h1&gt;&lt;h2&gt;`general`.`name` details!&lt;/h2&gt;

四；编辑英雄名字

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

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

            双向绑定 

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

        注意:

                .app/app.module.ts                

            引入

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

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

  imports: [

    BrowserModule,

    FormsModule

  ]

        .app/app.component.html重构

            &lt;div&gt;

         &lt;label&gt;name: &lt;/label&gt;

         &lt;input [(ngModel)]="general.name" placeholder="name"&gt;&lt;/div&gt;

五:显示我们的英雄

       创建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,"戚继光",'明'),

];

<code>HEROES</code>是一个由<code>Hero</code>类的实例构成的数组，我们在第一部分定义过它。 我们当然希望从一个 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

&lt;div class="container"&gt;

&lt;div class="row"&gt;

&lt;h1&gt;`title`&lt;/h1&gt;

&lt;/div&gt;

&lt;div&gt;

&lt;ul &gt;

&lt;li *ngFor="let item of generals"&gt;&lt;span&gt;`item`.`id` &lt;/span&gt; `item`.`name` `item`.`source`&lt;/li&gt;

&lt;/ul&gt;

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

本文转自 沉迷学习中 51CTO博客，原文链接：http://blog.51cto.com/12907581/1965007，如需转载请自行联系原作者