Angular-CLI
应用的命令行界面原型基于 ember-cli 项目.
注意
这个项目仍在完善进行时。
现在我们的命令行界面已经处于beta版本。
如果你想协助我们,那这个项目还有很多需要完善,来看看我们的 问题列表.
提交一些问题之前, 先看看 问题是否被标记为 type: faq
标签.
Webpack 更新
在beta.10到beta.14之间呢,我们更改了编译系统,从SystemJS转变成Webpack.
这能带给我们很多好处.
为了得到这些好处,如果你的app是以老旧的beta编译出来的,那你就需要去做一些迁移工作了.
当然,你可以根据 这份说明 来更新你 beta.10
项目到 beta.14
.
预备知识
不管是命令行界面项目还是我们需要开发的Angular2项目,都需要Node4或更高版本些的Node,伴随的需要是NPM3或更高版本。
目录
- 安装
- 用法
- 生成一个全新项目
- 生成组件、指令、管道以及服务
- 生成一个路由
- 让我们来编译一下
- 构建目标和环境文件
- [在 index.html 中处理基础标签 ](#在 index.html 中处理基础标签)
- 打包
- 执行单元测试
- 执行端到端测试
- 到后端的代理
- 通过GitHub 页面部署我们的App
- 格式化我们的代码
- 支持线下应用
- 命令自动完成
- 项目资产
- 全局样式
- CSS 预处理器集成
- 第三方库的安装
- 全局库的安装
- 更新angular-cli
- 为angular-cli增加开发提示
安装
BEFORE YOU INSTALL: please read the prerequisites
npm install -g angular-cli
用法
ng --help
借助开发服务器生成并启动一个 Angular2 项目
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
导航到 http://localhost:4200/
. 如果你对你的任何应用文件做任何的改动,应用将自动的被重新载入.
通过命令行的两个参数选项,你可以配置你的默认HTTP端口号 :
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
生成组件、指令、管道以及服务
可以使用 ng generate
(或 ng g
) 命令来构建 Angular 组件:
ng generate component my-new-component
ng g component my-new-component # using the alias
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
在下表,你可以找到所有可被构建的组件类型:
Scaffold | Usage |
---|---|
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 |
生成一个路由
目前,通过命令行接口,你还不能生成出路由. 不过,很快,他将来临.
你可以在这里查看关于路由的官方文档: https://angular.io/docs/ts/latest/guide/router.html. 请一定注意,即使暂时还不能自动生成路由,但在你的项目中使用路由已经被很完美的支持了.
让我们来编译一下
ng build
编译出来的结果将被储存在 dist/
目录.
构建目标和环境文件
ng build
可以指定两种编译目标: (--target=production
or --target=development
) 和 (--environment=dev
or --environment=prod
),一个环境文件跟后者一起使用.
默认情况下, 编译开发目标和环境均被使用.
在angular-cli.json
中的以下配置可以决定那个环境配置文件将被使用:
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
这些选项同样使用与命令行, 如果你没有为 environment
显示的传递一个值,
那么,默认将是 dev
对development
、prod
对production
.
# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build
当然,你可以像下面这样,添加你自己的环境文件以不同于 dev
和prod
:
- create a src/environments/environment.NAME.ts
- add { "NAME": 'src/environments/environment.NAME.ts' }
to the the apps[0].environments
object in angular-cli.json
- use them via the --env=NAME
flag on the build/serve commands.
在 index.html 中处理基础标签
当你在构建项目的时候,你可以通过--base-href your-url
选项,在你的index.html文件中修改你的基础标签 (<base href="/">
).
# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/
打包
所有的构建工作都将使用打包, 在 ng build --prod
或 ng serve --prod
使用 --prod
标记
将可以函数式的使用 uglifying 和tree-shaking.
执行单元测试
ng test
在我们构建完之后,测试将通过 Karma 被执行, 当然了,它将自动的去监测你所有的文件变化. 可以通过 --watch=false
让测试只执行一次.
执行端到端测试
ng e2e
执行测试前,确保你的应用是通过 ng serve
来启动的.
端到端测试通过 Protractor 来运行.
到后端的代理
在webpack的开发服务器,使用代理支持,我们可以抓取确定的url 并将其传到后台服务器.
我们通过传一个文件到 --proxy-config
来达到此目的。
Say we have a server running on http://localhost:3000/api
and we want all calls to http://localhost:4200/api
to go to that server.
We create a file next to projects package.json
called proxy.conf.json
with the content
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
You can read more about what options are available here webpack-dev-server proxy settings
and then we edit the package.json
file’s start script to be
"start": "ng serve --proxy-config proxy.conf.json",
now run it with npm start
通过GitHub 页面部署我们的App
You can deploy your apps quickly via:
ng github-pages:deploy --message "Optional commit message"
This will do the following:
- creates GitHub repo for the current project if one doesn’t exist
- rebuilds the app in production mode at the current
HEAD
- creates a local
gh-pages
branch if one doesn’t exist - moves your app to the
gh-pages
branch and creates a commit - edit the base tag in index.html to support github pages
- pushes the
gh-pages
branch to github - returns back to the original
HEAD
Creating the repo requires a token from github, and the remaining functionality
relies on ssh authentication for all git operations that communicate with github.com.
To simplify the authentication, be sure to setup your ssh keys.
If you are deploying a user or organization page, you can instead use the following command:
ng github-pages:deploy --user-page --message "Optional commit message"
This command pushes the app to the master
branch on the github repo instead
of pushing to gh-pages
, since user and organization pages require this.
格式化我们的代码
You can lint your app code by running ng lint
.
This will use the lint
npm script that in generated projects uses tslint
.
You can modify the these scripts in package.json
to run whatever tool you prefer.
支持线下应用
The --mobile
flag has been disabled temporarily. Sorry for the inconvenience.
Angular-CLI includes support for offline applications via the --
flag on ng new
. Support is experimental, please see the angular/mobile-toolkit project and https://mobile.angular.io/ for documentation on how to make use of this functionality.
命令自动完成
To turn on auto completion use the following commands:
For bash:
ng completion 1>> ~/.bashrc 2>>&1
source ~/.bashrc
For zsh:
ng completion 1>> ~/.zshrc 2>>&1
source ~/.zshrc
Windows users using gitbash:
ng completion 1>> ~/.bash_profile 2>>&1
source ~/.bash_profile
项目资产
You can add any files you want copied as-is to src/assets/
.
全局样式
The styles.css
file allows users to add global styles and supports
CSS imports.
If the project is created with the --style=sass
option, this will be a .sass
file instead, and the same applies to scss/less/styl
.
You can add more global styles via the apps[0].styles
property in angular-cli.json
.
CSS 预处理器集成
Angular-CLI supports all major CSS preprocessors:
- sass/scss (http://sass-lang.com/)
- less (http://lesscss.org/)
- stylus (http://stylus-lang.com/)
To use these prepocessors simply add the file to your component’s styleUrls
:
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
title = 'app works!';
}
When generating a new project you can also define which extension you want for
style files:
ng new sassy-project --style=sass
Or set the default style on an existing project:
ng set defaults.styleExt scss
第三方库的安装
Simply install your library via npm install lib-name --save
and import it in your code.
If the library does not include typings, you can install them using npm:
npm install d3 --save
npm install @types/d3 --save-dev
If the library doesn’t have typings available at @types/
, you can still use it by
manually adding typings for it:
// in src/typings.d.ts
declare module 'typeless-package';
// in src/app/app.component.ts
import * as typelessPackage from 'typeless-package';
typelessPackage.method();
全局库的安装
Some javascript libraries need to be added to the global scope, and loaded as if
they were in a script tag. We can do this using the apps[0].scripts
and
apps[0].styles
properties of angular-cli.json
.
As an example, to use Boostrap 4 this is
what you need to do:
First install Bootstrap from npm
:
npm install bootstrap@next
Then add the needed script files to apps[0].scripts
:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Finally add the Bootstrap CSS to the apps[0].styles
array:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
Restart ng serve
if you’re running it, and Bootstrap 4 should be working on
your app.
更新angular-cli
To update angular-cli
to a new version, you must update both the global package and your project’s local package.
Global package:
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@latest
Local project package:
rm -rf node_modules dist tmp
npm install --save-dev angular-cli@latest
npm install
ng init
Running ng init
will check for changes in all the auto-generated files created by ng new
and allow you to update yours. You are offered four choices for each changed file: y
(overwrite), n
(don’t overwrite), d
(show diff between your file and the updated file) and h
(help).
Carefully read the diffs for each code file, and either accept the changes or incorporate them manually after ng init
finishes.
The main cause of errors after an update is failing to incorporate these updates into your code.
You can find more details about changes between versions in CHANGELOG.md.
为angular-cli增加开发提示
Working with master
git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link
npm link
is very similar to npm install -g
except that instead of downloading the package
from the repo, the just cloned angular-cli/
folder becomes the global package.
Any changes to the files in the angular-cli/
folder will immediately affect the global angular-cli
package,
allowing you to quickly test any changes you make to the cli project.
Now you can use angular-cli
via the command line:
ng new foo
cd foo
npm link angular-cli
ng serve
npm link angular-cli
is needed because by default the globally installed angular-cli
just loads
the local angular-cli
from the project which was fetched remotely from npm.
npm link angular-cli
symlinks the global angular-cli
package to the local angular-cli
package.
Now the angular-cli
you cloned before is in three places:
The folder you cloned it into, npm’s folder where it stores global packages and the angular-cli
project you just created.
You can also use ng new foo --link-cli
to automatically link the angular-cli
package.
Please read the official npm-link documentation
and the npm-link cheatsheet for more information.
许可
MIT