前端学习之Angular cli

一、安装

  1、全局安装angular cli

  由于用npm安装比较慢,先安装淘宝镜像cnpm,可参考之前的文章:https://www.cnblogs.com/interesting-whh/p/13047996.html

  然后使用命令进行安装:cnpm install -g @angular/cli,其中-g表示全局安装

  前端学习之Angular cli

 

 

   2、查看是否安装成功

   命令:ng version

  前端学习之Angular cli

 

 

 二、创建项目

  操作1: 命令如下,比较慢

//进入项目目录下
ng new first-angular-app
cd first-angular-app
ng serve

  操作2:命令如下,比较快,建议该安装

ng new first-angular-app --skip-install
cd first-angular-app
cnpm install
ng serve

  这里用cnpm安装要比npm快

  前端学习之Angular cli

 

  上面两步分别是yes和回车

   前端学习之Angular cli

 

   稍微等一下,结束后执行ng serve

  前端学习之Angular cli

 

   编译成功

  前端学习之Angular cli

 

  通过以上网址,可以访问如下的页面

  前端学习之Angular cli

 

 

三、目录结构

  项目目录如下:

   前端学习之Angular cli

 

   项目入口main.ts,调用APP目录下的module

  前端学习之Angular cli

 

   AppModule中指明了调用的组件

  前端学习之Angular cli

 

   该.ts文件又指明了输出的html模板和css,可以去相关路径查看

  前端学习之Angular cli

 

   html中的title引用的就是.ts文件中定义的title,修改一下保存后浏览器可以直接改变

  前端学习之Angular cli

  html中

  前端学习之Angular cli

 

   浏览器已改变

  前端学习之Angular cli

 

 

 

  

 

上一篇:Java中数组拷贝的几种方式


下一篇:Ng-Alain-mock 运用