博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular CLI简介
阅读量:4287 次
发布时间:2019-05-27

本文共 1044 字,大约阅读时间需要 3 分钟。

一、简介

Angular CLI用于简单,快速构建Angular2项目,只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。

Git 源代码地址:

AngularCLI主要特性

1 Angular CLI 可以快速搭建框架,创建module,service,class,directive等;
2 具有webpack的功能,代码分割(code splitting),按需加载;
3 代码打包压缩;
4 模块测试,端到端测试;
5 热部署,有改动立即重新编译,不用刷新浏览器;而且速度很快
6 有开发环境,测试环境,生产环境的配置,不用自己操心; 
7 sass,less的预编译Angular CLI都会自动识别后缀来编译;
8 typescript的配置,Angular CLI在创建应用时都可以自己配置;
9 在创建好的工程也可以做一些个性化的配置,webpack的具体配置还不支持,未来可能会增加;
10 Angular CLI创建的工程结构是最佳实践,生产可用;

安装 Angular CLI

windows: npm install -g angular-cli

macOS: sudo npm install -g angular-cli

注:安装的时间可能会比较长。

安装成功后,使用 ng help 命令,验证安装是否成功

二、使用 Angular CLI创建Angular项目

1.创建项目:

ng new project_name(项目名称)

注:安装时如果很慢,设置cnpm ,使用命令:

ng set --global packageManager=cnpm

注2:Installing packages ...加载模块依赖过程,可能也会相对慢一会儿。

2.启动项目

cd project_name

ng serve --open   //编译运行名称

使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/

运行成功,地址栏输入:http://localhost:4200/

运行结果页面如下:

尝试的修改一下app.component.ts中的文字,看看热部署是否马上生效?yes!it does!

3.ng 命令创建模块、类等

ng g module about

创建module,component,service,class

更多:

ng set --global packageManager=cnpm
你可能感兴趣的文章
大数据学习路线大纲
查看>>
html入门之meta
查看>>
Spring源码和jar包下载步骤
查看>>
一位资深程序员大牛给予Java初学者的学习路线建议
查看>>
spring中bean的自动装配和作用域
查看>>
使用http请求,中文乱码问题--解决方法
查看>>
mybatis入门之接口式编程
查看>>
html页面中iframe嵌套页面的父页面和子页面js方法互相调用
查看>>
求字符串中变换位置问题
查看>>
求这个字符串中的最大的数字字符串
查看>>
Spring报错:java.lang.ClassCastException: com.sun.proxy.$Proxy2 cannot be cast to *
查看>>
Java一键启动Linux上的tomcat服务器
查看>>
java实现导出excel表到磁盘上(三)---完整封装,可直接使用
查看>>
json.loads
查看>>
快速截屏小工具
查看>>
如何用github发布Axure原型
查看>>
selenium RC+JAVA 运行所遇到的问题
查看>>
python运行时提示WebDriverException: Message: 'geckodriver' executable needs to be in PATH.
查看>>
selenuim +python环境配置遇到的诸多问题
查看>>
selenium + python自动化测试环境搭建
查看>>