The introduction

It has been nearly a year since Angular framework was introduced to my work. During this year, I have been stepping and filling holes, and of course I have learned and accumulated a lot of knowledge, including MVVM framework, front and back end separation, front-end engineering, SPA optimization, and so on. So I want to share what I’ve learned in this Angular development Practice series for communication and sharing.

Before I introduce you, I assume that you know or are familiar with:

  • NodeJs

  • Npm

  • Git

  • Sass

  • TypeScript

  • angular-cli

Environment to prepare

  • Global NodeJs installation (>6.9.x), including NPM (>3.x.x)

  • Install angular-CLI globally

npm install -g @angular/cli
Copy the code
  • The IDE recommends using WebStorm

Frame structures,

Angular-start is a startup project I maintain on GitHub that you can download directly to use as a basic development framework.

Here are a few steps you can take to jump-start development:

Git clone https://github.com/laixiangran/angular-start.git CD presents - start NPM install (wait rely on package installation is complete, and then on to the next step) NPM startCopy the code

For easy startup, inpackage.jsonthescriptsConfigure the"start": "ng serve --hmr -o --proxy-config proxy.config.json", you can see that this command is configured separately– HMR (Boot module hot update), -o (automatically open browser),–proxy-config (proxy config)

Console information:

Browser interface:

The project has been launched successfully and you can proceed with the following development. If you want to know what the files in this project are for, let’s take a look.

Overview of project files

The SRC folder

The application code is in the SRC folder. All Angular components, templates, styles, images, and anything else your application needs are here. Files outside this folder are used to support building applications.

file use
app/app.component.{ts,html,css,spec.ts} Use HTML templates, CSS styles, and unit test definitionsAppComponentComponents. It is the root component, and as the application grows it becomes the root node of a component tree.
app/app.module.ts defineAppModuleThe root module tells Angular how to assemble the application
app/app.routes.ts This module configures the root route of the application
app/components/* This folder holds application-level generic components
app/models/* This folder holds the application-level data model
app/pages/* This folder holds the pages of the application, the directory structure andapp/consistent
app/services/* This folder holds application-level generic services
assets/* This is where you can put static files like fonts, images, etc., all of which will be copied into your distribution when you build your app
environments/* This folder contains files for each target environment that export configuration variables to be used in the application. These files are replaced when the application is built. For example, you might use different back-end API addresses in your development, test, and production environments
favicon.ico The site icon that appears in the bookmarks bar
hmr.ts HMRThe initiator will be inmain.tsIs used to start applications
index.html The main page of the website. Most of the time you don’t have to edit it. When you build your application, the CLI automatically adds all the JS and CSS files, so you don’t have to manually add any here<script>or<link>The label
main.ts This is the main entry point for the application. useJIT compilerorAOT compilerThe compiler compiles the application and starts the application’s root AppModule (used when HMR is enabledhmr.tsThe defined initiator starts) so that it runs in the browser
polyfills.ts Different browsers have different levels of Web standards support. Polyfills help us standardize these differences. You can usually just use core-js and zone.js, but you can also check it outBrowser Support GuideFor more information
styles.scss Here’s your global style. In most cases, you’ll want to use local styles in your components for maintenance purposes, but those styles that affect your entire application need to be stored centrally here
test.ts This is the main entry point for unit testing. It has some custom configurations that you’re not familiar with, but you don’t need to edit anything here
Tsconfig. {app, spec}. Json Configuration files for the TypeScript compiler.tsconfig.app.jsonIs intended for Angular applications, andtsconfig.spec.jsonIt’s for unit testing
typings.d.ts Referenced third-party plug-ins may not be recognized by the TypeScript compiler and need to be downloaded@types/xxxGet the library’s type definition file if@typesNone then need to be defined in the file, such asdeclare var $: any;

The root directory

The SRC/folder is one of the root folders of the project. Other files are used to help us build, test, maintain, document, and publish the application. They are placed in the root directory, level with SRC /.

file use
e2e/* ine2e/End -to-end testing is next. They are notsrc/Because end-to-end testing is actually independent of your application, it only works for testing your application. That’s why it has its own, righttsconfig.json
node_modules/* Node.jsCreate this folder and putpackage.jsonAll of the third-party modules listed in the
.angular-cli.json Angular CLI configuration file. In this file, we can set a series of default values and also configure the files to be included when the project is compiled. To learn more, see itsThe official documentation
.editorconfig To ensure that everyone working on your project has a basic editor configuration. Most editors support this.editorconfigFor details, seeeditorconfig.org
..gitignore Git configuration files to ensure that certain automatically generated files are not committed to source control (GitHub)
.stylelintrc.json The CSS code specification checks the configuration file
CHANGELOG.md Log files for the project
karma.conf.js KarmaUnit test configuration when runningng testI’m going to use it
LICENSE Files.
package.json npmConfiguration file that lists the third-party dependencies used by the project. You can also add your own hereCustom scripts
protractor.conf.js ProtractorThe end-to-end test profile when runningng e2eI’m going to use it
proxy.config.json ng servetheProxy profile, mainly used in the development of the front and back end to separate cross-domain problems
README.md Basic documentation of the project, including basic project information, how to start the project, how to build the project, etc.
tsconfig.json The configuration of the TypeScript compiler, which your IDE uses to help you better
tslint.json TSLintandCodelyzerConfiguration information when runningng lintWill be used. Lint features can help you keep code styles consistent

Please indicate the source of reprint, thank you!