Two ANGULAR4 Heroic Journey heroconquest-Editor hero

IDE Platform for WebStorm2017.2 build project using Scaffolding,angular-cli build project directives for ng New Project

examples are as follows:

Create Project
#ng  new  Conquest001
startup Project
#cd Conquest
#npm  start
PS: Browser input: 127.0.0.1 : 4200
If you use the directive: NG serve--open start the project in the project directory browser will automatically open the Web page

Detailed project Documentation

Edit App.component.ts and App.module.ts only
app.component.ts

Import Core Library

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

Template style:

@Component ({
  selector: ' App-root ',
  Template: ' 
  <div>
  <label>name: </label>
  <input [(Ngmodel)]= "Hero.name" >
  <label>id: </label>
  <input [ngmodel]= "Hero.id" (ngmodelchange) = "hero.id= $event" >
</div>
 
Style path:

Styleurls: ['./app.component.css ']
 
field initialization: semicolon ending between fields, comma ending between field content elements

Export class Appcomponent {title = ' My Conquest are the Sea of Stars
  . '
  from = ' Reinhard von Lohengramm ';
  Hero:heroproperty = {
    id:9527,
    name: ' Lee ',
  };
}
 
field Property Definition:

Export class Heroproperty {
      id:number;
      name:string;
}
 
App Component TS Project Overview:

Import {Component} from ' @angular/core '; @Component ({selector: ' app-root ', Template: '  
PS: Because webstorm with Typescript compiler, can be in the editing of TS files at the same time into a JS file app.module.ts

Module Import Management component : The import formsmodule required for bidirectional binding above is to import the symbol Formsmodule from the @angular/forms library in the App.module.ts file. The formsmodule is then added to the imports array of @ngmodule metadata, which is the list of external modules being used by the current application.

Import {Browsermodule} from ' @angular/platform-browser ';
Import {Ngmodule} from ' @angular/core ';
Import {appcomponent} from './app.component ';
Import {Formsmodule} from ' @angular/forms ';

@NgModule ({
  declarations: [
    appcomponent
  ],
  imports: [
    browsermodule,
    formsmodule,
  ],
  providers: [],
  bootstrap: [Appcomponent]
})
export class Appmodule {}