angularjs + seajs構建Web Form前端(一)

時間 2019-11-11

標籤 angularjs seajs 構建 web form 前端欄目 AngularJS 简体版

原文原文鏈接

簡介css

　　Bootstrap是Twitter推出的一個用於前端開發的開源工具包，它由Twitter的設計師Mark Otto和Jacob Thornton合做開，是一個CSS/HTML框架。html

　　AngularJS是Google 開源出來的一套 js 工具，爲了克服HTML在構建應用上的不足而設計的，試圖成爲WEB應用中的一種端對端的解決方案，經過爲開發者呈現一個更高層次的抽象來簡化應用的開發，後面簡稱"ng"。前端

　　Seajs是一款優秀的模塊開發插件，能夠實現按需加載。git

　　Bootstrap有本身的一套js庫，可是爲了防止與AngularJS產生兼容性的問題，咱們不選擇使用，只是使用它的css而已，所以這裏我還要引入另一個基於Bootstrap與AngularJS的UI組件--UI-Bootstrap，雖然該庫提供的控件並很少，可是基本夠用，並且能夠參考它的代碼來本身實現複雜的控件(後面的文章再講)。angularjs

背景github

　　當前Web前端開發中，咱們已經能夠很熟練的使用jQuery在對數據交互的時候來操做關聯Dom的一些內容、樣式等狀態上的變化，然而不少的這些變化是代碼重複的，雖然它並不複雜，可是有些確實須要大量的代碼來進行操做；雖然jQuery爲咱們提供了大量的操做方式來減小複雜性，可是每次咱們都要從頁面中找尋一些相關的元素改變狀態是重複且難以免的，那麼怎麼樣才能從這種重複的操做中解脫呢？bootstrap

　　MVVM即可以讓咱們從這種重複的操做中解脫出來，簡單的說MVVM就是咱們將須要操做的元素與ViewModel進行綁定，當咱們對ViewModel進行操做致使其狀態發生變化的時候，與之相關的元素會自動發生變化。數組

　　因爲我也使用jQuery開發了較長的時間，雖然前幾年就已經有前端MVVM框架出現，卻沒有能讓我以爲比原始方式更簡單的，可是技術老是在發展的並趨向成熟，如今就能夠將以上提到的3種框架進行結合，大大簡化Web前端的開發(雖然須要一段時間的學習和適應)，接下來就讓咱們一塊兒來使用這3中框架進行開發吧(這裏我不會對各個庫有詳細的介紹，有些地方仍然須要本身去學習)。app

實現框架

　　首先咱們從登陸功能開始着手，登陸界面比較簡單，html代碼以下：

1 <body class="container" ng-app="login">
2     <form name="frmLogin" class="col-sm-offset-4 col-sm-4" role="form" ng-controller="HomeLoginController">
3         <input name="txtName" ng-model="name" type="text" class="form-control input-lg" placeholder="請輸入用戶名" required autofocus />
4         <input name="txtPwd" ng-model="pwd" type="password" class="form-control input-lg" placeholder="密碼" required />
5         <button class="btn-lg btn-primary btn-block" ng-click="submit()">登陸</button>
6         <alert ng-repeat="a in alerts" type="a.type" close="closeAlert($index)">{{a.msg}}</alert>
7     </form>
8 </body>

　　這裏不使用ngSubmit、ngShow、ngHide是由於有一些注意點須要講解，登陸的流程是當點擊登陸按鈕的時候，若是用戶名、密碼未填寫的狀況下，會在登陸按鈕下面增長2個Alert提醒框，js代碼以下：

angular.module('login', ['ui.bootstrap']);
function HomeLoginController($scope) {
    $scope.alerts = [];

    $scope.submit = function () {
        if ($scope.frmLogin.txtName.$invalid)
            $scope.alerts.push({ type: 'danger', msg: '用戶名不能爲空!' });
        if ($scope.frmLogin.txtPwd.$invalid)
            $scope.alerts.push({ type: 'danger', msg: '密碼不能爲空!' });

        if ($scope.alerts.length)
            return;

        $scope.alerts = [{ type: 'success', msg: '登陸成功' }];
    };

    $scope.closeAlert = function (index) {
        $scope.alerts.splice(index, 1);
    };
};

　　當用戶名密碼未填寫或者表單正確的狀況下，點擊提交按鈕的時候會出現如下2種狀況，如圖：

　　當咱們點擊X的時候(屢次點擊的時候會出現多個提示，別在乎這個小問題，^_^)，會調用closeAlert方法，並根據$index刪除alerts數組內對應的元素，這時候綁定的視圖就會自動刷新，不須要手動去操做這些元素，這裏要注意的主要有3個地方：一、ng-app="login"是不能缺乏的，除非你要手動啓動ng；二、開頭的angular.module('login', ['ui.bootstrap']);的意思是註冊login模塊且該模塊須要對ui-bootstrap的引用(不然沒法顯示alert的效果)；三、HomeLoginController方法的參數$scope是不能重命名成其餘名字，不然ng會報錯。

　　若是咱們想要讓彈出來的Alert本身消失怎麼辦呢？一開始的時候，你們可能會跟我同樣，會嘗試使用setTimeout函數去直接從$scope.alerts數組內將對應的元素移除掉，而後等待着視圖將Alert移除掉，可是最後會發現一點做用都沒有，由於視圖數據是在ng內部進行控制的，須要使用它提供的機制去處理，視圖纔會跟着數據發生變化，這裏須要使用$timeout去完成以上的操做，代碼改動以下：

//其餘代碼略

$scope.submit = function () {
    if ($scope.frmLogin.txtName.$invalid)
        addAlert({ type: 'danger', msg: '用戶名不能爲空!' });
    if ($scope.frmLogin.txtPwd.$invalid)
        addAlert({ type: 'danger', msg: '密碼不能爲空!' });

    if ($scope.alerts.length)
        return;

    addAlert({ type: 'success', msg: '登陸成功' });
};

function addAlert(alert) {
    $scope.alerts.push(alert);
    $timeout(function () {
        angular.forEach($scope.alerts, function (a, i) {
            if (alert != a)
                return;
            $scope.alerts.splice(i, 1);
        });
    }, 500);
};

　　寫到這裏已經把大體該出現的效果都作出來了，如今的問題是這個腳本是直接寫在頁面上的，那麼怎麼樣經過seajs來加載呢？這裏就須要用到angular的手動加載模式了，首先須要對html進行修改要先將ng-app給移除掉，否則ng會自動加載，因爲已經將腳本轉移到js文件內了，沒法找到HomeLoginController方法ng會拋出錯誤，使用seajs後的代碼以下：

    //頁面
    seajs.use('home-login');

    //腳本文件
    this.define(function (require, exports, module) {
        angular.module('home.login', ['ui.bootstrap']).controller('HomeLoginController', function ($scope, $timeout) {
            //本來HomeLoginController方法內的代碼，這裏就不重複貼出了
        });

        angular.bootstrap($('[name=frmLogin]'), ['home.login']);
    });

　　從代碼中能夠看到首先要註冊模塊home.login這個名字是能夠任意的，可是必須跟bootstrap內引用的模塊對應，而後咱們建立頁面上須要的Controller(名字同樣得對應)，並使用ng的bootstrap來手動啓動。

　　那麼第一篇結合bootstrap + angularjs + seajs就到這裏了，若是有任何錯誤請各位指出，謝謝，^_^!