Angular 4.0从入门到实战 博客分类： Web前端

 

#安装Angular CLI 脚手架工具，如无权限则前加sudo

 

$ npm install -g @angular/cli 

 

 

#或使用淘宝库

 

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 

#安装Angular CLI 脚手架工具

 

$ cnpm install -g @angular/cli

 

 

如安装angular/cli失败，则卸载，清除缓存，重新安装

    #卸载angular/cli

 

$ npm uninstall -g @angular/cli

  

 

    #清除缓存

 

$ npm cache clean

 

 

    #重新安装

 

$ cnpm install -g @angular/cli

    #查看版本能否正常显示

$ ng -v

 

   #创建项目,新建项目名

$ ng new angulardemo

   #进入所建目录启动服务

$ cd angulardemo

    #安装依赖

$ npm install

    #启动服务

$ ng serve --open

 

工程目录结构及说明： 

• .editorconfig webstrom配置文件
• karma.conf.js 自动化单元测试配置文件
• protractor.conf.js 自动化单元测试
• tslint 代码规范监测
• src 
• app 应用的组件和模块 
  
  • 模块
  • 组件
• assets 静态资源
• environments 环境配置 （多环境，开发，测试，生产）
• index 根文件
• main.ts 脚本执行的入口点（启动项目）
• polyfills 导入一些必要的库,支持老版本的ag
• css 全局样式
• test 自动化测试
• tsconfig TypeScript编译器

Angualr CLI提供了许多常用命令:

    ng generate class my-new-class              // 新建 class

    ng generate component my-new-component      // 新建组件

    ng generate directive my-new-directive      // 新建指令

    ng generate enum my-new-enum                // 新建枚举

    ng generate module my-new-module            // 新建模块

    ng generate pipe my-new-pipe                // 新建管道

    ng generate service my-new-service          // 新建服务

 

    ng g cl my-new-class        // 新建 class

    ng g c my-new-component     // 新建组件

    ng g d my-new-directive     // 新建指令

    ng g e my-new-enum          // 新建枚举

    ng g m my-new-module        // 新建模块

    ng g p my-new-pipe          // 新建管道

    ng g s my-new-service       // 新建服务 

 

    Angular 4.0从入门到实战: https://blog.csdn.net/qq_33936481/article/details/73622207