Angular2 from building the environment to developing work notes

The release of Angular2 has brought about a heated discussion. It was a long time ago in preparation. At that time, the official answer was to thoroughly overturn the rewriting. After the publication, everyone's call was that the learning cost was too high, although some concepts in 1.x are removed, typescript is added. Although it is not mandatory, I recommend you try it. After all, this version is a product of Google and Microsoft.

If you want to deploy the environment, try to add Angular material in the last section of this article. I personally think it is not recommended for highly personalized projects, saving the time to write styles for enterprise-level CMS, start the text directly.

Angular-CLI

Speaking of cli, there is no stranger to everyone. No framework has a corresponding cli, also known as scaffolding. Angular2 itself provides a starting project angular2-quickstart, I tried it, found that not very easy to use, most of the other extensions need to be installed on their own, then look at the angular-cli deployment is easy to use, you can also set up a project directory quickly.

Github address: https://github.com/angular/angular-cli

Let me briefly describe the documentation in Github. For more information, see.

Install

First, you 'd better upgrade node to 6.x to avoid unnecessary troubles caused by the low node version.

Npm install-g angular-cli

Usage

Ng -- help

View all usage

Create a local development environment to generate and run the angular2 project

Ng new PROJECT_NAME
Cd PROJECT_NAME
Ng serve

PROJECT_NAME is your project name

If no error is reported after the deployment is successful, go to the browser http: // localhost: 4200/. After the files in the project are modified, they will be automatically deployed.

You can configure the default HTTP port and a LiveReload server --, such:

Ng serve -- host 0.0.0.0 -- port 4201 -- live-reload-port 49153

Generate components, commands, pipelines, and services

The command starts with ng generate and can be abbreviated to ng g. The following describes how to create a component.

Ng generate component my-new-component
Ng g component my-new-component # using the alias

# Components support relative path generation
# If in the directory src/app/feature/and you run
Ng g component new-cmp
# Your component will be generated in src/app/feature/new-cmp
# But if you were to run
Ng g component ../newer-cmp
# Your component will be generated in src/app/newer-cmp

The following table lists all the commands:

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

Create a route

Here cli temporarily disables creating a route, the new route generator is coming soon, you can read the new router's official documentation here: https://angular.io/docs/ts/latest/guide/router.html

Create a build

Ng build

Will be generated to the dist/Directory. For other test and configuration files, please go to Github and read them carefully. Here, we will only provide the most basic setup process.

Component practice

As you can see, you may have already started to try it. The steps for creating a project can be easily solved by referring to the above. Here I will first try to create a component with the command below.

Ng g component nav

Here I have created a nav component. After the execution is successful, the background is automatically deployed. Let's take a look at the changes to the file directory.

 

A folder named nav is added and you can see the file directory.

We found that the directory structure of the app component is the same as that of the project. You can try to create your own component. The style of the component can be modified in the corresponding css file.

At this time, my app. module. ts becomes as follows:

Import {BrowserModule} from '@ angular/platform-browser ';
Import {NgModule} from '@ angular/core ';
Import {FormsModule} from '@ angular/forms ';
Import {HttpModule} from '@ angular/http ';

Import {AppComponent} from './app. component ';
Import {NavComponent} from './nav. component ';

@ NgModule ({
Declarations :[
AppComponent,
NavComponent
],
Imports :[
BrowserModule,
FormsModule,
HttpModule,
],
Providers: [],
Bootstrap: [AppComponent]
})
Export class AppModule {}
The nav. component is automatically introduced globally. We are now concerned about reference and data transmission between components. For the sake of simplicity, we will only introduce the methods. However, the data transmission and routing mechanisms will not be explained here on our official website.

Next we will introduce the nav component in the app. We only need to change app.component.html as follows.

<H1 class = "title">
{Title }}
</H1>

<App-nav> </app-nav>

The class in the corresponding app.component.css is as follows:

. Title {
Font-size: 100px;
}
When the page is automatically refreshed and the font size increases, where does the app-nav tag obtain it?

Let's take a look at nav. component. ts.

Import {Component, OnInit} from '@ angular/core ';

@ Component ({
Selector: 'app-nav ',
TemplateUrl: './nav.component.html ',
StyleUrls: ['./nav.component.css']
})
Export class NavComponent implements OnInit {

Constructor (){}

NgOnInit (){
  }

}
Selector: 'app-nav' indicates that the app-nav tag is selected for our selector. You can also select attributes through [app-nav.

Note: selector is similar to the selector in css. You can also understand the components here based on directive in 1.x.
The page is displayed as follows:

 

Well, the simple component reference has been implemented here.

Introduce Angular material

At the beginning of this article, we have already elaborated on the advantages of introducing Angular material, which has been understood by other component style frameworks.

Installation Command

Npm install -- save @ angular/material

Introduce the framework in src/app. module. ts.

Import {MaterialModule} from '@ angular/material ';
// Other imports
@ NgModule ({
Imports: [MaterialModule. forRoot ()],
...
})
Export class PizzaPartyAppModule {}
Introduce the core and subject style. Compared with Angular material 1.x, you can choose different colors. See specific documentation links: https://github.com/angular/material2/blob/master/docs/theming.md

Here we use Angular CLI, which can be exploited again. Add the following line to style.css. Note that the file under the src directory is used.

@ Import '~ @ Angular/material/core/theming/prebuilt/deeppurple-amber.css ';

The color of the deeppurple-amber topic is variable. For more information, see the link above.

If you open the console (which is a good habit), you will find an error similar to the following.

Client: 49 [default] J: \ workspace \ angular2 \ ts \ epimss \ node_modules \ @ angular2-material \ slide-toggle \ slide-toggle.d.ts: 67: 19
Cannot find name 'hammerinput '.

Client: 49 [default] J: \ workspace \ angular2 \ ts \ epimss \ node_modules \ @ angular2-material \ core \ gestures \ MdGestureConfig. d. ts: 4: 39
Cannot find name 'hammermanager '.
The document also provides an explanation, because the md-slide-toggle and md-slider components in the framework depend on the external third-party component HammerJS and require additional configuration.

We are not in a rush to use the npm document or introduce the cdn path, because the test will still report an error. Maybe the method I introduced is incorrect. In order to avoid detours, we can directly provide the test method.

Run npm I -- save-dev @ types/hammerjs with the command line tool first.

Edit the tsconfig. json file and add hammerjs to types.

"Types ":[
"Jasmine", "hammerjs"
]

The error message disappears after the page is automatically refreshed. If you need a font icon, you can introduce it in src/index.html.

<Link href = "https://fonts.googleapis.com/icon? Family = Material + Icons"
Rel = "stylesheet">
So far, the entire Angular material2. All syntax here: https://github.com/angular/material2#feature-status

Let's try to add multiple button components and modify the app.component.html file. The complete code is as follows:

<H1 class = "title">
{Title }}
</H1>
<App-nav> </app-nav>

<Button md-button> FLAT </button>
<Button md-raised-button> RAISED </button>
<Button md-icon-button>
<Md-icon class = "md-24"> favorite </md-icon>
</Button>
<Button md-fab>
<Md-icon class = "md-24"> add </md-icon>
</Button>
<Button md-mini-fab>
<Md-icon class = "md-24"> add </md-icon>
</Button>
<Br/>
<Br/>

<Button md-raised-button color = "primary"> PRIMARY </button>
<Button md-raised-button color = "accent"> ACCENT </button>
<Button md-raised-button color = "warn"> WARN </button>
<Br/>
<Br/>

<Button md-button disabled> OFF </button>
<Button md-raised-button [disabled] = "isDisabled"> OFF </button>
<Button md-mini-fab [disabled] = "isDisabled"> <md-icon> check </md-icon> </button>

No problem. If you are too lazy to write the layout style, you can simply wrap the line for the br. After the page deployment is complete, we will see the following results:

 

For more information about cool components and component syntax, see the link above. Here, I believe you have more confidence in learning angular2 and can quickly develop existing components, the next step is when you go to the official Angular2 website to view other concepts and process the data and connect it to the backend. The project went live.

Summary

Orange is also learning new technologies recently, and its knowledge of bottom-layer frameworks is still being studied. Today's front-end frameworks are endless. Don't blindly follow them. You should select a framework based on your company's needs and employees' work experience, when talking about the performance framework, I haven't tested it, but I'm sure React, Vue, and Angular2 are almost the same, unless there is a problem with the code during implementation, these frameworks have been tested by large projects.