Angular

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 详解