Angular2 explains how to build an environment and how to develop it.

Angular2 explains how to build an environment and how to develop it.

Angular-CLI

Speaking of cli, there is no stranger to everyone. Every framework has a corresponding cli, commonly 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.

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_NAMEcd PROJECT_NAMEng serve

PROJECT_NAMEIs your own project name

If no error is reported after the deployment is successful, go to the browserhttp://localhost:4200/, The files in the project will be automatically deployed after modification.

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

Commandng generate Can be abbreviatedng gThe following describes how to create a component.

ng generate component my-new-componentng g component my-new-component # using the alias# components support relative path generation# if in the directory src/app/feature/ and you runng g component new-cmp# your component will be generated in src/app/feature/new-cmp# but if you were to runng g component ../newer-cmp# your component will be generated in src/app/newer-cmp

The following table lists all the commands:

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

The configuration file will be generated in the dist/directory. For other tests, read the configuration file carefully. Here we 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/nav.component';@NgModule({ declarations: [  AppComponent,  NavComponent ], imports: [  BrowserModule,  FormsModule,  HttpModule, ], providers: [], bootstrap: [AppComponent]})export class AppModule { }

It is not difficult to see that the system automatically introducesnav.component Component. 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, which only needs to be changed.app.component.html As follows.

The class here is in the correspondingapp.component.cssAs follows:
.title { font-size: 100px;}
In this case, the page will automatically refresh the font size, so hereapp-nav Where can I find the tag?
Let's gonav.component.ts Take a look
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() { }}
It is not hard to seeselector: 'app-nav' Our command is app-nav
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.
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';
deeppurple-amberThe subject color 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:19Cannot find name 'HammerInput'.client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39Cannot find name 'HammerManager'.
The document also provides an explanation, becausemd-slide-toggle Andmd-slider Two components depend on external third-party componentsHammerJS Additional configurations are required.
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 the command line tool first.npm i --save-dev @types/hammerjs
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.
Let's try to add multiple button components and modify them.app.component.html File. The complete code is as follows:

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
Today's front-end frameworks are endless, so don't follow them blindly. You need to select a framework based on your company's needs and employees' work experience. If you really say which framework is fast in performance, I haven't tested it yet, but I'm sure React, Vue, and Angular2 are almost the same, unless there is a problem with the code during implementation, because these frameworks have been tested by large projects. The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.