Identity Server 4 原理和實戰（完結）_創建Angular 客戶端

https://material.angular.io/

第一部是安裝angular cli




--prefix=ac:前綴
--routing:默認使用路由
style=scss：樣式使用scss
--dry -run表示模擬這個流程，可是實際上不會生成這些文件





不模擬就是把後面的  --dry -run去掉

調整文字的大小

-o就是打開瀏覽器

使用npm run start也是能夠的

出現這個畫面就是正常的

使用官方的ui

安裝依賴的一些庫

另一種安裝的方法，安裝依賴 還會對項目有一些配置


選擇默認的樣式



material的依賴項也裝上了



默認已經配置好了

步驟4已經加載了默認的樣式文件

10分20秒

使用方法



就會在Components文件夾下生成一個文件夾navbar

全部的組件都以ac開頭




ng serve -o查看效果

右側中間部分放路由的容器

給容器部分加一個樣式



後綴名都改爲scss



沒有什麼能夠路由的頁面，這裏再作一各組件





都匹配不上也，跳轉到Dashboard

使用angular訪問web服務

web服務不須要受權

這裏就先不是用數據庫了，使用memory緩存

ImemoryCache注入進來

新建實體類 就三個屬性








如今api1是不須要受權的

angular生成table的命令



而後是路由的配置

添加菜單

 

生成Angular的Service

先看一下效果，會生成兩個文件。Spec是用於測試的



這也是Ctrl+.有一個快捷鍵


使用這個組件，必須如今Modules引入。app.modules.ts

寫一個方法來查詢全部的Todo

新建Models類來接受api返回的數據

這裏是定義接口的形式


設置了返回類型，Ctrl+. 導入了引用


todos變量實現了IToDo的接口




從新編譯代碼

頁面上線都註釋掉，只看控制檯的輸出

跨域的錯誤

在api1裏面添加一個策略

而後再使用mvc的Filter 添加一個Filter。針對全部的controller的都使用這個策略

而後在config裏面

這句話漏了加上了 在這裏從新加上

再次運行，已經能夠看到前端的數據了

前端的代碼簡單的寫寫

咱們是把數據放在todos這個變量上了。因此前臺把數據源源改一下


設置只有有數據纔去顯示table


自定義列

添加操做

生成一個form


添加一個菜單先


增長路由

看一下生成的表單的樣式效果


修改form表單的樣式

ts內線保留就一個字段


Service內添加一個

再建一個add的model類

這裏只須要一個title屬性就能夠了。



頁面的ts內具體的代碼




使用這個snackBar，須要在模塊裏面引入



提交一條數據 成功了。




api的action寫上 formBody



修改頁面操做成功後來個跳轉


完活2019年6月1日12:54:20