angular6开发不完全笔记(一) -- ng-cli
新建项目
请在终端/控制台窗口中运行 ng -v
命令。 确定您已安装@angular/cli
if没有执行 npm install -g @angular/cli
全局安装 Angular CLI。
ng new project-name
就具体项目开发前调研技术栈追加相关参数
样式style 如
--style=scss
value值可以是(css | scss | sass | less | stylus )等项目中使用路由routing 如
--routing
生成routing module前缀 prefix 如
--prefix
或-p
默认为app,参数自定义 比如--prefix=wn
后话
angular.json 文件中
"prefix": "app"
, 会更改为"prefix": "wn"
tslint验证规则 项目中所有的组件前缀都改为wn
开头的 index.html文件<app-root></app-root>
变为<wn-root><wn-root>
所有ng g c component-name
生成的组件 prefix默认时使用<app-componet-name></app-componet-name>
自定义前缀后<wn-componet-name></wn-componet-name>
综合上述 ng new project-name --style=scss --routing --prefix=wn
更多参数参考 ng new
启动项目
ng serve
或者 npm run start
- 开发环境项目如开始对接接口需要配置本地代理
- 一般在根目录下添加proxy.config.json文件
{
"/api": {
"target": "http://xxx.xxx.com",
"secure": false,
// "logLevel":"debug",
"changeOrigin": true,
"pathRewrite":{
"^/api":""
}
}
}
- 文件package.json中scripts 下 start的value值
ng serve --proxy-config proxy.config.json
或者在angular.json 中 serve下 options添加属性"proxyConfig":"proxy.config.json"
ng serve 其他参数
- 接口默认4200
--port 4201
- 启动时自动打开浏览器
--open
简写-o
- 用host指定运行主机
--host 0.0.0.0
或--public-host 192.168.1.111
指定浏览器客户端将使用的URL - 正在生成的应用程序的基URL
--base-href /admin/
或者--base-href http://www.example.com/
相当于index.html添加html标签 属性href规定页面中所有相对链接的基准 URL。 如<base href="http://www.example.com/">
注:参数值后面一定要多个/
结尾,否则无效
综合上述1(未对接) ng serve --port 4201 --open
综合上述2 ng serve --proxy-config proxy.config.json --host 0.0.0.0 --port 4201 --open
更多参数参考 ng serve
项目开发
- 生成组件
ng g c component-name
生成在src下全局组件ng g c module-name/component-name
组件生成在某模块下src下,并声明注册该模块ng g c path/component-name
组件生成在项目path路径下,默认注册父模块,由父模块决定是否是全局组件还是某模块组件;
禁止生成spec.ts文件 -- --no-spec
- 生成模块
ng g m module-name
同上
其他参数
--routing
生成路由模块。--module
允许指定声明模块
综上: ng g m module-name --routing --module module-name
生成服务
ng g s service-name
同上生成管道(原1.x中过滤器)
ng g p pipe-name
生成指令
ng g d directive-name
指令分 属性型指令和结构型指令生成class
ng g cl class-name
class-mame一般首字母大写,驼峰生成接口interface
ng g i interface-name
接口为ts特性 类型检查 声明参数类型
更多参数参考 ng generate
编译项目
ng build
或 npm run build
参数
--base-href /myUrl/
相当于在index.html中添加,默认--prod
通过UglifyJS 删除更多未使用的代码,使项目编译后更小体积--output-hashing all
编译后输出文件名以哈希模式,便于缓存--stats-json
生成一个“stats.json”文件,可以使用诸如:webpack bundle analyzer'或https://webpack.github.io/analyse.等工具进行前端分析。--aot
启用aot预编译--build-optimizer
使用“aot”选项时启用@angular-devkit/build-optimizer 优化。
更多参数参考 ng build
angular6开发不完全笔记(一) -- ng-cli的更多相关文章
- 第一章 Andorid系统移植与驱动开发概述 - 读书笔记
Android驱动月考1 第一章 Andorid系统移植与驱动开发概述 - 读书笔记 1.Android系统的架构: (1)Linux内核,Android是基于Linux内核的操作系统,并且开源,所以 ...
- Android开发艺术探索笔记——View(二)
Android开发艺术探索笔记--View(二) View的事件分发机制 学习资料: 1.Understanding Android Input Touch Events System Framewo ...
- Android开发艺术探索笔记—— View(一)
Android开发艺术探索笔记 --View(一) View的基础知识 什么是View View是Android中所有控件的基类.是一种界面层控件的抽象. View的位置参数 参数名 获取方式 含义 ...
- UWP开发入门系列笔记之(一):UWP初览
标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...
- 《PHP与MySQL WEB开发》读书笔记
<PHP与MySQL WEB开发>读书笔记 作者:[美]Luke Welling PHP输出的HereDoc语法: echo <<<theEnd line 1 line ...
- 转:【iOS开发每日小笔记(十一)】iOS8更新留下的“坑” NSAttributedString设置下划线 NSUnderlineStyleAttributeName 属性必须为NSNumber
http://www.bubuko.com/infodetail-382485.html 标签:des class style 代码 html 使用 问题 文件 数据 ...
- Android开发艺术探索笔记——第一章:Activity的生命周期和启动模式
Android开发艺术探索笔记--第一章:Activity的生命周期和启动模式 怀着无比崇敬的心情翻开了这本书,路漫漫其修远兮,程序人生,为自己加油! 一.序 作为这本书的第一章,主席还是把Activ ...
- Java高级开发工程师面试笔记
最近在复习面试相关的知识点,然后做笔记,后期(大概在2018.02.01)会分享给大家,尽自己最大的努力做到最好,还希望到时候大家能给予建议和补充 ----------------2018.03.05 ...
- 「Android 开发」入门笔记
「Android 开发」入门笔记(界面编程篇) ------每日摘要------ DAY-1: 学习笔记: Android应用结构分析 界面编程与视图(View)组件 布局管理器 问题整理: Andr ...
随机推荐
- LeetCode——Generate Parentheses
Description: Given n pairs of parentheses, write a function to generate all combinations of well-for ...
- chrome单步调试代码
单步调试代码 所有步骤选项均通过边栏中的可点击图标 表示,但也可以通过快捷键触发(鼠标悬停在操作图标上就可以看到快捷键).下面是简要介绍: 图标/按钮 操作 描述 Resume 继续执行直到下一个断点 ...
- Sql Server 关于SET IDENTITY_INSERT的问题
想要将值插入到自动编号(或者说是标识列,IDENTITY)中去,需要设定 SET IDENTITY_INSERT 示例: 1.首先建立一个有标识列的表: CREATE TABLE products ( ...
- maven指定项目的构建、打包和tomcat插件的pom.xml配置
1.pom.xml添加如下配置: <build> <finalName>${parent.artifactId}</finalName> <plugins&g ...
- 有关velocity的资料(等待整理)
proxy-target-class="true" 与proxy-target-class="false"的区别: proxy-target-class属性值决 ...
- 170519、FastDFS分布式文件系统的安装与使用(单节点)
基于 于 D Do ubbo 的分布 式系统架构 视频 教程 高 级篇S FastDFS 分布 式 文件系统的安装与使用 (单 节点)跟踪 服务器 : 192.168.4.12 21 1 (edu- ...
- IFS二次开发03——Item
在TFS 中把每个文件夹被抽象成“ItemSet”或“Item”,相对于父级目录来讲就是Item ,相对于子级目录来讲就是“ItemSet”.每个文件都被抽象成“Item”. //连接TFS stri ...
- 自定义Realm解析
自定义Realm解析---------------------------------------> /* * Copyright 2005-2013 shopxx.net. All right ...
- Oracle等待事件之Enqueue(锁)
1.产生原因 表示与内部队列机制相关的等待,例如对保护内部资源或者组件的锁的请求等,一种并发的保护机制,该等待意味着在访问同样的数据库资源时需要等待其他会话已经获取的锁. 2.确定产生问题的对象 死锁 ...
- Django - ORM - 进阶
一.多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是 ...