使用Angular编写用户管理系统前台界面

工作准备

1. 安装node.js，node.js中包含了npm，node -v查看node版本，npm -v查看npm版本
2. 全局安装angular CLI，npm install -g @angular/cli,ng version查看AngularCLI版本
3. 创建新的angular项目，ng new AngularUMS
4. 搭建本地json-server服务作为数据来源
5. 安装项目中使用的ui库和js npm install bootstrap tether jquery
6. npm list --depth=0查看使用npm安装过的组件

项目框架

这个项目比较简单，只使用了一个根模块。
使用ng g c componentname生成组件
使用ng g s servicename生成服务
项目目录如下图

所有使用到的模块和组件都要在app.module.ts中定义，根路由也在此模块中定义

// 导入模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
// 导入组件
import { AppComponent } from './app.component';
import { AddUserComponent } from './components/add-user/add-user.component';
import { EditUserComponent } from './components/edit-user/edit-user.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
import { RegisterComponent } from './components/register/register.component';
import { SettingsComponent } from './components/settings/settings.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { UserDetailComponent } from './components/user-detail/user-detail.component';
import { UsersComponent } from './components/users/users.component';
import { Routes, RouterModule} from '@angular/router';
import { UserService } from './services/user.service';
import { RegisteredService } from './services/registered.service';
import { LoginService } from './services/login.service';
import { RouteguardService } from './services/routeguard.service';
const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent, canActivate: [RouteguardService]},
  {path: 'users', component: UsersComponent, canActivate: [RouteguardService]},
  {path: 'users/:id', component: UserDetailComponent, canActivate: [RouteguardService]},
  { path: 'notfound', component: PageNotFoundComponent, canActivate: [RouteguardService] },
  { path: 'adduser', component: AddUserComponent, canActivate: [RouteguardService] },
  { path: 'edituser/:id', component: EditUserComponent, canActivate: [RouteguardService]},
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent }
  // { path: '', component: LoginComponent}
];
export class AppRoutingModule {}

@NgModule({
  declarations: [
    AppComponent,
    AddUserComponent,
    EditUserComponent,
    HomeComponent,
    LoginComponent,
    NavbarComponent,
    PageNotFoundComponent,
    RegisterComponent,
    SettingsComponent,
    SidebarComponent,
    UserDetailComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule
  ],
  providers: [UserService, RegisteredService, LoginService, RouteguardService],
  bootstrap: [AppComponent]
})
export class AppModule { }

功能描述

1. 可以进行注册登录，未登录用户不允许进入其他界面
2. 登录后右上角按钮变为登出
3. 点击users可以看到所有被管理的用户信息，可以进行编辑删除等操作
   项目非常非常简陋，仅作为初学者记录之用