AngularJs2 設置懶加載（惰性加載）以及調用API接口的說明

 

前言

 創建項目命令： ng new 項目名字

 啓動項目：ng serve --port 4202   不設置端口號默認爲4200

 

1. 安裝插件和目錄結構
   1. 安裝插件
      1. npm install -D @types/jquery
      2. npm install ng2-bootstrap bootstrap –save
      3. npm install jquery
   2. 引用插件的js 

打開angular.json  找到”styles”和”scripts”兩個標籤添加引用  【注意有兩個位置】

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/assets/webuploader/webuploader.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js",
  "src/assets/webuploader/webuploader.min.js"
]

 

1. 1. 目錄結構說明
      1. 圖示爲目錄文件結構

1. 1. 1. 各個文件目錄的說明和用途

  app/app-routing.module.ts  -- 系統默認路由

  app/home/home-routing.module.ts  --home子模塊的路由

  app/home/index  --爲home模塊下的子模塊也頁面

  app/interface/request/***  --接口請求時發送的內容結構

  app/interface/response/***  --調用接口返回成功後的內容結構

  app/service/pubutilservice.service.ts   --公共定義的服務【存儲獲取刪除本地信息】

  app/service/httpservice.service.ts   --封裝了HttpClient的Get和POST請求並加以簽名

  app/service/apiservice/***/***controller.service.ts  --此項是定義了請求接口的路徑信息【配合接口使用】

1. 創建一個模塊

2.1 創建路由Module

      2.1.1 命令創建

     //***爲模塊名，如1.3.2中的home-routing.module.ts

      ng generate module *** --routing   

              2.1.2 自動創建

              在app文件夾上右鍵è新建èAngularJs Schematic ，選擇 module，在文本框中輸入*** --routing

              2.2創建模塊

                   2.2.1 命令創建 

                   //***爲模塊名，****爲子模塊名

                   ng generate component ***/****

            2.22自動創建

      在app文件夾上右鍵è新建èAngularJs Schematic ，選擇 component，在文本框中輸入 ***/****

 

 

 

最後展示：

 

1. 創建一個接口調用

3.1 創建API的目錄Controller服務。

 

3.2 Controller代碼

 3.2.1、定義當前Controller的所有接口名              
ConfigUrl = {
  RegUser: 'users/reguser',
  UserLogin: 'users/userlogin'
};

3.2.2、編寫接口調用函數，命名規則爲，接口目錄+接口名稱 如 users/reguser  = usersreguser

/**

 * 用戶註冊

 * @param userreg 提交內容

 * @param callfn 返回函數

 * @param errfn 錯誤返回函數

 */

public userreguser(userreg: UserReg, callfn: any, errfn?: any) {

  this.httpservice.Post(this.ConfigUrl.RegUser, userreg, callfn, errfn);

}

3.2.3 完整代碼

3.3 模塊調用接口

 3.1引用接口服務初始化

        constructor(public user: UserscontrollerService) {}

  3.2調用接口並處理數據

    ngOnInit() {

      const userlogin: UserLogin = { userName: 'sa', userPassWord: 'Aa123456', loginFrom: 1  };

      this.user.useruserlogin(userlogin, (data) => {

      const usersesson: UserLoginSesson = data;

      console.log(usersesson.token);

      }, (errdata) => { });}

   說明： data 爲接收正常數據時進行的處理，errdata爲當發生異常是返回的數據（可以爲null）

  3.3完整代碼

1. 路由和子路由配置

4.1主路由配置

4.2子路由配置

4.2.3訪問路徑說明

  1．默認的只需要訪問模塊名即可 如 http://localhost:****/home

  2. 子路由用配置了頁面的需要  http://localhost:****/home/login