ANGULAR2 + Bootstrap +jquery instance

A. Create a project process:

1.use Angular CLI to create a Angular Project "demo":

Need the commmand of "Ng new Demo" to produce demo project.

2.load the project to Vscode

Click the File,select "Open Folder"

Select Import Project "Demo"

3.Configuration and install plugins in "Demo" Project

Use "NPM install [e-mail protected]" command to produce [email protected] (node_modules)

Use ' npm install jquery ' command to produce jquery (node_modules)

Use the "npm install ANGULAR-IN-MEMORY-WEB-API" command to Intall ANGULAR-IN-MEMORY-WEB-API

Use "NPM install select2" command to Install "Select2" (node_modules)

E.g:install Select2:

4. In the assets directory,add CSS, IMG, JS three documents, the contents of the three documents is as follows:

5.Configuration Angular-cli.json

Import:

1. "Styles": [

".. /node_modules/bootstrap/dist/css/bootstrap.min.css ",

".. /node_modules/select2/dist/css/select2.min.css ",

]

2. "Scripts": [

".. /node_modules/jquery/dist/jquery.min.js ",

".. /node_modules/bootstrap/dist/js/bootstrap.min.js ",

".. /node_modules/select2/dist/js/select2.min.js ",

]

6.Startup Project

Input the command "NPM start" to startup Project.

Second, Define UI Interface and decorate UI Interface

1.Define UI interface in app.component.html:

2.In Assets Directory, CSS file into a "LANDING.CSS style", img file to the relevant pictures, JS file into a "Landinglo Adingscript.js "script. These things is used to decorate UI inferface.

3.Configuration Angular-cli.json:

Import:

"Styles": [

"Assets/css/landing.css"]

"Scripts": [

"Assets/js/landingloadingscript.js"]

4.Show UI Inferface:

Third, Get data from a mock server, the In-memory Web API.

1. Define a class

1.new a file, the name is "Option.ts".

2.In "Options.ts", define a class "Option"

3.Import Inmemorywebapimodule and add it to the module's imports array and Import httpclientmodule and add it to the Modul E ' s imports array.

4.The Forroot () configuration method requires a instance of the Inmemorydataservice class to populate the In-memory data Base with Data.so,we need to define a Inmemorydataservice class to initialize the data.

5.Get data from Web APIs in App.component.ts:

(1) Import {Option} from './option ' and import {HttpClient} from ' @angular/common/http ' and import {OnInit} from ' @a Ngular/core '.

(2) constructs an HttpClient object:

(3) AppComponent need to implement the angular ngoninit lifecycle hook and implement "Ngoninit ()" method. We ' ve written a logical "Ngoninit" method with fetch data. Angular'll call it on the right time. We get the data from the emulation server by calling Getheroes (), and through the Get () method to send the request and th Rough Subscribe () method to get the data to the parameters "Options".

(4) Bind data to app.component.html with the options data in App.component.ts:use* ngfor to loop through the Data in Options:

(4) Save, the browser would automatically refresh (provided you have executed the NPM start command), the results shown:

ANGULAR2 + Bootstrap +jquery instance