Directory structure of the ANGULAR2 project

Preface

Small series recently in the front-end engineering work, using the ANGULAR2 front-end framework for the project front-end interface reconstruction. And then for the ANGULAR2 project operating principles have some new experience, here and June mutual encouragement. Body

ANGULAR2 directory Structure

Development Create a new folder HelloWorld

mkdir HelloWorld

Create configuration file Package.json

Description

Name: title of the project;

Version: versions of the project;

Description: A brief description of the project;

Scripts: NPM can call some scripts or encapsulate some of the commands

Devdependencies: Some toolkits that are dependent on project development

Dependencies: Base package for project dependencies

Webpack: Packaging Tools

Web-dev-server: Small server to create configuration file Tsconfig.json

Description

Module: How the code is organized

Target: Compile platform (ES3, ES5, ES6, etc.)

Sourcemap: When the TS file is compiled into a JS file, whether to generate the corresponding Sourcemap file

Emitdecoratormetadata: Support typescript to generate metadata for declarations with adorners

Experimentaldecorators: Whether the experimental adorner feature is enabled

Typeroots: Specifies the location of the type definition file for the Third-party library, and it is recommended that you create a resource folder using the Node_modules/@types folder

mkdir SRC

Creating app.component.html Files

Description

 

After the project starts, the Web browser displays the content to create the App.component.ts file


Description

Import component Modules (Component) from Angular's base package @angular/core via Imports


Import {Component} from "@angular/core";


Use the @component adorner to tell angular how to create a component.

Selector: ' Hello-world ': DOM element name for this component

Templateurl: ' src/app.component.html ': Introducing the required template to the component


@Component ({
selector: ' Hello-world ',
templateurl: ' src/app.component.html '
})
 
Define a component class and export the class externally so that other files can refer to the component by its name


appcomponent{}
 
Creating app.module.ts Files

Description

@NgModule: An adorner used to define a module

Declarations: Import module dependent components, directives, etc.

Imports: Additional modules needed to import the current module

The Browsermodule module registers key provider and generic directives, configured in the Imports property as a common module for global invocation.

Bootstrap: Marks the boot component and renders the marked component into the template when angular starts the application. Creating main.ts Files


Description

This file is a portal file that is used to concatenate the entire project.

Start the application, relying primarily on the angular platformbrowserdynamic function and application module Appmodule, and then invoke the Platformbrowserdynamic (). Bootstrapmodule () method, To compile the boot Appmodule module. Create host Home page index.html (under Project root directory)

Description

Files generated when Webpack Package command runs when bundle.js files

<script src= "Bundle.js" ></script>
 

The 
 

At this point, the whole HelloWorld project is basically completed. Next, use the packaging tool to package the project and compile it so that the entire project runs. Packaged Deployment Creating webpack.config.js Files



PS: This file webpack its own configuration file for the packaging tool


The configuration file is not found in the project's root directory and is included in the Node-modules file. 

Entry: Page entry file configuration, a portal or multiple portal files can be

Output: Corresponds to the export item configuration, that is, the output entry file compiled file

Resolve: Defines the configuration of the parsing module path, commonly used extensions, to specify the suffix of the module, so that the module can be introduced without writing a suffix, automatic completion.

Module.loaders: The most critical configuration item, which tells Webpack what loaders are used to handle each type of file.


PS: So far, HelloWorld project completed. Run 1. Install Dependency Pack


CNPM Install






PS: Enter this command at the root of the project, and CNPM will install all the dependent packages according to the Package.json configuration file. Also automatically creates a Node-modules folder in the root directory, where the project depends on the package. 2. Start Service


CNPM start







Enter the URL in the browser


http://localhost:3000