Angular01 through ANGULAR-CLI to build Web front end projects

Preparation prerequisite: The ANGULAR-CLI environment has been set up, and it has not yet been built. See blog for the third few (developing basic categories)

1 Create a new folder

This folder is used to store all Web front end projects built using ANGULAR-CLI

　　

2 Start the Command window and go to the folder

　　

3 Creating a new project

　　NG New project Name

Note: The project name is best used in all letters

　　

　　

　　

3.1 to the folder to see if the project was created successfully

　　

　　　　

　　

4 Open the Index.xml file under the SRC folder via a text editor

Use sublime to open the effect as follows

　　　　

4.1 Code Explanation

　　　　

This is an HTML file

Our application will be rendered at the App-root tab, the loading in the app-root element ... is a position symbol that tells the user that the app is loading, or that it can be replaced with text or animations.

5 Run Application 5.1 Open a command window and go to the project root directory

　　　　

5.2 Starting the HTTP server

ANGULAR-CLI has a built-in HTTP server that can be used to launch our application, which takes about 30 seconds to start

　　　　Ng Server

　　　　　　

Note: Use CTRL + C to close the service

5.3 Accessing apps through a browser

　　　　Http://localhost:4200/

　　　　　　

6 making the first component 6.1 why make a component

Browsers can only identify those tags that are predefined by the browser developer, and if we want the browser to recognize some new tags, then we need to make a component to do the job.

Note: The basic idea of the component is to teach the browser to recognize some new tags that have custom functionality (the components are equivalent to the instructions in Angularjs), and the components are ready to be used in the HTML document use it .

6.2 How to create a component

Use ANGULAR-CLI's generate command to create a component

　　　　　　Ng Generate component Component name

For example, the command to create a <app-hello-world></app-hello-world> component is

Ng Generate component Hello-world

　　　　　　　　

Note: After you create the component successfully, in the src>app directory in the project file, one more folder with the name of the component

　　　　　　　　　　　　

7 component Creation Complete Next steps 7.1 View the definition of a component: component annotation, component definition class

　　　　

Note: The components are written in the typescript language, so the suffix ends with. ts, and the browser does not know how to parse the typescript file, but ng server This command automatically converts TS files to JS files.

7.2 Component Definition Code detailed 7.2.1 import dependency

Format

　　　　　　　　Import {component 1, component 2} from module name

　　　　　　

Code Explanation: Import the component component and the OnInit component from the @angular/core module

The import statement defines which components of the modules we need to write the code for

7.2.2 Component Annotations

What is annotations: adding functionality to code with annotations

When you use the @component annotation Shi on a class, the corresponding class is decorated as a component

For example

　　　　　　　　　　

Code explanation

Decorate the Helloworldcomponent class as a component

Explanation of @Component annotation content

selector specifies what DOM elements the component uses

For example

　　　　　　　　

Code explanation

The DOM element used by the component is <app-hello-world></app-hello-world>, that is: use <app-hello-world></in HTML app-hello-world> tag and the browser will recognize it.

　　

　　　　

　　　　

　　

Angular01 through ANGULAR-CLI to build Web front end projects