1、下载安装nodejs

 
2、验证是否安装成功
node -v
npm -v
 
公司内网需要设置代理
npm config set registry http://mirrors.tools.huawei.com/npm
 
3、全局安装angular cli
npm install -g @angular/cli
 
4、创建新项目
打开终端窗口,执行命令
ng new my-app
 
5、启动开发服务器
cd my-app
ng serve --open
ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。
本应用会用一条消息来跟你打招呼:
 
The app works
 
6、编辑我们的第一个angular组件
 
这个CLI为我们创建了第一个Angular组件。 它就是名叫app-root的根组件。 你可以在./src/app/app.component.ts目录下找到它。
 
打开这个组件文件,并且把title属性从 app works! 改为 My First Angular App :
export class AppComponent {
  title = 'My First Angular App';
}
浏览器会自动刷新,而我们会看到修改之后的标题。不错,不过它还可以更好看一点。
打开 src/app/app.component.css 并给这个组件设置一些样式:
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

最新文章

  1. Tomcat7.0+的JNDI问题
  2. java 中 Math.rint()
  3. Coding Kata - 挑战你的“底线”
  4. SenchaTouch介绍和Sencha Architect介绍以及安装
  5. javaHDU1003Max Sum
  6. ceph主要数据结构解析3-Ceph_fs.h文件
  7. 解决eclipse无法解析shared_ptr
  8. osgText::Text简介
  9. 【Demo 0006】Java基础-类多态性
  10. 熬之滴水穿石:JSP--HTML中的JAVA代码(6)
  11. android定位方式
  12. JVM内存模型及垃圾收集策略解析(一)
  13. WebApplicationContext类的作用
  14. linux date -s
  15. Atitit 列表表格按照字段排序数据解决方案
  16. 【题解】 [ZJOI2009]假期的宿舍 (二分图匹配)
  17. codevs 1380 没有上司的舞会 - 树形动态规划
  18. 开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室
  19. 20155332 mybash的实现
  20. CF 916

热门文章

  1. js兼容火狐显示上传图片预览效果
  2. shell中脚本变量和函数变量的作用域
  3. C# TextBox猜想输入和历史记录输入
  4. GO语言的进阶之路-爬虫进阶之路
  5. 3、Python-字符串
  6. CentOS6.8下安装xz命令
  7. 单源最短路径问题(dijkstra算法 及其 优化算法(优先队列实现))
  8. 按某个属性排序(字典序,ascII) js/python
  9. C# Winform继承窗体打开设计器白屏的一例解决方法
  10. 出售爱奇艺 tx好莱坞 优酷 乐视 芒果 搜狐 等一个月会员激活码