码迷,mamicode.com
首页 > Web开发 > 详细

angular2 + bootstrap +jquery 实例

时间:2018-02-12 18:42:38      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:nbsp   data   comm   moc   you   art   .json   styles   mock   

一、Create a project process:

 1.use Angular CLI to create an 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 bootstrap@3” command to produce bootstrap@3.3.7(node_modules)

  Use “npm install jquery” command to produce jquery(node_modules)

  Use “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 are 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.

 技术分享图片

 

 

 

 

 

 

二、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 into the relevant pictures, js file into a “landingLoadingScript.js” script. These things are 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:

 技术分享图片

 

 

三、Get data from a mock server, the in-memory web API.

1. Define a class

 1.new a file that 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 module‘s imports array.

 技术分享图片

 

4.The forRoot () configuration method requires an instance of the InMemoryDataService class to populate the in-memory database with data.so,we need to define a InMemoryDataService class to initialize the data.

 技术分享图片

 

 

5.Get data from web api in app.component.ts:

  (1) Import { Option } from ‘./option’ and import { HttpClient } from ‘@angular/common/http’ and import { OnInit } from ‘@angular/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 will call it at the right time. We get the data from the emulation server by calling getHeroes (),and through the get () method to send the request and through subscribe() method to get the data to the parameters “options”.

 技术分享图片

 

(4) Bind data to app.component.html with the options data in app.component.tsuse * ngFor to loop through the data in options

 技术分享图片

 

 

(4) Save, the browser will automatically refresh (provided you have executed the npm start command),The results shown:

 技术分享图片

 

angular2 + bootstrap +jquery 实例

标签:nbsp   data   comm   moc   you   art   .json   styles   mock   

原文地址:https://www.cnblogs.com/chendezhen/p/8444921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!