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就到这里了，若是有任何错误请各位指出，谢谢，^_^!