Angular_初识结构

1. 项目搭建

• 执行npm install -g @angular/cli全局安装angular-cli
• 初始化项目 ng new FAngular
• 进入项目：cd FAngular
• 运行项目: ng serve

2. 路由信息

• 可以在src/app/app-routing.module.ts中配置路由信息

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Home } from './pages/home/home.component';
import { About } from './pages/about/about.component';

const routes: Routes = [
  {
    path: 'home',
    component: Home
  },
  {
    path: 'about',
    component: About
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 页面信息

• 路由对应的位置创建相关文件
  
• 对应组件ts文件中配置，可以在对应html、less文件中定义结构样式

eg： home.component.ts

import { Component } from "@angular/core";

@Component({
    selector:'',
    templateUrl:'./home.component.html',
    styleUrls: ['./home.component.less']
})
export class Home {
    title = 'Home页面'
}

4. 路由跳转

• 在app页面配置路由触发位置

eg: app.component.html 

<nav class="navbar">
    <a class="navbar_item" routerLink="/home" routerLinkActive="navbar_item_active">首页</a>
    <a class="navbar_item" routerLink="/about" routerLinkActive="navbar_item_active">关于</a>
</nav>
<router-outlet></router-outlet>

了解以上内容后，一个简单的框架就搭好了，就可以根据自己的喜好进行定制化配置啦

Angular中文文档

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~