简介

　　Bootstrap是Twitter推出的一个用于前端开发的开源工具包，它由Twitter的设计师Mark Otto和Jacob Thornton合作开，是一个CSS/HTML框架。

　　AngularJS是Google 开源出来的一套 js 工具，为了克服HTML在构建应用上的不足而设计的，试图成为WEB应用中的一种端对端的解决方案，通过为开发者呈现一个更高层次的抽象来简化应用的开发，后面简称"ng"。

　　Seajs是一款优秀的模块开发插件，可以实现按需加载。

　　Bootstrap有自己的一套js库，但是为了防止与AngularJS产生兼容性的问题，我们不选择使用，只是使用它的css而已，因此这里我还要引入另外一个基于Bootstrap与AngularJS的UI组件--UI-Bootstrap，虽然该库提供的控件并不多，但是基本够用，而且可以参考它的代码来自己实现复杂的控件(后面的文章再讲)。

背景

　　当前Web前端开发中，我们已经可以很熟练的使用jQuery在对数据交互的时候来操作关联Dom的一些内容、样式等状态上的变化，然而很多的这些变化是代码重复的，虽然它并不复杂，但是有些确实需要大量的代码来进行操作；虽然jQuery为我们提供了大量的操作方式来减少复杂性，但是每次我们都要从页面中找寻一些相关的元素改变状态是重复且难以避免的，那么怎么样才能从这种重复的操作中解脱呢？

　　MVVM便可以让我们从这种重复的操作中解脱出来，简单的说MVVM就是我们将需要操作的元素与ViewModel进行绑定，当我们对ViewModel进行操作导致其状态发生变化的时候，与之相关的元素会自动发生变化。

　　由于我也使用jQuery开发了较长的时间，虽然前几年就已经有前端MVVM框架出现，却没有能让我觉得比原始方式更简单的，但是技术总是在发展的并趋向成熟，现在就可以将以上提到的3种框架进行结合，大大简化Web前端的开发(虽然需要一段时间的学习和适应)，接下来就让我们一起来使用这3中框架进行开发吧(这里我不会对各个库有详细的介绍，有些地方仍然需要自己去学习)。

实现

　　首先我们从登录功能开始着手，登录界面比较简单，html代码如下：

 <body class="container" ng-app="login">

     <form name="frmLogin" class="col-sm-offset-4 col-sm-4" role="form" ng-controller="HomeLoginController">

         <input name="txtName" ng-model="name" type="text" class="form-control input-lg" placeholder="请输入用户名" required autofocus />

         <input name="txtPwd" ng-model="pwd" type="password" class="form-control input-lg" placeholder="密码" required />

         <button class="btn-lg btn-primary btn-block" ng-click="submit()">登录</button>

         <alert ng-repeat="a in alerts" type="a.type" close="closeAlert($index)">{{a.msg}}</alert>

     </form>

 </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个地方：1、ng-app="login"是不能缺少的，除非你要手动启动ng；2、开头的angular.module('login', ['ui.bootstrap']);的意思是注册login模块且该模块需要对ui-bootstrap的引用(否则无法显示alert的效果)；3、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就到这里了，如果有任何错误请各位指出，谢谢，^_^!

angularjs + seajs构建Web Form前端(一)的更多相关文章

  1. bootstrap + angularjs + seajs构建Web Form前端2

    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...

  2. bootstrap + angularjs + seajs构建Web Form前端(1)

    bootstrap + angularjs + seajs构建Web Form前端(一) 简介 Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark ...

  3. angularjs + seajs构建Web Form前端(二)

    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...

  4. angularjs + seajs构建Web Form前端(三) -- 兼容easyui

    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...

  5. angularjs + seajs构建Web Form3

    angularjs + seajs构建Web Form前端(三) -- 兼容easyui 回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使 ...

  6. seajs构建web申请书

    随着开发项目的不断扩大,查找代码依赖关系复杂化,维护比较沉闷.记seajs有这种效果方面.果断尝鲜.解决两个问题:1)命名冲突 2)文件相关性 因为所在BG使用TAF服务,基于C++开发一套WSP w ...

  7. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  8. [web建站] 极客WEB大前端专家级开发工程师培训视频教程

    极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...

  9. AngularJS从构建项目开始

    AngularJS从构建项目开始 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框 ...

随机推荐

  1. paip. 调试技术打印堆栈 uapi print stack java php python 总结.

    paip. 调试技术打印堆栈 uapi print stack java php python 总结. 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attil ...

  2. CentOS 6.5 无网环境安装R及Rstudio的方法的方法

    在生产环节,一般是不联网的,下面介绍在无望环境如何安装R及R-studio 1.  安装CentOS for R语言的基础环境 1.1 libpng,X11,libjpeg等支持 yum -y ins ...

  3. FIR.im Weekly － 上周微博热转资源精选

    LeakCanary: 让内存泄露无所遁形 Square 开源的 LeakCanary,国内开发者 @廖祜秋liaohuqiu 翻译了对应的官方博客,撰写了中文使用说明文档,同时还写了一个小 Demo ...

  4. win10 体验

    最近听说win10出了正式版,微软貌似在win10上投入了很大的期望,不知道到底怎么样,实践出真知,小编今天就亲自体验一下! 其实很多人对win8不满意,主要是因为win8 的兼容性不尽人意,小编的电 ...

  5. mysql忘记密码重置（mac）

    setp1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) step2:进入终端输入:cd /usr/local/ ...

  6. 《Windows核心编程》学习笔记（9）– 在win7或者vista系统下提升一个进程的运行权限

    win7或者vista默认运行程序是在受限制的环境下运行的,以减轻病毒对于系统的破坏.那么我们怎样才能提升一个进程的权限以至让它在 管理员模式下运行.当然CreateProcess函数没有提供这个功能 ...

  7. 使用Facebook的SDK判斷來訪者是否已經按讃并成為本站粉絲團的成員

    今天公司裡要做活動,其中有一項活動內容是要求來訪者按一下facebook粉絲團的讃,按了讃之後贈送現金.Facebook被墻大家眾所周知,在百度搜了一下發現因為被墻的原因導致國內涉及到Facebook ...

  8. pip 豆瓣镜像使用

    pip install -i https://pypi.douban.com/simple/ flask 要用https的 https://pip.pypa.io/en/latest/user_gui ...

  9. GitHub前50名的Objective-C动画相关库

    GitHub的Objective-C的动画UI库其实是最多的一部分,GitHub有相当一部分的动画大牛,如Jonathan George,Nick Lockwood,Kevin,Roman Efimo ...

  10. Android文本输入框(EditText)切换密码的显示与隐藏

    package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; ...