AngularJS入门知识之MVW类框架的编程思想探讨

本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想。

这个需求很常见,比如,一个两级菜单,在第一级别菜单项点击时候,对应的子菜单项目应该显示或隐藏。

jQuery的实现:

代码如下:

<!-- html -->
<ul class="parent">
    <li class="parent_item">
        Item 1
        <ul class="child">
            <li class="child_item">Item child 1</li>
        </ul>
    </li>
</ul>

// javascript
$('li.parent_item').click(function(){
    $(this).children('ul.child').toggle();
})

AngularJS的实现:

代码如下:

<!-- html -->
<ul>
    <li ng-click="hide_child = !hide_child">
        Item 1
        <ul ng-hide="hide_child">
            <li>Item child 1</li>
        </ul>
    </li>
</ul>

传统操作DOM的方式,不再赘述。AngularJS的实现,相对代码要精炼很多,只有HTML的版本即可。以上代码,用到了AngularJS这些知识点:

1.Directives

2.Expressions

ng-clickng-hide都是框架自带的Directives(指令),前者相当于给li标签提供了一个Event Handler,在该HTML元素(li)被点击的时候,会执行hide_child = !hide_child这个Expression(表达式)。我们先看一下ng-hide这个指令,它会根据赋值的表达式结果(布尔值)来控制该HTML元素是否要显示(通过CSS实现)。也就是说,如果hide_child这个变量如果是true,那么ul就会被隐藏,否则结果相反。

这里hide_child其实是$scope上的一个变量,对它的值的变更,也可以用controller控制器包装一个方法来实现,只不过现在的语句比较简单,直接写在了指令的赋值里面。

通过以上简单的代码分析,我们可以看到AngularJS两个比较明显的特点:

1.通过指令和表达式对DOM的操作进行了封转,只需简单的代码便可省去额外的JavaScript代码
2.指令和表达式的应用,只直接嵌套在HTML中的,这和jQuery推从的Unobtrusive JavaScript的代码风格有些背道而驰

我们先看另外一个需求,再详细解释上面的结论。

需求2:通过点击div,触发选择form中的一个radio button
传统的HTML Form元素,在如今的移动设备上,操作起来并不是十分友好。比如,Radio button单选框,在触摸屏上,需要精确的位置定位,才能控制好这个组件,但是手指定位又很粗糙。常见的做法,是添加一个对应的Label控件,但是文字本身占屏比例也并不理想,而且也不具备明确的信息传达效果。所以,通常会间接操作一个区域比较大的div或者li标签。

jQuery的实现:

代码如下:

<!-- html -->
<ul>
    <li class="selection">
        <input type="radio"
            id="option1" />
        <label for="option1">option 1</label>
    </li>
</ul>

// javascript
$('li.selection').click(function(){
    $(this).children('input[type="radio"]').click();
})

AngularJS的实现:

代码如下:

<!-- html -->
<ul>
    <li ng-repeat="option in options"
        ng-click="model.option = option.value"
        ng-class="{active: model.option == option.value}" >
        <input type="radio"
            ng-model="model.option"
            value="{{option.value}}"
            id="option1" />
        <label for="option1">option 1</label>
    </li>
</ul>

在这个解决方案中,我们同样没有涉及到额外的JavaScript代码,并且多用了几个指令。为了对比参照,我们只关心ng-click和ng-model这两个指令的表达式。

我们先看一下input这个元素的ng-model指令,这里赋值的意思是,我们把模板上的input和$scope.model对象的option属性进行了关联,深入了解数据绑定可以参考Data Binding。这种指定关联,使得模板控件直接和数据Model进行了绑定,并且这种绑定是双向的。意味着,一旦用户修改控件中的值(勾选radio input),对应的Model对象就会重新赋值(model.option);同时,如果Model对象的值发生了变化,模板中的input控件也会对应反映变化。而这点,在上述jQuery的实现中,其实是没有做到的。

所以,这里通过AngularJS的数据绑定,点击li元素间接完成触发input的流程是这样子的:

1.点击li标签,给model.option赋值;
2.修改了Model对象,定位到对应input控件(value的值为model.option那个);
3.激活input控件的checked属性

通过以上两个案例,我们对Web前端的操作有了新的认识。

首先,技术实现上,通过引入新的指令,表达式,数据绑定等概念,我们可以完全新的方式去操作DOM,而不仅仅局限在用户和HTML组件交互操作上的JavaScript代码的实现。这种思想的变化是巨大的。

从本世纪初,动态Web编程的兴起开始,服务器端的编程技术一直在改进。从一开始的CGI/PHP/ASP,由语言和平台产生了.NET vs. Java,开发效率和软件过程促进了MVC框架/ORM/AOP等,性能和大数据带来了NodeJS/NoSQL/Hadoop等,而浏览器前端的技术需求似乎没有那么激进过。一方面,通过服务器端和数据库,大部分B/S模型的业务需求都能满足;再者,浏览器本身存在不同平台的差异性,对脚本语言和渲染技术的标准不兼容,以及运算能力的欠缺和安全性的考虑。

在这种情况下,浏览器端的需求,大部分时候只需要考虑渲染页面和简单的用户交互。HTML/DOM加上JavaSript/CSS就这样成就了前端的主要工作。所以,以前是没有前端工作师,只需要Web设计师的。慢慢对前端的要求多起来,jQuery成为使用程度最高的一个JavaScript操作DOM的封装库。而在这个阶段,jQuery/JavaScript的主要任务,仍然只是作为面向用户浏览器终端呈现和交互的工具。

理解了jQuery的起源,我们不难发现,以前追求的一些规则,譬如Unobtrusive JavaScript,当时局限于实现的手段和方式,为了分离DOM和JavaScript代码逻辑,我们优先选择了维护性更高的方式。前端对JavaScript的需求加大之后,出现了很多MVC/MVP的前端框架,以及AngularJS所谓的MVW(Model-View-Whatever),JavaScript和DOM一刀切的方式发生了变化。原先我们考虑界面显示和用户交互的直接操作,现在我们有了客户端的数据绑定,丰富的指令,依赖注入,等待我们的将是全新的编程模型和思维方式。

时间: 2014-12-05

AngularJS快速入门

怎么样快速了解AngularJS? 相信很多初学者都有过或者类似的疑问,其实这个问题没有标准的答案,每个人的技术背景.工作经验等等都不经相同,所以学习AngularJS的切入点肯定也就不同,我之前初略使用过knockoutjs,当我第一眼看到AngularJS的Helloworld案例后,顿时就被声明式的语法和强大的双向绑定特性所吸引. 其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性,下面我就从几个例子一步一步的讲解AngularJS吸引人的东西并且实

Angular开发者指南之入门介绍

什么是Angular AngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程序的组件.AngularJS的数据绑定和依赖注入消除了许多你不得不编写的代码.这一切都发生在浏览器中,使其成为任何服务器技术的理想合作伙伴. 动态应用程序和静态文档之间的动态适配常常通过以下方式解决 一个库:一组在编写网络应用程序时非常有用的函数.你的代码是负责在它调用库中它认为合适的. 例如jQuery 框架:Web应用程序的特定实现,其

AngularJS 2.0入门权威指南

学习 Angular 2 当越来越多的 web app 使用 Angular 1构建的时候,更快更强大的 Angular 2 将会很快成为新的标准. Angular的新约定使得它更容易去学习.更快的去开发 app.通过本教程学习更快速.更强大的 Angular 版本. Angular 一个跨移动和桌面的框架 快速开始 本指南指导你如何构建一个简单 Angular app. 可以使用typescript/ JavaScript / Dart任意一种语言来编写Angular app,本教程采用Jav

AngularJS入门(用ng-repeat指令实现循环输出

循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

angularJS 入门基础

angular 所有用到的库, 全部用的CDN: 复制代码 代码如下: <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>     <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>     <link h

Angularjs 基础入门

针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写,所以这里我就按照一种简单的思路开始写 1.angular.element 2.angular.Bootstrap 我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤 1.angular会在document load的时候自动初始化,首先会找到ng-app这个指令指定的节点. 2.加载与module相关的指令 3.创建与应用相关的injector(依赖管理器) 4.以制定的ng-app为根节

AngularJS入门心得之directive和controller通信过程

AngularJS 通过新的属性和表达式扩展了 HTML.Angularjs学习起来也非常的简单. 1.AngularJS是何方神圣 Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.这里AngularJS就应运而生

AngularJS入门教程之学习环境搭建

学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

AngularJs 60分钟入门基础教程

AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了

AngularJS入门教程(二):AngularJS模板

是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: 复制代码 代码如下: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.你可以到GitHub去

AngularJS入门教程二:在路由中传递参数的方法分析

本文实例讲述了AngularJS在路由中传递参数的方法.分享给大家供大家参考,具体如下: 我们不仅可以在控制器中直接定义属性的值,比如: app.controller('listController',function($scope){ $scope.name="ROSE"; }); AngularJS还提供了传递参数的功能,目前我接触到的一种方式是从视图中传参: <!--首页html--> <li><a href="#/user/18"

AngularJS入门教程之静态模板详解

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html <ul> <li> <span>

AngularJS入门教程之更多模板详解

在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 请重置工作目录: git checkout -f step-8 现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来. 为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板. 步骤7和步骤8之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据 除了phones.json,app/phones/目录也包

AngularJS入门教程之AngularJS模型

相关阅读: AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令 在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与AngularJS创建的变量绑定. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.

AngularJS入门教程之AngularJS表达式

表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串.数字.运算符和变量 数字运算{{1 + 5}} 字符串连接{{ 'abc' + 'bcd' }} 变量运算 {{ firstName + " " + lastName }}

AngularJS入门教程之AngularJS指令

熟悉HTML的朋友都知道,HTML有很多属性.比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型.AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能. AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: 常用AngularJS指令 ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng

零基础易语言入门教程(二)之编程思路

易语言简介: 易语言是一门以中文作为程序代码编程语言.以"易"著称.创始人为吴涛.早期版本的名字为E语言.易语言最早的版本的发布可追溯至2000年9月11日.创造易语言的初衷是进行用中文来编写程序的实践.从2000年至今,易语言已经发展到一定的规模,功能上.用户数量上都十分可观. 上一篇跟大家讲了零基础易语言入门教程(一)编写第一个程序,然后接下来大家应该自己把支持库和易语言组件里面的控件全部认真的看一下,下面我直接跟大家分享下易语言简单编程思路. 方法和步骤如下所示: 1.易语言程序

Bootstrap零基础入门教程(二)

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

BootStrap入门教程(二)之固定的内置样式

相关阅读: BootStrap入门教程(一)之可视化布局 HTML5文档类型(Doctype) Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用HTML5文档类型. <!DOCTYPE html> <html> .... </html> 移动设备优先 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 宽度设置

AngularJS入门教程之路由机制ngRoute实例分析

本文实例讲述了AngularJS路由机制ngRoute.分享给大家供大家参考,具体如下: 引言 在我们介绍路由之前我们首先谈一下SPA,所以SPA就是我们现在经常说的单页应用single page APP,为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中,但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效,为了解决这个问题我们通常使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过