zoukankan      html  css  js  c++  java
  • 篇章三:[AngularJS] 使用AngularCSS動態載入CSS

    前言

    上列兩篇文章裡,介紹了如何如何使用AngularAMD來動態載入Controller與Service。本篇文章以此為基礎,介紹如何使用AngularCSS來動態載入CSS,讓專案功能更加模組化,增加開發與維護的工作效率。主要為自己留個紀錄,也希望能幫助到有需要的開發人員。

    前言01

    安裝

    本篇文章以「使用AngularAMD動態載入Service」的範例程式為基礎,為其附加動態載入CSS的功能。進入本篇的開發步驟之前,開發人員可以先依照上一篇文章的步驟來建立基礎架構。

    動態載入Service範例:點此下載

    安裝01

    取得基礎架構之後,開啟命令提示字元CD到這個基礎架構的資料夾輸入下列指令,就可以使用bower來取得AngularCSS套件。

    bower install angular-css
    

    安裝02

    完成上列步驟後,開啟工作資料夾裡面的bower_components資料夾,可以發現加入了angular-css這個套件。

    安裝03

    掛載AngularCSS

    取得AngularCSS套件之後,接著就要將套件掛載到系統的Angular裡面。首先編輯工作資料夾內既有的app.js檔案,修改檔案中的require.js的設定參數,用來加入系統運行時AngularCSS的套件路徑、以及相依性。(相關require.js的使用介紹,可以參考:require.js的用法 - 阮一峰的网络日志)

    require.config({
        paths: {
    
            // ......
    
            // angularCSS
            "angularCSS": "bower_components/angular-css/angular-css"        
        },
        shim: {        
    
            // ......
    
            // angularCSS
            "angularCSS": ["angular"]
        }
    });
    

    修改完成require.js設定參數之後,在同一個app.js裡,修改下列require語法用來將AngularCSS加入專案的載入套件清單。(相關require語法的使用介紹,同樣可以參考:require.js的用法 - 阮一峰的网络日志)

    // bootstrap
    define(["angular", "angularAMD", "angular-ui-router", "angularCSS"], function (angular, angularAMD) {          
        // ......
    });
    

    接著在同一個require語法內,修改下列angular語法來啟動angularCSS套件。這邊要特別注意,angularCSS的module名稱是「"door3.css"」,要小心不要打錯了。(相關angular的使用介紹,建議參考:AngularJS 建置與執行 - Shyam Seshadri, Brad Green)

    // module
    var app = angular.module("app", ["ui.router", "door3.css"]);
    

    最後,同樣在require語法內,使用angularCSS語法所提供的css參數,來定義每個ui-router路由被啟動時所要動態載入的CSS檔案。(相關AngularCSS所提供的css參數定義,可以參考:AngularAMD:For States (UI Router) - Door3)

    // route
    $stateProvider
    
        // home
        .state("home", angularAMD.route({
            url: "/home",
            templateUrl: "home.html",
            controllerUrl: "home.js",
            css: "home.css"
        }))
    
        // home
        .state("about", angularAMD.route({
            url: "/about",
            templateUrl: "about.html",
            controllerUrl: "about.js",
            css: "about.css"
        }))
    ;           
    

    開發Template、CSS

    修改app.js用以掛載AngularCSS之後,就可以著手使用CSS語法,來建立系統裡每個路由所使用的CSS檔案。

    • home.css

      h1 { 
        color: blue; 
      }
      
    • about.css

      h1 { 
        color: red; 
      }
      

    開發01

    執行

    完成開發步驟後,就可以準備使用Chrome執行index.html來檢視成果。但是在檢視成果之前,必須要先參考下列資料開啟Chrome的必要功能,後續就使用Chrome來正常的執行index.html。

    執行index.html之後,會系統依照路由設定進入預設的Home頁面。而使用Chrome的開發者工具,可以看到系統加載了Home頁面的Template、Controller、CSS,並且顯示在頁面上。

    執行01

    點擊Home頁面的About按鈕,會切換到About頁面。這時同樣從Chrome的開發者工具中,可以看到系統是在點擊了About按鈕之後,才去加載About頁面的Template、Controller、Service、CSS來顯示在頁面上,這也就是AngularCSS所提供的動態載入CSS功能。

    執行02

    範例下載

    範例檔案:點此下載

  • 相关阅读:
    Find the Smallest K Elements in an Array
    Count of Smaller Number
    Number of Inversion Couple
    Delete False Elements
    Sort Array
    Tree Diameter
    Segment Tree Implementation
    Java Programming Mock Tests
    zz Morris Traversal方法遍历二叉树(非递归,不用栈,O(1)空间)
    Algorithm about SubArrays & SubStrings
  • 原文地址:https://www.cnblogs.com/qshting/p/5782814.html
Copyright © 2011-2022 走看看