配置angular运行环境

资源网站angular中文文档angular英文文档angular社区

1、推荐使用的编程工具:webstorm,下载安装可自行百度。转载博文webstorm基本使用教程

2、安装Node.js: node.js官网下载。转载博文Node.js安装及环境配置之Windows篇

请先在命令行输入node -vnpm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。

 更老的版本可能会出现错误,更新的版本则没问题。

3、安装淘宝镜像

在命令行输入:npm install -g cnpm --registry=https://registry.npm.taobao.org

4、全局安装typescript

cnpm install -g typrscript

5、安装Angular CLI

cnpm install -g @angular/cli

现在可以来一个hello-world Project了

1、在命令行中输入ng new hello-world --skip-install 在桌面上就会出现一个hello-world的文件夹了

2、进入项目:cd hello-world

3、使用淘宝镜像安装:cnpm install 然后耐心等待。。。

安装好后hello_world项目里面会多一个node_modules文件夹

4、开启本地服务器:ng serve

5、在地址栏里输入:localhost:4200 你会看见Welcome to app! 还有一个大logo什么的。

这时一个基本项目其实已经创建好了。

6、我们现在做一下改动:打开hello-world/src/app/ 

app.component.ts文件中的title='app';修改为title='HelloWorld';

app.component.html文件中的内容全删除,用<h1>{{title}}!</h1>替换

在你保存文件之后,页面会自动刷新,现在页面上就只有显示HelloWorld!了。

发布了25 篇原创文章 · 获赞 16 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/zouhaodong/article/details/79269910