This time I will bring you the Angular CLI Angular 5 practical project demonstration. What are the precautions for the Angular CLI Angular 5 practical project demonstration? The following is a practical case, let’s take a look.

Install angular cli:

npm?install?-g?@angular/cli

But first make sure you install a newer version of nodejs.

Today we mainly introduce Angular CLI through the following aspects:

• Generate project

• Parameter introduction

• Configuration and customization CLI

• Check and fix code

• Generate new project:

ng?new?my-app

This command will generate a new project called my -app and put the project files in the folder my-app.

Don’t forget to cd into the my-app directory after the project is generated.

Another option is to use the --dry-run parameter:

ng?new?my-app?--dry-run

Using this parameter will not actually generate the project, but will print out which files will be created if the project is created. Generate.

Another commonly used parameter is--skip-install:

ng?new?my-app?--skip-install

The function of this command is to generate the project The npm install action will not be executed after the file.

However, you still need to manually execute npm install in the future.

Use the --help parameter to view Help:

ng?new?--help

I want to generate a project now, but don’t execute npm install first:

This is very fast , and then open it with my favorite IDE VSCode:

code?.

Take a look at the entire project structure, and package.json:

scripts Below are Some predefined project commands:

start means to run the project, just execute npm start, or directly execute ng serve.

npm build / ng build means to execute the build.. .....

I will not introduce them one by one.

Then look at the dependencies:

We are using angular 5.2.0. The ^ symbol in front means that we The version number used is greater than or equal to 5.2.0 but will definitely be less than 6.

The bottom is devDependencies, which are the tool libraries used during development. You can see the angular cli in it.

Next, take a look at the angular-cli.json file:

angular-cli.json:

It is the configuration file of angular cli for this project.

The prefix inside is more interesting, it is the default prefix for all generated components and directives.

You can check app.component.ts:

Its prefix is ??app.

If you want to change the default prefix, you can modify the prefix attribute value in the angular-cli.json file. If you change into sales, then the prefix of components and directives generated in the future will be sales. But it will not work for the components/directives that have been generated.

So how to ensure that the components/directives prefix of the generated project is what you want? What about?

is to use another parameter of ng new--prefix:

ng?new?sales-app?--prefix?sales

At this time, the selector of the component generated is:

prefix in the angular-cli.json file:

在生成的項(xiàng)目里可以看到, 同時(shí)還生成了spec文件. 如果我不想讓我的項(xiàng)目生成spec文件呢?

ng new也有這個(gè)參數(shù)--skip-tests:

ng?new?my-app2?--skip-tests

可以看到, 并沒有生成任何spec文件.

ng new的參數(shù)一共有這些:

有幾個(gè)介紹過的, 其他的例如:

--skip-git: 生成項(xiàng)目的時(shí)候就不會(huì)把它初始化為git repository, 默認(rèn)是初始化為git repository的.

--directory: 可以設(shè)定生成的目錄, 默認(rèn)是使用的項(xiàng)目名稱.

--style: 可以設(shè)定樣式的類型, 默認(rèn)是css, 例如可以改成scss.

也可以通過--inline-style把樣式的寫法設(shè)為行內(nèi)樣式, 這個(gè)默認(rèn)是false的.

下面我來生成一個(gè)使用scss樣式的項(xiàng)目:

可以看到生成的是styles.scss, app.component.scss文件, angular cli不僅會(huì)生成scss文件, 而且也會(huì)編譯它們.

查看angular-cli.json, 可以在文件的下方看到采用的是scss樣式文件:

這樣, 以后生成的component的默認(rèn)樣式文件就是scss了.

最后我想介紹一下這個(gè)參數(shù), --routing:

如果想手動(dòng)為項(xiàng)目配置路由的話, 還是需要一些步驟的, 所以可以使用這個(gè)參數(shù)直接生成帶路由配置的項(xiàng)目.

看一下項(xiàng)目路由文件:

再查看一下app.module:

可以看到import了AppRoutingModule.

綜上, ng new 的這些參數(shù)可以在生成項(xiàng)目的時(shí)候作為命令的參數(shù)聯(lián)合使用, 其中有一些參數(shù)也可以在項(xiàng)目生成以后通過修改angular-cli.json文件來做修改.

比較推薦的做法是:

在生成項(xiàng)目的時(shí)候使用: --routing, --prefix, --style, --dry-run參數(shù). 首先通過--dry-run參數(shù), 確保會(huì)生成哪些文件是否正確, 確認(rèn)后把--dry-run參數(shù)去掉, 生成文件.

下面我生成一個(gè)項(xiàng)目, 并且執(zhí)行npm install:

命令執(zhí)行完, 可以看到如下的項(xiàng)目結(jié)構(gòu);

里面有node_modules目錄了, 也就是所有的包都安裝好了, 接下來我可以運(yùn)行該項(xiàng)目了:

ng?serve?-o

其中的-o(--open)參數(shù)表示運(yùn)行項(xiàng)目的時(shí)候打開默認(rèn)瀏覽器.

查看瀏覽器http://localhost:4200:

ng serve的優(yōu)點(diǎn)是, 當(dāng)代碼文件有變化的時(shí)候會(huì)自動(dòng)重新構(gòu)建并且刷新瀏覽器, 您可以試一下.

另外一種配置CLI的方法 ng set.

前面我介紹了使用ng new參數(shù)和修改angular-cli.json文件的方式來配置cli, 下面我介紹下通過ng set <屬性> <值> 來配置cli.

就拿當(dāng)前這個(gè)項(xiàng)目來說, 它的默認(rèn)樣式文件類型是scss:

如果我在該項(xiàng)目目錄執(zhí)行:

ng?set?defaults.styleExt?css

那么該項(xiàng)目的設(shè)置就會(huì)改變:

如果使用參數(shù) -g(--global), 那就會(huì)進(jìn)行一個(gè)全局的配置, 這個(gè)配置會(huì)保存在一個(gè)文件里(如果還沒有任何去安居配置的情況下這個(gè)文件并不存在), 這個(gè)文件應(yīng)該在users/xxx目錄下, mac的話應(yīng)該在home目錄下.

它不會(huì)影響到已經(jīng)存在的項(xiàng)目. 但是如果新生成的項(xiàng)目不指定ng new的參數(shù)情況下, 默認(rèn)就會(huì)采用全局的配置:

Lint:

使用命令ng lint.

首先可以查看一下幫助:

ng?lint?--help

--fix: 嘗試修復(fù)lint出現(xiàn)的錯(cuò)誤.

--format: lint的輸出格式.

首先我針對(duì)上面的my-app6執(zhí)行ng lint:

沒有問題.

然后我故意弄出來幾處錯(cuò)誤/不規(guī)范的寫法:

然后再執(zhí)行ng lint:

可以看到這些錯(cuò)誤都被詳細(xì)的列了出來.

把格式化的參數(shù)加進(jìn)去:

可以看到現(xiàn)在lint結(jié)果的顯示更直觀了一些.

下面執(zhí)行ng lint --fix:

執(zhí)行后lint的錯(cuò)誤減少到了一個(gè), 看下代碼:

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

如何在項(xiàng)目中使用p5.js鍵盤交互

webpack.config.js參數(shù)使用教程

The above is the detailed content of Angular CLI+Angular 5 practical project demonstration. For more information, please follow other related articles on the PHP Chinese website!