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之后显示组件内容.
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:定义启动组件。你可能注意到了这个配置项是一个数组,也就是说可以指定做个组件作为启动点,但是这种用法是很罕见的。
8. 在app-routing.module中注册、定义路由(默认路由及嵌套路由)
其中:
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>
至此框架及路由搭建完成,可以开始写页面了~
上一篇: 图像识别API Python 指定文件夹图片内容转化为文字
下一篇: 图像灰度直方图均衡和线性变换