新建项目
请在终端/控制台窗口中运行 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