Angular uses angular-cli to build a web front-end project. angularangular-cli

Angular uses angular-cli to build a web front-end project. angularangular-cli

Prerequisites: angular-cli environment has been set up, not yet set up please refer to the http://www.bkjia.com/article/114254.htm

1. Create a folder

This folder is used to store all web Front-end projects created using angular-cli.

2. Start the command window and enter the folder.

3. Create a new project

Ng new project name

Note: It is best to use letters for the project name.

　

3.1 go to the folder to check whether the project is successfully created

4. Open the index. xml file in the src folder in the text editor.

The effect of using sublime is as follows:

4.1 code details

This is an html file.

Our application will be rendered at the app-root tag, and the Loading in the app-root element... it is a dashboard to inform the user that the application is being loaded. It can also be replaced by text or animation.

5. Run the application

5.1 open the command window and enter the project root directory

5.2 start the HTTP server

Angular-cli has a built-in HTTP server that can be used to start our application. It takes about 30 seconds to start the application.

ng server

Note: use ctrl + c to disable the service.

5.3 Access the application through a browser

Http: // localhost: 4200/

6. Create the first component.

6.1 why make components

The browser can only identify the tags pre-defined by browser developers. If we want the browser to recognize some new tags, we need to make a component to complete this task.

Note: the basic idea of componentization is to teach the browser to recognize some new labels with custom functions (components are equivalent to instructions in angularJS). After the components are created, they can be used in HTML documents.

6.2 how to create a component

Use angular-cli generate command to create components

Ng generate component name

For example, the command for creating a <app-hello-world> </app-hello-world> component is

ng generate component hello-world

Note: After the component is successfully created, a folder named after the component is added to the src> app directory of the project file.

7. Subsequent steps after the component is created

7.1 view Component definitions: Component annotations and Component definition classes

Note: components are written in TypeScript language, so the suffix is. the browser does not know how to parse the TypeScript file, but the ng server command automatically converts the ts file to a js file.

7.2 detailed description of component definition code

7.2.1 import dependency

Format

Import {component 1, component 2} from Module name

Code Description: import the Component and OnInit Component from the @ angular/core module.

The import statement defines which modules are required for code writing.

7.2.2 Component Annotation

What is annotation: Add a function to the Code through Annotation

When @ Component annotation shi is used on the class, the corresponding class is decorated as a Component

For example

Code explanation

The HelloWorldComponent class is decorated as a component.

@ Component annotation content explanation

Selector specifies the DOM elements used by the component.

For example

Code explanation

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

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.