基於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

 

下次邊學邊寫,應該比較深刻,

今天這個看起來,比較敷衍,記錄作用。

 

 

 

    

 

 

 

 

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM