angluar_記慘痛的教訓

1) 模塊沒有任何異常,也沒有錯誤,但是內容顯示不出來
2) 統一引入css
3) 引入第三方模塊
4) 注入服務

本着學習的興趣, 使用IDEA 打開了 angluar 項目, 可是項目在啓動的時候 跟着官網過了一遍新手教程 官網: https://angular.cn/docs

1) 模塊沒有任何異常,也沒有錯誤,但是內容顯示不出來

第一此創建項目之後 , 模仿着項目中已有的 app.xxxxxx 系列進行dome練習,但是 最後還是卡死. 自己寫的組件功能爲 頁面輸出"123",但是123死活出不來
因爲在 app.module.ts 文件中 我只在 declarations 下加入了當前組件,並沒有在 bootstrap下加載當前組件 且在index中 的標籤 app-root 必須存在

在這裏插入圖片描述

在這裏插入圖片描述

2) 統一引入css

在工程中的styles.css 文件
位於:
在這裏插入圖片描述
且文件中有註釋:
You can add global styles to this file, and also import other style files
你可以在這個文件中添加全局樣式 並且你還可以 導入其他css樣式文件

3) 引入第三方模塊

在使用第三方模塊的時候, 例如我在項目中使用到了 angularjs-datetime-picker 日期插件,使用cnpm安裝下來之後 卻是無法直接使用的.
需要經過配置方可使用
於是按照網絡上的教程引入第三方庫

  1. 使用cnpm下載 cnpm install angularjs-datetime-picker --save
  2. 將其css文件使用style.css 加載
  3. 將js 文件 在 .angular-cli.json 腳手架文件中的 “scripts”:["…/xx/xx.js"] 中加載
    以上 我似乎可以在 js 文件中 import 進來, 但是 與我來說然並卵.
    參考了一下文章之後
    https://blog.csdn.net/nb_token/article/details/78337413
    https://www.jianshu.com/p/b25f39af793c
    https://www.php.cn/js-tutorial-400633.html

最後果斷放棄,選擇在 index 頁面上使用 script 標籤引入, 當然最後還是失敗了, 因爲在將樣式等js and css文件引入之後 並沒有效果出來, 出於時間考慮只能放棄換成了 比較常用的 laydate
laydate的配置文章 https://www.jianshu.com/p/573c9b135505

4) 注入服務

連接後臺的的時候,我將連接後臺的代碼抽出 成 一個 xxx.serivce.ts 文件
由於我使用的是 angluar4 所以在 xxx.serivce.ts 文件裏的 export class XXX 上面 使用了 @Injectable() 註解, 然後在 app.module 裏面將當前服務添加進去. 然後在需要使用當前服務的ts文件中 導入就可以使用了
在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章