AngularJS2快起起步

来源:互联网 发布:淘宝推广大师好用吗 编辑:程序博客网 时间:2024/04/27 21:15

前言
忽然看到ng2已经出来稳定版了。本以为ng2是ng1的升级版,谁想里面变化已经面目全非。
如果你之前没有接触过TypeScript和NPM,你可以简单的搜索下相关的知识,科普下不必做深入的学习。
关于NPM的安装你可以下载Nodejs的安装包,新版本的nodejs已经将NPM打包在其内了。这里提供地址:https://nodejs.org/en/
在安装完成后你可以cmd测试下:
这里写图片描述
接着下载ng给我们准备的简单教程实例 quickstart

git clone https://github.com/angular/quickstart.git

如果你不熟悉git其实也没有关系,直接复制地址到浏览器里回车
这里写图片描述
直接下载Zip的压缩文件也可以。
然后启动命令行cmd到解压后的根目录下
执行

npm install

这里不得不提醒一句,由于我们伟大的墙存在,npm需要添加淘宝的镜像地址。或者你用vpn也是可以的。当然你也可以采用我用的办法。
找到我们nodejs安装下的npm的相关目录
这里写图片描述
找到npmrc文件
这里写图片描述
添加镜像

registry = https://registry.npm.taobao.org

安装完成ng2所需要的node_modules输入

npm start

这里写图片描述
在浏览器输入:http://localhost:3000
你将看到
这里写图片描述

这时起步的例子已经完成。

接下来我们看下这个例子的相关结构
这里写图片描述
注意/app目录中以下三个 TypeScript (.ts) 文件:

- -app- - - -app.component.ts- - - -app.module.ts- - - -main.ts

ng至少有这几个核心文件。每个文件都有独特的用途,并且随着应用的成长各自独立演变。
app.component.ts:它是根组件,随着应用的演变,它将变成一颗嵌套组件树。
app.module.ts: 目前,它只声明了AppComponent。 不久,它将声明更多组件。
main.ts: 即编译器用编译应用并且在浏览器中启动并运行应用。

0 0
原创粉丝点击