基于Angular5和WebAPI的增删改查（一）

　　由于公司后续项目重构，可能会用到Angular5。

　　所以花点时间学习一波，把学习成果分享给大家。

　　因为是事后补写帖子，很多描述比较简略。有疑问的地方，还请多多指教！

　　开始之前，你需要给你的计算机，安装一个angular环境（不会请google，有很多帖子）。

　　懒人可走下面链接

https://www.angular.cn/（angular中文站）

https://www.jianshu.com/p/327d88284abb（angular cli安装和使用教程）

Begin

1.首先要清楚几个概念

　　模块： NgModule 代表特定的功能逻辑模块，需要就引入。有点像C#中系统集成类库，比如：System.Linq，System.Data，System.Collections，需要什么就引入什么。

　　组件：Component 包含控制，数据，展示的整体文件。浅层可理解为 asp.net 中拖拖拽拽的控件。但是他们还是有区别的。深入了解你会明白。

　　服务、路由。后续会有介绍

2.项目结构

　　项目结构说明

　　dist 里边包含angular 发布文件，也是页面最终引用的js

　　edit 编辑组件，包含增改

　　query 查询组件，包含查，删

　　app. 包含app.的为根组件，所有项目必备文件。所有全局模块引入，都在app中

　　user-service 服务，面向后台接口，主要用于数据交互

　　.json 都是配置文件

3.补充说明

路由

页面级别路由指定

服务

和后台交互

根组件

userservice 中要用到http 请求。所以在跟模块中引入@Angular/http模块

页面跳转要用到自定义路由模块。所以引入app-routing

其它文件引入逻辑类似，不详细描述

4.源码地址

百度云链接：https://pan.baidu.com/s/1v63haOerPRxTiA2yIb37qw

下次边学边写，应该比较深刻，

今天这个看起来，比较敷衍，记录作用。

转载于:https://www.cnblogs.com/isWhile/p/9146131.html

基于Angular5和WebAPI的增删改查（一）相关推荐

ext store 数据修改_Go 数据存储篇（一）：基于内存存储实现数据增删改查功能...
在 Web 编程中,经常需要处理用户请求数据,而用户请求数据的处理往往又涉及到数据存储与获取,支持存储数据的媒介很多,包括内存.文件系统.数据库等,接下来,学院君将花几个篇幅的教程来系统介绍 Go W ...
基于SpringBoot集合Mybatis的增删改查实现，通过postman测试(1)
本篇介绍基于SpringBoot和Mybatis+mysql+maven的简单实现增删改查的案例,详细介绍如下, 代码地址附上:https://git.lug.ustc.edu.cn/nantian_ ...
1.WebApi是什么webApi实现增删改查操作
1.WebApi是什么 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET ...
ElementUI中使用el-calendar实现基于日历的节假日的增删改查
场景前端使用ElementUI的el-calendar组件实现可视化的节假日的增删改查. 主页面显示效果如下点击日历组件上的某天进行新增节假日时点击已经存在的节假日编辑时博客: https:/ ...
基于python的SQLite数据库增删改查
与其他数据库管理系统不同,SQLite不是一个客户端/服务器结构的数据库引擎,而是一种嵌入式数据库,他的数据库就是一个文件.SQLite将整个数据库,包括定义.表.索引以及数据本身,作为一个单独的.可 ...
gorm增删查改json_go基于echo、gorm实现增删改查,从请求到落库
go就不多介绍了直接上菜了. 一.项目解构 conf // 配置相关 dao // 数据库 log // 日志 router // 路由相关,相当于java springMVC中controller ...
webapi+EF(增删改查)
第一步,Model建立Ado.net实体模型. 第二部,Controller建立增删查改方法 public static HttpResponseMessage toJson(Object obj) ...
JavaWeb 基于jsp+javabean+servlet+mongodb 增删改查
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
无需编程，基于甲骨文oracle数据库零代码生成CRUD增删改查RESTful API接口
无需编程,基于甲骨文oracle数据库零代码生成CRUD增删改查RESTful API接口回顾通过之前一篇文章无需编程,基于PostgreSQL零代码生成CRUD增删改查RESTful API接 ...

基于Angular5和WebAPI的增删改查（一）

基于Angular5和WebAPI的增删改查（一）相关推荐

最新文章

热门文章