Angular development practice (1): environment preparation and framework construction

This article introduces Angular development practice (1): environment preparation and framework construction. Interested friends can take a look at

Introduction

At work It has been almost a year since the Angular framework was introduced in China. During this year, I have been constantly stepping into and filling in the pitfalls. Of course, I have also learned and accumulated a lot of knowledge, including the MVVM framework, front-end and back-end separation, front-end engineering, SPA optimization, etc. Therefore, I would like to share what I have learned through this series of articles on Angular development and practice, for the purpose of communication and sharing.

Before the introduction, I assume you know or are familiar with:

• NodeJs

• Npm

• Git

• Sass

• TypeScript

• angular-cli

Environment preparation

• Install NodeJs globally (>6.9.x), including npm (>3.x.x)

• Globally install angular-cli

npm install -g @angular/cli

• IDE recommends using WebStorm

Framework construction

angular-start is a starting project I maintain on GitHub. You can directly download it and use it as a basic development framework.

You can quickly start and develop through the following steps:

git clone https://github.com/laixiangran/angular-start.git
cd angular-start
npm install（等待依赖包安装完成，再进行下一步）
npm start

For easy startup, scripts in package.json Configured"start": "ng serve --hmr -o --proxy-config proxy.config.json", you can see that this command configures --hmr (start module hot update) respectively , -o (automatically open the browser), --proxy-config (proxy configuration)

Console information:

Browser interface:

The project has been started successfully and you can proceed with the following development. Maybe you also want to know what the files in this project are used for, so let’s find out.

Project File Overview

src Folder

The application code is located in the src folder. All Angular components, templates, styles, images, and anything you need for your application are here. Files outside this folder are used to provide support for building applications.

Define the Definition This module configures the root route of the applicationThis folder places application-level common components Place the application-level data model in this folder Place the application in this folder For each page in, the directory structure here is consistent with ##app/services/*assets/*environments/*favicon.icohmr.tsmain.tsindex.html

File	Purpose
##app/app.component.{ts, html,css,spec.ts}	AppComponent component using HTML templates, CSS styles and unit tests. It is the root component, and as the application grows it becomes the root node of a tree of components.
app/app.module.ts	AppModule, this root module will tell Angular how to assemble the application
app/app.routes.ts
app/components/*
app/models/*
app/pages/*	app/
this Place application-level universal services under the folder
You can place any static files such as fonts, pictures, etc. in this folder. When building the application, they will all be copied to the release package
This folder includes preparations for each target environment files, they export some configuration variables used in the application. These files will be replaced when building the application. For example, you may use different backend API addresses in development environment, test environment and production environment
Show in bookmarks The website icon in the column
HMR’s launcher will be used in	To launch the main page of the application
website. In most cases you won't need to edit it. The CLI will automatically add all js and css files when building the app, so you don't have to manually add any