This tutorial assumes that you already have an Android Node environment, and ensure that Node is 10.14.0 or older

This tutorial demonstrates the environment

  Angular CLI: 8.3.29
  Node: 10.15.0
  OS: win32 x64
  Angular: 8.2.14
Copy the code

Build an Angular project

Reference: Angular Chinese

The installation presents CLI

To use the NPM command to install the CLI, open a terminal/console window and enter the following command:

npm install -g @angular/cli
Copy the code

Creating an Angular project

ng new my-app
Copy the code

Run the application

cd my-app
ng serve --open
Copy the code

The ng serve command starts the development server, monitors the files, and rebuilds the application if those files change.

The –open (or simply -o) option will automatically open your browser and visit http://localhost:4200/.

If your setup and setup are successful, you should see the following page:

Needless to say, we first integrate a set of UI component library to gain our development speed

Two, integrated UI component library NG-Zorro

Reference: official website of Ng-Zorro

/ / note:
// If you have completed the initialization of the project as described in the first step, you have successfully built the Angular project
// You no longer need to follow the ng-Zooro quickstart tutorial step by step
// If you haven't already built an Angular project, you can follow the Ng-Zooro Quickstart tutorial to build a finished project that includes the Ng-Zooro library
Copy the code

Initialize the ng – zorro – antd

ng add ng-zorro-antd
Copy the code

From the console window, enter the above command and you need to make some choices

// You need to add the ng-Zorro icon in assets folder. Y is allowed, N is not allowed
Add icon assets:(y/N)
// Whether to add a theme file. Y is allowed, N is not allowed
Set up custom theme file: (y/N)
// Select your local language. Press the left or right key to select and press Enter to confirm
Choose your locale code:
// Select a template. Press the up and down arrow keys to select and press Enter to confirm
Choose template to create project
Copy the code

My Settings are y, y, zh_CN, sidemenu to wait a short while before restarting the project

ng serve --open
Copy the code

If we can see the following page, then the project integration UI library ng-Zorro has succeeded

With the UI library and Angular framework, we can draw most of the front pages, but

but

.

We haven’t been able to interact with the back end yet, as a severe patient who worshipping the anteroposterior separation model

Based on past experience, I definitely want to do a proxy, proxy back-end services, convenient development

3. Proxy back-end services

Reference: Angular Chinese: Proxy to backend server

Follow the documentation guidelines

1. Create a proxy.config.json file in the SRC/directory and write the following code
{
    "/api": {
        "target": "Your back-end server address/API /"."changeOrigin": true."secure": false."pathRewrite": {
            "^/api": ""}}},Copy the code
2. In the project root directory, locate the angular.json file and locate the Server configuration item in the file
."serve": {
  "builder": "@angular-devkit/build-angular:dev-server"."options": {
    "browserTarget": "ng-demo:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "ng-demo:build:production"}}},...Copy the code
3. Add the proxyConfig attribute under the Option option. The value of the attribute is the path of the proxy.config.json file
."options": {
  "browserTarget": "your-application-name:build"."proxyConfig": "src/proxy.conf.json"},...Copy the code

In this way, our agent is configured

Fourth, integrate the third JS library

Sometimes we can’t avoid using a third-party JS library, such as echarts

This is actually quite simple. We also go to the angular.json file and find the build option

."architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser"."options": {...Copy the code

Then find the style and script properties under option

"assets": [...]. ."styles": [...]. ."scripts": [...].Copy the code

Download one of the third-party libraries you need, and I’m using Echarts as an example

npm install --save echarts @types/echarts
Copy the code

@types/echarts This library is ts support for Echarts, since echarts is written with JS and Angular is TS, it is installed for API tips

After the installation, we added the following code to scripts under Option in the build build step of the angular.json file

"scripts": [..."./src/assets/static/js/echarts.min.js". ]Copy the code

In this way, you inject Echarts globally into your project, without the need for a separate import or require when using echarts

After the above code is added, you need to restart the project for it to take effect

After restarting the project, echarts cannot be used directly in the component and an Echarts undefined error is reported

To solve this problem you just need to add the following code to the component,.ts file header:

declare const echarts;
Copy the code

Then Echarts can take effect

You can also add additional libraries as other items in the scripts value array

For example, we often use moment.js

Js library will be inserted, CSS library is relatively simple, you just need under the style property. Just add your CSS, LESS, or SASS file path

V. Internationalization

Internationalization is covered on the Angular website, but I’m not a fan of it

This section describes how to use NGX-Translate

Download NGX-Translate and related loaders

npm install --save @ngx-translate/core @ngx-translate/http-loader
Copy the code

Translate core and HTTP-loader have version requirements that must match the version of the response.

Tip: To download, please refer to ngX-Translate

Plug ngX-Tranlsate into the project

Add the following code to the top-level module (in this case app.module.ts) :

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; .export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/'.'.json'); }...@NgModule({...imports: [
    	...
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (HttpLoaderFactory),
                deps: [HttpClient]
            }
        })
    ],
    ...
})
export class AppModule {}Copy the code

Note: HttpLoaderFactory factory functions must be exported, not inline. Use parentheses (HttpLoaderFactory)

You can also set the default language for the program, like this:

. TranslateModule.forRoot({defaultLanguage: 'en'})...Copy the code

Sequence initializes TranslateService

Add the following code to app.component.ts:

.import {TranslateService} from '@ngx-translate/core'; .constructor (
  private translate: TranslateService
) {
  // Add language support
  translate.addLangs(["en"."zh"]);

  // Set the default language, generally used when there is no match
  translate.setDefaultLang('zh'); }...Copy the code

Build the.json file

Create a language-supported.json file in the./assets/i18n/ directory

Tip: The file name is the same as the supported language you set in app.component.ts

We create zh.json and en.json respectively and add some code

// zh.js
{
	"language": "Simplified Chinese"."age": "Age". }...// en.js
{
	"language": "English"."age": "Age"."HELLO": "Hello {{value}}". }Copy the code

Once this is done, go to the component.html file and use it like this

<div>{{ 'language' | translate:param }}</div>
<p>{{ 'age' | translate:param }}</p>
Copy the code

Use this in component.ts files

// Get methods are asynchronous
translate.get('HELLO', {value: 'world'}).subscribe((res: string) = > {
    console.log(res);
    //=> 'Hello world'
});
Copy the code

If you want to synchronize, use the Instant method

const hello = this.translate.instant('HELLO', {value: 'world'});
//=> 'Hello world'
Copy the code

See ngX-Translate/Core documentation for more apis

There are some other things you can learn about building a project, such as:

Lazy loading

Routing knowledge

Knowledge of HTTP front-end and back-end interactions

Project performance optimization

Etc etc.

Later have time to study together with you, thank you, like a thumbs-up. Thanks!!