一、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.ts:use * 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 实例的更多相关文章

  1. Bootstrap历练实例:轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Bootstrap历练实例:响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. Bootstrap历练实例:响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  4. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  5. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  6. Bootstrap 历练实例 - 折叠(Collapse)插件事件

    事件 下表列出了折叠(Collapse)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.collapse 在调用 show 方法后触发该事件. $('#ident ...

  7. Bootstrap 历练实例 - 折叠(Collapse)插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  8. Bootstrap历练实例:简单的可折叠

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap 历练实例 - 按钮(Button)插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

随机推荐

  1. PHP--关于上传文件大小的问题

    参考:https://www.cnblogs.com/jianqingwang/p/5863960.html https://blog.csdn.net/u013168253/article/deta ...

  2. vue2.x学习笔记(三十一)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12683075.html. 安全 现在的企业都比较在意信息系统的安全问题,在使用vue的过程中也要注意这一点. 报告 ...

  3. 还在写CURD?试试这款基于mybatis-plus的springboot代码生成器

    目录 ⚡Introduction ✔️Release Features Quick Start Examples 1.Controller模板代码示例 2.Service模板代码示例 3.Servic ...

  4. Django入门4: ORM 数据库操作

    大纲 一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 2.创建数据库 表结构 二.Django ORM基本增删改查 1.表数据增删改查 2.表结构修改 三.Django ORM 字段 ...

  5. 解决 Retrofit 多 BaseUrl 及运行时动态改变 BaseUrl ?

    原文地址: juejin.im/post/597856- 解决Retrofit多BaseUrl及运行时动态改变BaseUrl(一) 解决Retrofit多BaseUrl及运行时动态改变BaseUrl( ...

  6. .html文件转换成.txt

    @ 思路 @-@ 简要 根据尖括号将文件分隔成字符串,建立一套判断字符串是否为标签的标准,若不为标签则为文本内容,存入结果文件中:   @-@ 详述 0. 建立两个哈希表: 哈希表1 unordere ...

  7. GCD-Euclidean Algorithm

    求解两个正整数的最大公约数(Greatest Common Devisor),可以采用循环进行遍历,不过效率很低.所以引入欧几里得算法(Euclid's algorithm). 欧几里得算法基于GCD ...

  8. 算法竞赛进阶指南--hamilton路径

    // hamilton路径 int f[1 << 20][20]; int hamilton(int n, int weight[20][20]) { memset(f, 0x3f, si ...

  9. Codeforces Round #622 (Div. 2) 1313 A

    Tired of boring office work, Denis decided to open a fast food restaurant. On the first day he made ...

  10. POJ 1845-Sumdiv(厉害了这个题)

    Description Consider two natural numbers A and B. Let S be the sum of all natural divisors of A^B. D ...