angular2 一.环境安装和第一个demo讲解

1.安装node

2.安装 cli工具
    npm install -g @angular/cli
    如果失败截图如下(图1)所示
    

图1

    请输入下面的命令:npm--registry http://registry.cnpmjs.org info underscore
      该命令运行成功后如下图2所示:

图2

如果npm install -g @angular/cli 安装成功,会有下图3的提示:
    

图3

3.创建一个新的工程
    ng new my-app
如果出现图4的截图:

图4

不要担心,意思是说正在通过npm市场安装一下项目所依赖的工具包,可能需要一些时间.

    项目创建成功的截图(图5)

图5

4.cd到工程目录之下
    cd my-app

5.运行
    ng serve
    如图6所示
    

图6

    则代表项目运行成功

6.在浏览器中输入
    http://localhost:4200
    就可以看到自己的项目了

7.开始编写代码,做我们自己的项目
    用Angular2给的一个Hero案例来讲解

8.在界面上显示一个英雄
    在你的项目工程中找到文件:..src/app/app.component.ts  打开并编辑
    编辑之前如图7:
   

图7

编辑之后如图8

图8

代码改完并保存之后,会看到浏览器界面自动刷新了,并且,能看到一个叫做张三的英雄出现在界面上.

9.不难发现.我们现在这个英雄张三,只是一个字符串而已,接下来,我们来做一个不是字符串,而是对象的英雄 --- 张三
    还是在当前文件(app.component.ts)中修改代码,
在图9红框1的地方声明一个英雄类:Hero
在图9红框2的地方,根据英雄类创建一个英雄对象hero
在图9红框3的地方,通过对象.属性的方式显示银熊的名字

图9

10.但是我们的英雄,不仅有name属性,还有一个id编号,为了让英雄的所有信息都能显示到界面上,我们需要修改一下模板界面了,改好之后的效果图如图10所示:

图10

11.这样的话,界面上就显示出来英雄的所有信息了
    但是我们发现了另一个问题:我们所有的标签写在一行字符串中了,
    html标签能写成多行显示吗?
    答案肯定的:用   ` `    替换    " "
    ` 在键盘上的位置如图11所示
    

图11

template: 对应的html标签可以修改成图12的样子了:

图12

12.英雄叫张三太不好听了,我们让英雄的名字拥有编辑能力吧:
    把模板中的hero.name装到一个input中就可以编辑了:
    改好的代码如图13所示:
    

图13

但是,有一个问题,出现了:
图13中红框1在修改英雄的名字,
但是红框2并没有跟着改变,
这个效果能实现吗------能
怎么实现-------下一节  Angular2 二:Hero Demo 详解