建议和反馈

请填写你的反馈内容

使用ANGULAR和BOOTSTRAP推进单页应用程序

2019-10-03 ·1541次阅读 ·读完需要15分钟

配方概述

使用Angular 2 构建单页应用程序SPA),我们需要学习如何在Angular 2中实现路由。Angular 2带有内置的路由API,这些API非常强大,功能丰富且易于使用。在本食谱中,我们将构建一个基本的搜索引擎模板来演示Angular 2中的路由。我们将不会构建一个完整的搜索引擎,因为这超出了本食谱的范围。我们将使用Bootstrap 4设计搜索引擎模板。在本食谱的最后,您将习惯于使用Angular 2构建SPA。

在学习本教程之前,强烈建议阅读Angular 2体系结构和功能的全面概述

在本食谱中,我们将涵盖以下主题:

  1. 在Angular 2中路由

  2. Angular 2提供的内置HTTP客户端

  3. 使用Chance.js库生成随机文本数据

设置项目

请按照以下步骤设置您的项目:

  1. 在此配方的练习文件中,您将找到两个目录,初始目录和最终目录。最终目录包含最终的搜索引擎模板,而初始目录包含用于快速开始构建搜索引擎模板的文件。

  1. 在初始目录中,您将找到app.js和package.json。在里面

package.json文件,放置以下代码:

“ name”:“ SearchEngine-Template”,“ dependencies”:{ 
“ express”:“ 4.13.3”,
“ chance”:“ 1.0.3” 


在这里,我们列出Express.js和Chance.js作为依赖项。Express将用于构建Web服务器,而Chance.js将用于生成随机文本数据以填充模板的搜索结果。

  1. 现在,在初始目录中运行npm install以下载软件包。

在初始目录中,您将找到一个名为public的目录,所有静态资产都将放置在该目录中。在公共目录中,您会找到componentTemplates,css,html和js目录。
在css目录中,您会找到bootstrap.min.css;。html目录中的index.html;最后是js目录中的index.js,angular2-all.umd.js,angular2-polyfills.js和Rx.umd.js。

  1. 在index.html中,放置以下起始代码以加载Angular,Bootstrap和

index.js文件:
<!doctype html> 
<html> 
<head> 
<title>搜索引擎模板</ title> 
<link rel =“ stylesheet” type =“ text / css” href =“ / css / bootstrap.min。 css“> 
</ head> 
<body>

<script src =“ / js / angular2-polyfills.js”> </ script> 
<script src =“ / js / Rx.umd.js”> </ script> 
<script src =“ / js / angular2-all。 umd.js“> </ script> 
<script src =” / js / index.js“> </ script> 
</ body> 
</ html> 
此代码是不言自明的。

  1. 现在,在app.js文件中,放置以下代码:

var express = require(“ express”); var app = express(); 
app.use(express.static( 目录名+“ / public”)); app.get(“ / *”,function(httpRequest,httpResponse,next){ 
httpResponse.sendFile( dirname +“ /public/html/index.html”); 
})

app.listen(8080); 
同样,在这里,大多数代码是不言自明的。
无论HTTP请求路径是什么,我们都只提供index.html。

配置路由并引导应用程序

在SPA中,我们的应用程序的路由在前端中定义。在Angular 2中,我们需要定义路径和与该路径关联的组件,该组件将为该路径呈现。
我们提供到根组件的路由,并且根组件显示绑定到该路由的组件。
让我们为搜索引擎模板创建根组件和路由:

  1. 将此代码放在index.js文件中以创建根组件

和路由:
var AppComponent = ng.core.Component({选择器:“ app”,
指令:[ng.router.ROUTER_DIRECTIVES],templateUrl:“ componentTemplates / app.html” 
})。Class({ 
构造函数:function(){ } 
}

AppComponent = ng.router.RouteConfig([ 
{路径:“ /”,组件:HomeComponent,名称:“ Home”},
{路径:“ / search-result”,组件:SearchResultComponent,名称:“ SearchResult”},

{路径:“ / * path”,组件:NotFoundComponent,名称:“ NotFound”} 
])(AppComponent);

ng.platform.browser.bootstrap(AppComponent,[ng.router.ROUTER_PROVIDERS,ng.core.provide(ng.router.APP_BASE_HREF,{useValue:“ /”})
]));

  1. 现在,在componentTemplates目录中创建一个名为app.html的文件,并将此代码放入其中:

<nav class =“ navbar navbar-light bg-faded”> 
<ul class =“ nav navbar-nav”> 
<li class =“ nav-item”> 
<a class =“ nav-link” [routerLink] =“ [ 'Home']“>首页</a> 
</ li> 
</ ul> 
</ nav> 
<router-outlet> </ router-outlet> 
以下是此代码的工作方式:

  1. 首先,我们创建根组件,称为AppComponent。创建根组件时,我们向其中添加ng.router.ROUTER_DIRECTIVES指令,这使我们可以使用routerLink指令。

  2. 然后,我们使用ng.router.RouteConfig配置应用程序的路由。我们提供路由数组作为ng.router.RouteConfig方法的参数。路由由路径,组件和路由名称组成。路径可以是静态,参数化或通配符,就像Express路径一样。在此,第一个路由用于主页,第二个路由用于显示搜索结果,最后一个路由用于处理无效的URL,即未定义路由的URL。ng.router.RouteConfig方法返回一个函数,该函数采用根组件并将路由附加到该组件。

  3. 然后,我们初始化应用程序。在初始化应用程序时,我们将传递ng.router.ROUTER_PROVIDERS提供程序,该提供程序将用于创建与路由相关的各种服务的实例。此外,我们还提供了一个自定义提供程序,当请求ng.router.APP_BASE_HREF服务的实例时,它会返回/字符。ng.router.APP_BASE_ HREF用于查找应用程序的基本URL。

  1. 在AppComponent模板中,我们正在显示导航栏。导航栏上有一个没有href属性的锚标记。取而代之的是,我们使用routerLink指令分配重定向链接,以便在单击时(而不是重新加载完整的页面),它仅更改URL和组件。最后,<router-outlet>是根据当前URL显示组件的内容。

 

产生随机搜寻结果

要填充模板,我们需要生成一些随机搜索结果数据。为此,我们可以使用Chance.js库。我们将在服务器端而不是客户
端端生成随机数据,以便稍后可以演示如何使用Angular 2 发出HTTP请求。Chance.js可用于客户端JavaScript和服务器端JavaScript。我们之前下载了Chance.js软件包以与Node.js一起使用。这是生成随机数据的代码。将其放在/ *路由上方的app.js文件中,以使/ *不会覆盖随机数据路由:
var Chance = require(“ chance”),机会= new Chance(); 
app.get(“ / getData”,function(httpRequest,httpResponse,next){var result = []; 
for(var i = 0; i <10; i ++)
{
result [result.length] = {标题:机会。句子(),说明:机会。段落()

}

httpResponse.send(result); 
})
在这里,我们首先为/ getData路径创建一条路由,该路由发送搜索结果数组作为响应。路由回调使用机会.sentence()生成搜索结果的随机标题,并使用机会.paragraph()生成描述。

创建路线组件

让我们创建HomeComponent,SearchResultComponent和NotFoundComponent。在此之前,让我们创建一个显示搜索表单的组件。搜索表单将具有一个文本框和一个搜索按钮。跟着这些步骤:

  1. 将此代码放在AppComponent代码上方的index.js文件中:

var FormComponent = ng.core.Component({选择器:“ search-form”,
指令:[ng.router.ROUTER_DIRECTIVES],templateUrl:“ componentTemplates / search-form.html”,
})。Class({ 
构造函数:function( ){},ngOnInit:function(){ 
this.searchParams = {查询:“” 
};

this.keyup = function(e){this.searchParams = { 
query:e.srcElement.value 
}; 
}; 

}

  1. 现在,在componentTemplates中创建一个名为search-form.html的文件。

目录,并将此代码放在其中:
<div class =“ ma-2 text-xs-center”> 
<h1>搜索任何内容</ h1> 
<form class =“ form-inline mt-1”> 
<input( keyup)=“ keyup($ event)” class =“ form-control” type =“ text” placeholder =“ Search”> 
<a [routerLink]="['SearchResult', searchParams]"> 
<button class =“ btn btn-success-outline“ type =” submit“>搜索</ button> 
</a> 
</ form> 
</ div>

代码是这样工作的:

  1. 首先,我们创建一个名为FormComponent的组件。它使用

ng.router.ROUTER_DIRECTIVES指令。

  1. 在组件的模板中,我们显示一个HTML表单。表单具有文本框和按钮。

  2. 我们处理文本输入框的keyup事件,并将值存储在

searchParams.query属性。

  1. 该按钮将重定向到SearchResult组件。请注意,这里我们将searchParams对象传递给routerLink,该对象在重定向时成为查询参数。

现在,让我们创建HomeComponent组件。此组件显示在主页上。它显示搜索表单。
这是创建HomeComponent的方法:

  1. 将此代码放在AppComponent代码上方的index.js文件中:

var HomeComponent = ng.core.Component({选择器:“ home”,
指令:[FormComponent],
templateUrl:“ componentTemplates / home.html”,
})。Class({ 
构造函数:function(){} 
})

  1. 现在,创建一个名为search-form.html的文件,并将其放在

componentTemplates目录:
<search-form> </ search-form> 
在这里,HomeComponent代码是不言自明的。

  1. 现在,让我们创建SearchResultComponent组件。该组件应在其下方显示搜索表单和搜索结果。它应该通过向服务器发出HTTP请求来获取结果。这是SearchResultComponent的代码。将其放在AppComponent代码上方的index.js文件中:

var SearchResultComponent = ng.core.Component({选择器:“搜索结果”,
指令:[FormComponent],viewProviders:[ng.http.HTTP_PROVIDERS],
templateUrl:“ componentTemplates / searchResult.html” 
})。Class({

构造函数:[ng.router.RouteParams,ng.http.Http,function(params,http){ 
this.params = params; this.http = http; this.response = []; 
}],
ngOnInit:function(){ 
var q = this.params.get(“ query”); this.http.get(“ getData”)。subscribe(function(res){ 
this.response = JSON.parse(res._body); 
} .bind(this)); 

}

  1. 现在,创建一个名为searchResult.html的文件并将其放在

componentTemplates。将此代码放在文件中:
<style> 
ul 

list-style-type:none; 

</ style>

<div class =“ container”> 
<search-form> </ search-form> 
<div class =“ ma-2 text-xs-center”> 
<ul> 
<li * ngFor =“#item of response” class = “ mt-2”> 
<h4> {{item.title}} </ h4> 
<p> {{item.desc}} </ p> 
</ li> 
</ ul> 
</ div> 
</ div>

 


代码是这样工作的:

  1. 在这里,我们提供了ng,http.HTTP_PROVIDERS提供程序,该提供程序在使用Angular 2提供的HTTP客户端服务时使用。使用HTTP客户端服务,我们可以发出HTTP请求。

  2. 在构造函数属性中,我们将注入HTTP服务以及ng.router.RouteParams服务,该服务用于获取当前URL的查询参数。

  3. 在ngOnInit方法中,您可以看到如何使用HTTP服务发出GET请求,以及如何使用ng.router.RouteParams服务获得查询参数。

  4. 在组件的模板中,我们正在使用ngFor指令显示获取的搜索结果。

 

现在,让我们创建NotFoundComponent。这是该代码:

  1. 将此代码放在AppComponent代码上方的index.js文件中:

var NotFoundComponent = ng.core.Component({选择器:“名称搜索”,
templateUrl:“ componentTemplates / notFound.html” 
})。Class({ 
构造函数:function(){} 
})

  1. 现在,创建一个名为notFound.html的文件并将其放在

componentTemplates目录。将此代码放在文件内:
<div class =“ container”> 
<div class =“ ma-2 text-xs-center”> 
<h1>找不到您要查找的页面</ h1> 
</ div> 
</ div> 
代码是不言自明的。


测试模板

要测试模板,我们将按照以下步骤操作:

  1. 在初始目录中,运行node app.js命令。

  2. 现在,在浏览器中,打开http:// localhost:8080 / URL。您应该看到以下输出:

使用Angular学习网页设计

  1. 现在,在搜索框中键入内容,然后单击“ 搜索”按钮。然后,您应该看到以下输出:

使用Angular学习网页设计

  1. 现在,在地址栏中输入无效的路径。您应该能够看到以下输出:

使用Angular学习网页设计

路由生命周期方法

当路径与组件匹配时,Angular 2将激活该组件,而当路径更改时,Angular 2将其禁用。当我们说某个组件已被激活时,这意味着Angular 2已经创建了该组件的一个实例,即该组件的构造函数方法,而当我们说某个组件已被停用时,则意味着该组件已被激活。从DOM中删除并删除实例。
在激活或停用组件时调用的组件的方法称为路由生命周期方法。
这是路由生命周期方法的列表:

  1. CanActivate:在激活组件之前将调用此挂钩。它应该返回一个布尔值或一个Promise,指示是否激活该组件。

  2. routerOnActivate:在激活组件后调用此方法。

  3. routerCanReuse:当下一个URL更改再次是相同的URL时,调用此方法以查找是否重用组件的上一个实例。它应该返回一个布尔值或一个Promise,指示是否要重用。仅在较早创建实例的情况下才调用它。

  4. routerOnReuse:如果正在重用组件,则调用此方法。在routerCanReuse之后调用。

  5. routerCanDeactivate:在停用组件之前调用此方法。它应该返回一个布尔值或一个Promise,指示是否要停用该组件。

  6. routerOnDeactivate:在停用组件后调用此方法。

让我们看一下路由生命周期方法的代码示例。用以下
代码替换
HomeComponent 代码:var HomeComponent = ng.core.Component({选择器:“ home”,
指令:[FormComponent],
templateUrl:“ componentTemplates / home.html”,
})。Class({ 
构造函数:function() {},routerOnActivate:function(){ 
console.log(“组件已被激活”); 
},
routerCanReuse:function(){console.log(“组件可以被重用”);返回true; 
},
routerOnReuse:function() ){console.log(“正在重用组件”); 
},
routerCanDeactivate:function(){console.log(“可以停用组件”);返回true;

routerOnDeactivate:function(){console.log(“组件已被停用”); 

}

HomeComponent = ng.router.CanActivate(function(){console.log(“可以激活组件”);返回true; 
})(HomeComponent); 
现在,访问主页。在那里,再次单击主页按钮。现在,在搜索框中键入内容,然后单击“ 搜索”按钮。这是您将看到的控制台输出:
可以激活组件可以激活组件可以重复使用组件可以重复使用组件可以禁用组件可以禁用组件

生产模式与开发模式

到目前为止,我们一直在开发模式下运行Angular 2。开发和生产模式之间的区别在于,在开发模式下,Angular 2在第一次运行后立即启动更改检测,并在第一次和第二次运行之间发生任何更改后,在检查错误记录一个值已更改这有助于查找错误。
要启用生产模式,请将此代码放在ng.platform.browser上方。bootstrap()方法调用:
ng.core.enableProdMode();

 


评论(0)问答(0)
请先登录或注册

请先登陆或注册

相关推荐

兰悠易:主流币BTC ETH LTC 11.18晚间行情分析

现在各币种都处于下行阶段,就连主流币也逃脱不出下跌的命运;不过整体走势还是在笔者的预料之中进行,若是有跟上笔者思路操作的朋友,应该获利良多吧;没有跟上的朋友,也不用太过担心,好的行情比比皆是,能及时把......
兰悠易 · 2019-11-18
41阅读 · 0赞赏 · 0问答

王佳柏:空方持续发力 走势依旧保持下行

比特币今日整体走势以下行为主,主要分两个阶段下跌:第一阶段是在凌晨六点之后,由于多次向上试探未果后承压回落,跌势维持了数小时之后,渐渐的收回以低位8419结束第一次的下行,随即转为低位震荡运行的走势;......
王佳柏 · 2019-11-18
78阅读 · 0赞赏 · 0问答

李向午:比特币空头强势高压,多头能否稳住支撑。

李向午:比特币空头强势高压,多头能否稳住支撑。  BTC行情分析  比特币昨日以一个阳十字星收盘,价格延续早几天的下跌趋势。从小时图中可以看出今日比特币开盘价格保持震荡上行节奏,早间六时开始价格下跌直......
李向午 · 2019-11-18
43阅读 · 0赞赏 · 0问答

王佳柏:比特币震荡区间下移 可见空方继续占据主导低位

比特币早间行情处于8550一线高位震荡,可是在早间一根带有长上影线的阴K改变了震荡走势的命运,行情开始不断的向下滑动,并回踩下方的支撑点位,此时正处于8450一线震荡运行;如果在此处“摔跤”真是不应该......
王佳柏 · 2019-11-18
73阅读 · 0赞赏 · 0问答

谈喻凯:BTC如期破位继续承压 EOS ETH操作建议

  投资千万条,风险第一条;策略千百种,哪个适合我;思路没跟上,踏空两行泪。关注谈喻凯公众號币圈散户联盟,精选全球最准行情分析,消息面,技术面为你指引解读,带你把握行情,瞄准良机,稳健交易。    截......
谈喻凯 · 2019-11-18
133阅读 · 0赞赏 · 0问答

兰悠易:比特币上行不成 回调向下寻找有力支撑

比特币日线图中,K线接连两日收阳,向上最高触碰到8585,而在今日高位再次创新,向上突破8600到达高点8620位置,不过新的起点还未站稳,就成了这次上行的真高点位;多方动力的减弱,便给了空方可趁之机......
兰悠易 · 2019-11-18
161阅读 · 0赞赏 · 0问答

2139

LK币

4

粉丝

26

笔记

感谢"老虎or猫咪"

这篇精彩的笔记,目前已经帮助

  • 0
  • 1
  • 5
  • 4
  • 1
喜欢0
链客社群 加入

微博进入

商务合作>

广告投放>

公司名称:北京链客行科技有限公司

联系方式:010-67707199

ICP备案号:京ICP备18032136号

Copyright:链客区块链技术问答社区 版权所有

感谢您的提问,问题被社区永久收入以便新人查看。一定要记得采纳最佳答案哦!加油!

感谢您的善举,每一次解答会成为新人的灯塔,回答被采纳后获得20算力和相应的LK币奖励

您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!

您将赞赏给对方2LK币的奖励哦!感谢您的赞赏!