专栏首页CRPER折腾记Angular 2 + 折腾记 :(1)初识Angular-cli[官方脚手架]及脱坑要点

Angular 2 + 折腾记 :(1)初识Angular-cli[官方脚手架]及脱坑要点

前言

这个系列的进度有些跳跃性,我尽量直白点解释,但是我不是官方文档,直入主题!!!!


什么是Angular-cli

简言之:就是NG团队自行维护的一个`脚手架`[内置单元测试及webpack2打包工具等] -- 这货前身是ember-cli

官网:cli.angular.io/ Github: github.com/angular/ang… npm: www.npmjs.com/package/ang…

我最早是从beta18开始用的,截止beta28.3 -- 这个分支已经废弃,已经迁移,之前npm install angular-cli不推荐;

目前最新的是v1.0.0正式版【2017-3-24】;从旧版本到rc期间坑了太多次,每次升级各种酸爽; rc2开始基本变化不大,可以直接拿来用了。。

正式版的配置稍微有些改动,我比较了下基本不大,放心使用


安装之前

  1. window下:
    • 安装lts版本的nodejs[6.10.0] , Angular-cli中的node-sass不支持7.x,装不上的
    • 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译]
    • 或者采用国内的cnpm安装,记得带版本号,有时候不带版本会安装0.0.1版本,cnpm好像会把编译好node-sass装上,不用本地再次编译 -- 亲测多次可用
    • 或者安装windows-build-tools:windows下的依赖库,再执行官方安装命令
  2. Linux下:
    • nodejs控制推荐用nvm来管理 :github.com/creationix/…
      • 先下载nvm的脚本,用curl或者wget都行,前者有些不预装,后者基本都有
        • wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
        • curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
      • 记得重新读取bash的配置文件,因为脚本没法实时生效,用linux的source命令一下子就搞定了
        • source ~/.bashrc : 意思就是重新加载当前用户的bash配置文件
      • nvm的命令不多,仔细看看文档哈,我们这里只需要稳定版本(lts)
        • nvm install --lts : 之后node怎么用就怎么用哈
    • 其次,linux下推荐用yarn替代npm,使用起来体验好很多,速度也快很多 # 下载公钥 curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - # 把源写进去源请求列表 echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list # 我用的是deepin !!!! 支持一下国产,挺好用哈~~~~ sudo apt-get update && sudo apt-get install yarn复制代码

开发工具这些就不扯了,我选择VSCODE


安装

npm install -g @angular/cli -- 无压力过墙的孩子推荐 或者 cnpm install -g @angular/cli@v1.0.0-rc.2 -- 国内淘宝源(cnpm的安装自行搜索) 或者 yarn add global @angular/cli -- 看网络了。。。


初始化项目

angular-cli可以初始化ng2或者ng4的项目,我这里说2+

脚手架的命令很多,我这里只列出最常用的;

  • 新建东东

范围

命令

作用

new

ng new new_project

初始化新项目

Component

ng g component my-new-component

新建一个组件

Directive

ng g directive my-new-directive

新建一个指令

Pipe

ng g pipe my-new-pipe

新建一个管道

Service

ng g service my-new-service

新建一个服务

Class

ng g class my-new-class

新建一个类

Interface

ng g interface my-new-interface

新建一个接口

Enum

ng g enum my-new-enum

新建一个枚举

Module

ng g module my-module

新建一个模块


  • 测试及检测

范围

命令

作用

e2e

ng e2e

跑自动化测试-自己写测试测试用例

test

ng test

跑单元测试 -- 自己写

lint

ng lint

调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix --format可以帮助格式和修复部分问题


  • 启动

ng serve: 启动脚手架服务,默认端口4200;自定义什么看帮助额


  • 打包

ng build: 开发模式打包,调用的环境文件是/src/environments/environments.ts; ng build --prod: 以前调用aot打包还需要带上--aot,从beta31开始,--prod模式下自动调用aot打包, 调用的环境文件是/src/environments/environments.prod.ts


  • 弹出配置文件(还原真实的配置文件)

ng eject : 这个东西的配置很多,可以弹出各种各样的源配置和文件 我们看到的ng开头的命令都是二重封装的。。。有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了


生成的目录树小解释


总结

  • 这个脚手架支持sass和less,手动改下.angular-cli.json就可以了。或者执行命令改下支持,,一个道理的
  • 当然可以配置接口反向代理,但是我感觉不实用,推荐还是把不同接口的url写在不同的environment里面,用nginx做反向代理! ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)这个老版本是支持的,现在不知道支不支持,写法如下
{
  "/": {
    "target": "http://localhost:3000",
    "secure": false
  }
}复制代码
  • ng2+写起来很清晰,各种注入~~欢迎品尝。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 2.x折腾记 - (20) JSX在业务中的具体实践以及跟React书写的差异化

    Vue的jsx,能够支持部分vue独有的特性,比如拿到computed, 指令及自定义事件;

    CRPER
  • Vue 折腾记 - (15) 捣鼓一个中规中矩loading组件

    是因为css3+js可控性更强,不管是大小还是颜色,还是响应式(我的项目走的vh,vw)那套来适配;

    CRPER
  • TypeScript 2 : 获取当前日期及前后范围日期【Array】

    就是用时间戳进行换算,然后通过内置函数获取对应字段进行拼接,,这里没有带时分秒,有兴趣的可以加个可选参数把时分秒带上。。因为我这里不需要用到,所以我就没加进去了...

    CRPER
  • Angular命令

    node -v 检查node.js安装 npm  -v 检查npm安装 npm install -g @angular/cli 安装CLI ng new ...

    苦咖啡
  • 如何实现一个可以用 await 异步等待的 Awaiter

    发布于 2017-10-29 08:38 更新于 2017-10...

    walterlv
  • java(iText)工具包生成PDF

    iText是一个非常著名的能够快速产生PDF文件的Java类库。支持文本,表格,图形的操作,可以方便的跟 Servlet 进行结合

    王念博客
  • Java函数的传参机制

    最近的一个项目,里面各种返回void,参数用引用类型,那叫一个熟和多,但是也把我绕糊涂了。

    ydymz
  • 解决django 多个APP时 static文件的问题

    补充知识:Django项目上线后无法加载xadmin等的静态文件问题(django的settings中几个static设置项的关系)

    砸漏
  • 【金融科技行业研究报告】区块链技术现实骨感,大数据风控跑马圈地

    作者:36Kr研究院 2017年9月,36氪研究院最新发布《2017 FinTech行业研究报告》,金融是在不确定的环境中进行资源跨期的最优配置决策行为,其本质...

    钱塘数据
  • .Net Core实现健康检查

    ASP.NET Core 提供运行状况检查中间件和库,以用于报告应用基础结构组件的运行状况。

    HueiFeng

扫码关注云+社区

领取腾讯云代金券