• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

angular4和nodejs-express构建一个简单的网站

php 搞代码 3年前 (2022-01-22) 68次浏览 已收录 0个评论
文章目录[隐藏]

本文主要和大家分享构建前端的登录和注册页面,并实现angular路由。
为了让大家能够方便理解,我简单的画了一张我这个程序的路由分析图:

创建初始页面并设置总路由

初始页面app.component.html的代码如下:

<p class="bg">  <p class="jumbotron jumbotron-fluid text-center">    <p class="container">      <h1 class="display-3">{{title}}</h1>      <p class="lead">{{lead}}</p>      <hr class="my-4">      <p class="content">{{content}}      </p>    </p>  </p>  <router-outlet></router-outlet></p>

它是由一个bootstrap的jumbotron组件和一个router-outlet组成,在jumbotron中的标题、lead和内容应该随着导航到不同的页面而改变,所以我将这3个标签的内容分别用插值表达式title、lead、content代替。为了做到这一点,我创建了一个JumbotronServive服务提供商,通过rxjs的消息推送来实现。JumbotronServive的代码如下:

import { Injectable } from '@angular/core';import { Subject } from 'rxjs/Subject';export class Jumbotron{    constructor(        public title:string,        public lead:string,        public content:string    ){}}@Injectable()export class JumbotronServive{    private jumbSource = new Subject<Jumbotron>();    jumb$ = this.jumbSource.asObservable();    setJumbotron(jumb: Jumbotron){        this.jumbSource.next(jumb);    }  }

首先创建了一个Jumbotron类,包含3个属性title、lead、content分别对应jumbotron中的标题、lead和内容,然后写一个服务提供商类,在这个类中声明了一个rxjs的Subject对象(Subject是允许值被多播到多个观察者的一种特殊的Observable),然后调用Subject的asObservable()声明一个Observable对象jumb$来订阅Subject发送的消息。最后声明一个setJumbotron来发送修改过的Jumbotron对象。在AppComponent类中,我们就可以订阅并更改jumbotron中的标题、lead和内容。代码如下:

jumServ.jumb$.subscribe(      jumb=>{        this.title = jumb.title;        this.lead = jumb.lead;        this.content = jumb.content;      });

router-outlet:路由出口,用于标记该在哪里显示视图,也就是说导航到的所有路由视图都会在<router-outlet></router-outlet>标签中显示。
angular-cli(以下简称ng)已经为我们写好了基本的AppModule(Angular程序的根模块,Angular通过引导根模块来启动该应用),在这里列出看一下:

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { NgbModule } from '@ng-bootstrap/ng-bootstrap';import { AppComponent } from './app.component';@NgModule({  declarations: [    AppComponent,  ],  imports: [    BrowserModule,    NgbModule.forRoot(),    AppRoutingModule  ],  providers: [    JumbotronServive,  ],  bootstrap: [AppComponent]})export class AppModule { }

@NgModule装饰器将AppModule标记为 Angular 模块类(也叫NgModule类)。 @NgModule接受一个元数据对象,告诉 Angular 如何编译和启动应用。
本文来源gaodai#ma#com搞*!代#%^码$网!搞代gaodaima码@NgModule有以下属性:

  • imports — 本模块声明的组件模板需要的类所在的其它模块,其中最重要的是BrowserModule,这个在每个在浏览器中运行应用都需要它。

  • declarations —声明本模块中拥有的视图类,在AppModule中定义了应用的唯一组件AppComponent。

  • bootstrap — 根组件,Angular 创建它并插入index.html宿主页面。

  • providers – 服务的创建者,并加入到全局服务列表中,可用于应用任何部分,在这里加入了JumbotronServive,用于提供bootstrap的jumbotron组件中title、lead、content的更新。

AppRoutingModule是应用的路由模块,具体代码:

import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { PageNotFoundComponent } from './page-not-found.component';const appRoutes: Routes = [    {        path:'',        redirectTo:'/users',        pathMatch:'full'    },    {path: '**', component: PageNotFoundComponent}];@NgModule({    imports: [        RouterModule.forRoot(appRoutes)    ],    exports:[        RouterModule    ]})export class AppRoutingModule{}

首先定义个路由数组,其中的路由对象包括路由路径(path)、和路由对应的组件(component),因为我们的网站一打开就进入用户管理界面,在导航到首页时需要直接跳转到users路由,首页路由('')没有对应组件,而是直接跳转到users路由。path:'**'路由的作用是在找不到任何路由时,访问PageNotFoundComponent组件。
定义路由数组后,用@NgModule装饰器导入RouterModule,并将路由数组传递给RouterModule的forRoot数组。
最后导出RouterModule模块。

相关推荐:

Angular4中项目的准备和环境搭建操作
Angular4中路由Router类的实例详解

用PHP和HTML写一个简单的网站登录注册项目 html网站 个人网站登录 html用户登录代

以上就是angular4和nodejs-express构建一个简单的网站的详细内容,更多请关注搞代码gaodaima其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:angular4和nodejs-express构建一个简单的网站

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址