欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angular初尝

程序员文章站 2024-03-16 10:40:10
...

使用 angular-cli 搭建 angular 项目(从零开始)

1. 安装 angular-cli (脚手架); npm install -g @angular-cli
2. 在CMD中创建路由项目 ng new my-app --routing

有两种配置路由的方法,即在路由模块或者在模块内部(把路由的配置放在模块AppModule中)配置路由,这里使用了路由模块( --routing)。

路由模块并不是必须的,它只是优化设计的一种选择,能够保持设计的一致性和代码的干净,便于开发者查找和扩展配置.

src > app 下将会生成两个module. (项目名)和 (项目名)-routing
(项目名)-routing里面就是路由的信息, 并且它被import到了(项目名) module 里面.
app.component.html中 router-outlet也已经写上.

RouterOutlet是一个来自路由模块中的指令,它的用法类似于组件.它扮演一个占位符的角色,用于在模板中标出一个位置,路由器将会把要显示在这个出口处的组件显示在这里,即在宿主视图中的RouterOutlet之后显示组件内容.
angular初尝

3. cd my-app 转到项目目录下
4. 运行项目 ng serve
5. 根据个人需求安装UI组件库(npm)
6. 根据需求新建组件模块。例 ng g component login(也可以 ng g c login)

在app.module中引入组件及基础模块

// 登录
import { LoginComponent } from './login/login.component';
// 首页
import { IndexComponent } from './index/index.component';
// 子组件
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';

表单及http模块

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
7. 在NgModule中注入

关于NgModule

  • declarations:用来放组件、指令、管道的声明。
  • imports:用来导入外部模块。
  • providers:需要使用的Service 都放在这里。
  • bootstrap:定义启动组件。你可能注意到了这个配置项是一个数组,也就是说可以指定做个组件作为启动点,但是这种用法是很罕见的。

angular初尝

8. 在app-routing.module中注册、定义路由(默认路由及嵌套路由)

angular初尝
其中:
pathMatch有两种模式:prefix和 full,
prefix表示以 path开头,如 path:‘a’ 实际访问的路径为 ‘a/b’,就可以匹配到
full:path完全匹配
path:’**’,//上面匹配不上的路径,都匹配到这

9. 设置app.component.html
<div class="container" style="margin-top:50px;">
    <router-outlet></router-outlet>
</div>

至此框架及路由搭建完成,可以开始写页面了~

相关标签: 前端 angular