ng2-admin分析

leokim / / 前端

ng2-admin\src\index.html

通过<app></app>作为容器

1
2
3
4
5
6
7
<body>
  <app>
  </app>
  <div id="preloader">
    <div></div>
  </div>
</body>

ng2-admin\src\app\app.routing.ts

可以看到这里用的是HashLocationStrategy（路由策略）

1
2
3
4
5
6
export const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages/dashboard' }
];
 
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

ng2-admin\src\app\app.component.ts

Conponent 的 selector选择‘app’

template 里写了外层div class=“addtional-bg”

设置子路由 router-outlet

1
2
3
4
5
6
7
8
9
10
@Component({
  selector: 'app',
  styleUrls: ['./app.component.scss'],
  template: `
    <main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
      <div class="additional-bg"></div>
      <router-outlet></router-outlet>
    </main>
  `
})

ng2-admin\src\app\pages\pages.routing.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export const routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/pages/login/login.module#LoginModule'
  },
  {
    path: 'register',
    loadChildren: 'app/pages/register/register.module#RegisterModule'
  },
  {
    path: 'pages',
    component: Pages,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' },
      { path: 'editors', loadChildren: './editors/editors.module#EditorsModule' },
      { path: 'components', loadChildren: './components/components.module#ComponentsModule' },
      { path: 'charts', loadChildren: './charts/charts.module#ChartsModule' },
      { path: 'ui', loadChildren: './ui/ui.module#UiModule' },
      { path: 'forms', loadChildren: './forms/forms.module#FormsModule' },
      { path: 'tables', loadChildren: './tables/tables.module#TablesModule' },
      { path: 'maps', loadChildren: './maps/maps.module#MapsModule' }
    ]
  }
];