工作准备
- 安装node.js,node.js中包含了npm,
node -v
查看node版本,npm -v
查看npm版本 - 全局安装angular CLI,
npm install -g @angular/cli
,ng version
查看AngularCLI版本 - 创建新的angular项目,
ng new AngularUMS
- 搭建本地json-server服务作为数据来源
- 安装项目中使用的ui库和js
npm install bootstrap tether jquery
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 { }
功能描述
- 可以进行注册登录,未登录用户不允许进入其他界面
- 登录后右上角按钮变为登出
- 点击users可以看到所有被管理的用户信息,可以进行编辑删除等操作
项目非常非常简陋,仅作为初学者记录之用