Angular2 from the setting up of the environment to the development steps detailed _angularjs

Angular-cli

Speaking of the CLI everyone is not unfamiliar, every frame will have a corresponding CLI, commonly known as scaffolding. ANGULAR2 itself provides a starter project Angular2-quickstart, I tried it, and found that it was not very good, and that most of the other extensions needed to be installed on their own, then looked at the ANGULAR-CLI deployment is simple and easy to use, but also provides a directory of quick-build projects.

Installation

First of all, it's a good idea to upgrade node to 6.x to avoid unnecessary hassles caused by the low node version.

NPM install-g ANGULAR-CLI

Usage

Ng--help

See all usage

Create a local development environment to build and run ANGULAR2 projects

ng new project_name
cd project_name
ng serve

PROJECT_NAMEIt's your own project name.

After successful deployment to the browser http://localhost:4200/ , modify the files in the project will be automatically deployed

You can configure the default HTTP port and a livereload server-------

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

Building components, directives, pipelines, and services

command to ng generate begin with, which can be abbreviated as ng g , the following are some ways to create component.

Ng generate component My-new-component
ng G component My-new-component # using the alias

# components support RelA tive path Generation
# If in ' directory Src/app/feature/and you run
ng g component new-cmp
# your Componen T'll be generated in src/app/feature/new-cmp
# But if your were to run
ng G component. /NEWER-CMP
# Your component is generated in src/app/newer-cmp

The following list is all the commands:

Creating routes

Here the CLI temporarily disables the creation of routes, and a new route builder is coming, where you can read the official documentation for the new router: https://angular.io/docs/ts/latest/guide/router.html

Create a Build

NG Build

will be generated to the dist/directory, other about testing, configuration files Please read carefully, here only to the most basic construction process.

Component Combat

See this you may have begun to try to create the steps of the project I believe you can easily solve the above, here I first try to create a component, the command is as follows.

Ng G Component Nav

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

One more folder called Nav, look at the file directory

We found that the app component directory structure was the same as the project was created, and the content was similar, so you could try to create a component of your own that could be modified in the corresponding CSS file.

Then my app.module.ts became the following

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's not hard to see that the global automatically introduces nav.component components. The problem we are now concerned with is the reference and data transfer between components, and here for simplicity, just introduce the method, while the data transmission, routing mechanism here does not explain everyone's own website.

Here's a look at the introduction of NAV components in the app, just to change the app.component.html following.

The class here corresponds to the app.component.css following

. title {
 font-size:100px;
}

The page automatically refreshes the font size, so app-nav where does the label get?

Let's take nav.component.ts 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's not hard selector: 'app-nav' to see how our instructions are app-nav

The page will now appear like this

Okay, here we go. A simple component reference has been implemented.

Introduction of Angular Material2

At the beginning of this article, we have explained the advantages of introducing angular material2, which are understood by other component style frames.

Installation commands

NPM Install--save @angular/material

Introducing frames into the src/app/app.module.ts

Import {Materialmodule} from ' @angular/material ';
Other imports
@NgModule ({
 imports: [Materialmodule.forroot ()],
 ...
})
Export class Pizzapartyappmodule {}

The introduction of core and main style, the improvement of angular material 1.x is to choose different colors.

We're here with the angular CLI. Here again, add the following line to STYLE.CSS, note that the SRC directory of the file

@import ' ~ @angular/material/core/theming/prebuilt/deeppurple-amber.css ';

deeppurple-amberTheme colors are variable, specific to the text of the document link.

Friends who have been here to open the console (a good habit) 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 documentation also explains that md-slide-toggle additional configuration is required for the framework and md-slider two components to rely on external third party components HammerJS .

We are not anxious to use the document to the NPM or the introduction of CDN path, because the test will still be an error, maybe I introduced the wrong way, in order to reduce detours directly to the pro-test effective method

We're going to run the command-line tool first.npm i --save-dev @types/hammerjs

Then edit the Tsconfig.json file to add Hammerjs to the types

"Types": [
 "Jasmine", "Hammerjs"
]

Here found the page automatically refreshed after the error has disappeared, if required font icon can be introduced in the src/index.html

<link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel= "stylesheet" >

So far, the entire angular material2 has been ready.

We try to add multiple button components to test, modify the app.component.html file, complete the code as follows

No problem. Here is the lazy hand layout style, directly to the BR line everyone easy to see, when the page deployment is completed we will see the following effects

Cool components, more components of the syntax reference to the link above, to believe that everyone learn angular2 confidence doubled, really have components can be completed rapid development, the next step is everyone to ANGULAR2 official website to see other concepts, processing data implementation and back-end docking. Project online, done.

Summarize

Today's front-end framework is endless, do not blindly follow, according to the company's needs and staff work experience to choose the framework, really speaking of the performance of which framework fast, although I did not test, but I am sure react, Vue, Angular2 a few between the same, unless the code in the implementation of the problem, Because these frameworks have been tested by a large number of projects. The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.