Angular完整项目开发
文章平均质量分 59
Angular项目开发完全教程。
小鹰信息技术服务部
Tolerance, Diversity. Hit Refresh.
展开
-
Angular完整项目开发13 - 使用图表(ng2-charts+chart.js)
Angular项目原型的主体功能差不多了,接下来添加一些其他功能,从图表开始。图表的库有多种选择,我选了ng2-chart,这名字听上去就是给Angular御用的,虽然实际做下来发现坑不少。1.安装ng2-charts和chart.js这一步巨坑,如果直接安装,默认会用最新版本,然后各种报错,折腾了三个晚上。最后发现居然是版本不兼容,所以只能指定版本安装。坑!npm install ng2-charts@2.3.0 --savenpm install chart.js@2.9.3 --s原创 2021-04-28 23:09:48 · 1912 阅读 · 0 评论 -
Angular完整项目开发12 - 分页(Paginator)与中文显示(本地化)
制作Angular的分页功能,采用Angular Material的Paginator组件,官方文档略晦涩,坑不少,费了不少功夫完成了,整理如下:HTML:<mat-paginator [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)" style="width: 100%;"></mat-paginator原创 2021-04-22 22:43:41 · 1900 阅读 · 1 评论 -
Angular完整项目开发11 - 增、删、改、查(CRUD)
经过前面的一些折腾,Angular前端系统的基础工作差不多了,现在轮到应用的核心内容之一:增、删、改、查。以设备模块(device)为例。原创 2021-04-20 20:56:32 · 1576 阅读 · 1 评论 -
Angular完整项目开发10 - 信息提示框(Dialog)
一般的软件应用中都会有一些信息提示框,比如单纯提示一条信息,用户点击确定即可;又比如某些操作之前弹框让用户确认是或否。利用Angular Material中的Dialog组件,可以制作这些提示框。目前制作了两个:提示框Hint和确认框Prompt。先说只有一个确定按钮的信息提示框:1. HTML模板hint.html<h2 mat-dialog-title style="font-family: 微软雅黑;">提示</h2><mat-dialog-c原创 2021-04-19 21:33:07 · 2645 阅读 · 0 评论 -
Angular完整项目开发9 - 全局判断用户是否已登录
xxx原创 2021-04-12 21:13:03 · 1295 阅读 · 0 评论 -
Angular完整项目开发8 - 制作登录功能
今天开始制作系统的登录功能。原创 2021-04-10 14:33:36 · 2904 阅读 · 1 评论 -
Angular完整项目开发7 - 添加实体类
TypeScript是讲究数据类型的,基本可以说面向对象开发的思路。今天准备在系统里增加实体类。以device这个组件为例,增加Device实体类。1. 添加device.ts在device目录下添加device.ts, 根据服务器端的数据库模型,该类的内容为:export interface Device { id: number; no: string; name: string; deployTime: string;}2. 在组件中引用和使用原创 2021-04-05 16:16:11 · 804 阅读 · 0 评论 -
Angular完整项目开发6 - 添加全局变量
Angular开发,在不同的组件中都会向后端发送请求,url内容有很大程度的重复:http://localhost:4200/webapp/devicehttp://localhost:4200/webapp/sysuser...于是考虑把重复的部分拿出来,做成全局变量。网上查到了方法。1. 添加全局文件global.ts, 内容为export声明。export const commonURL:string = "http://localhost:4200/webapp";2原创 2021-04-05 15:26:52 · 1218 阅读 · 0 评论 -
Angular完整项目开发5 - 添加HTTP通信功能
与服务器端通信是客户端的核心功能之一。本篇在Angular前端系统添加与后端进行HTTP通信的功能。Angular中建议使用service来进行http操作,而不是直接操作http。下面以device组件为例,增加HTTP功能,从服务端获取数据。1. 添加device组件的serviceng generate service device/device可以看到device组件中多了service相关的两个文件:device.service.spec.ts和device.service.ts原创 2021-04-05 12:19:47 · 618 阅读 · 0 评论 -
Angular完整项目开发4 - 添加主页导航栏
常规的企业级管理系统,一般都要有主页导航栏。本篇在Angular项目中增加导航栏。1. 添加导航栏的UI引用app.module.tsimport { MatToolbarModule } from '@angular/material/toolbar';import { MatIconModule } from '@angular/material/icon';...imports: [ ... MatToolbarModule, MatIconModule]原创 2021-04-04 18:35:47 · 1194 阅读 · 0 评论 -
Angular完整项目开发3 - 添加一个业务模块(component)
增加一个业务模块,例如“设备管理(device)”,在Angular也是一条指令生成,Angular中称之为组件(component)。1. 添加组件(component)ng generate component device可以看到,一个完整模块的基本要素都自动生成好了,css/html/spec.ts/ts。另外,app.module.ts中也增加对应的声明。2. 添加组件路径app-routing.module.ts,//componentsimport { D..原创 2021-04-04 17:04:53 · 1126 阅读 · 0 评论 -
Angular完整项目开发2 - UI库Angular Material的引入
好看的前端界面离不开UI库的支持。几年前搞AngularJS项目时用的是Bootstrap, 效果确实不错,不过最近发现了Angular Material这个库,似乎是为Angular定制的,配合度更好,再看一下版本,已经更新到11.x了,值得一试。上一篇中,把webapp运行了起来,不过还没放什么UI控件,本篇放几个控件试试。1. 安装Angular Materialng add @angular/material几个提示都选择默认项。2. 添加一组按钮看看app.module.原创 2021-04-04 12:59:50 · 1310 阅读 · 0 评论 -
Angular完整项目开发1- 开发环境设置与Hello World
虽然现在的工作和Web开发不沾边,但始终对Web开发难以忘怀,希望拥有一套百分百自己的Web前端原型,决定动手做一个完整的Web前端出来。现在是2021年,框架选择Angular。虽然Angular学习成本高,但TypeScript把类型系统引入js, 接近了java/C#领域的开发方式,相当有潜力,值得一试。废话不多说,开始吧。本篇记录开发环境和工具设置,以及运行Hello World。1. 安装VSCode。 VSCode不是唯一的工具,但它的功能和效率很不错。2. 安装Node.j原创 2021-04-04 10:54:01 · 685 阅读 · 0 评论