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 详解
网友评论