AngularJS是Google研发的一款优秀的前端JS框架,是为了克服HTML在构建应用上动态性不足而设计的,现已经被用于Google的多款产品当中。
通常,我们使用以下方法来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。通过在自己的核心代码中调用类库的方法,实现某种功能,例如:jQuery等。
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要套用该框架并对它进行具体的逻辑填充即可。这里框架是起主导作用的,由它来根据具体的应用逻辑调用你的代码。框架有:knockout、sproutcore等。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。AngularJS最为核心的特性就是:MVC、自动化双向数据绑定、模块化、路由、语义化标签等等。
1、AngularJS MVC
MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式。
AngularJS程序的MVC分为3部分:模板(View),表现层逻辑(Controller),数据(Model)。
1)模板:
是我们用HTML、CSS写的UI视图代码,其中包含AngularJS的指令、表达式,这些指令、表达式帮助你映射model到view的内容。
AnjularJS的机制就是:HTML模板被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指令。所有的指令都负责针对view来设置数据绑定。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。AngularJS的指令后面将会再详细做一介绍。
说到AngularJS编译机制就不得不说一下DOM。DOM文件对象模型(Document Object Model),是w3c组织推荐的处理可扩展标志语言的标准编程接口。要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型DOM来获得的。
2)表现层逻辑(控制器):
包括应用程序逻辑和行为。用javascript定义,作为视图控制器逻辑。在控制器中我们无需添加对于DOM级的事件监听,这些在AngularJS中已经内置了。在UI节点DOM事件发生后(例如点击button事件),AngularJS会自动转到scope上的某个行为(Action)逻辑上(即自动通过内置DOM进行事件获取,然后找到对应的scope范围,进行JS函数逻辑应用)。
3)数据:
视图对象(viewobject)需要被AngularJS Scope引用,可以是任何类型的javascript对象、数组、基本类型对象。并且AngularJS会自动异步更新模型,即在UI发生改变时它会自动刷新模型(mode),反之在模型发生改变的时候也会自动刷新UI。在这里我们不需要定义形如getter,setter的一系列方法。AngularJS可以通过双向数据绑定自动从拥有JavaScript对象(模型)的UI(视图)中同步数据。
2、自动化双向数据绑定
<input class="inputheight" ng-model="activity_name" type="search"> <button class=" btn btn-primary btn-lg btn-block" ng-click="create_Activity()" ng-disabled="!activity_name">
双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。在这里使用指令ng-model创建了一个数据模型"activity_name",并与所在的标签“input”双向绑定,无论什么时候界面输入的值发生变化,所对应的数据模型也发生了改变(比如$scope.activity_name的值会跟着输入的数据而改变)。反之,使用"activity_name"属性作为ng-disabled的属性值,当$scope.activity_name的值改变时(有值没值),就会以button是否可点表现在界面UI 上。
3、路由机制
ng的路由机制是靠ngRoute提供的,通过hash和history两种方式实现了路由,可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块,每一个使用的模块都要进行引用,下面的应用引用了6个模块。形式如下:
angular .module('yoDemoApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch' ])
路由模块包含以下内容:
服务$routeProvider用来定义一个路由表,即地址栏与视图模板的映射
.config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/activity_list.html', controller: 'activity_listCtrl' }) });
服务$routeParams保存了地址栏中的参数,例如{id : 1, name : 'tom'}
服务$route完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller
指令ngView用来在主视图中指定加载子视图的区域
在index.html中使用
<div ng-view=""></div>
来加载。以上内容再加上$location服务,我们就可以实现一个单页面应用了。
具体跳转机制:
1)引入文件和依赖
<script src="http://code.angularjs.org/1.2.5/angular.min.js"></script> <script src="http://code.angularjs.org/1.2.5/angular-route.min.js"></script>
并在模块中声明中注入对ngRoute的依赖
angular .module('yoDemoApp', [ 'ngRoute' ])
2)定义路由表
$routeProvider提供了定义路由表的服务,它有两个核心方法,when(path,route)和otherwise(params),
.config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/activity_list.html', controller: 'activity_listCtrl' }) });
3)整个路由查找过程
我们通过$location.path页面跳转方法将跳转的路径跟路由表中的进行匹配,比如匹配“/“,找到对应的‘/’,在当前模板上执行的controller函数,生成新的scope,而templateUrl这一部分就会被ng-view所引用,我们的子视图将会在此处被引入跳转进来。otherwise(params)方法对应路径匹配不到时的情况,这时候我们可以配置一个redirectTo参数,让它重定向到404页面或者是首页。
.otherwise({ redirectTo: '/' });
4、AngularJS指令属性和标记
“ 指令属性”就是绑定在DOM元素上的函数,它可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等。当浏览器启动、开始解析HTML(像平时一样)时,DOM元素上的指令属性就会跟其他属性一样被解析。当一个Angular.js应用启动,Angular编译器就会遍历DOM树(从有ng-app指令属性的那个DOM元素开始),解析HTML,寻找这些指令属性函数。
1)ng-model指令属性
ng-model指令属性被用来将DOM的属性值与Controller里的$scope model绑定起来。具体的实现过程,是在这个值上绑定了一个$watch函数(类似JavaScript里的事件监听函数)。$watch函数(在使用时)运行在Angular.js的事件循环(即$digest循环)里,让Angular.js能够对DOM进行相应的更新。
2){{ 表达式 }}标记
这个双大括号指令属性,使用$watch()函数,给括号内的表达式注册了一个监听器。正是这个$watch函数,让Angular.js能够实时自动更新view。
3)ng-show / ng-hide
ng-show和ng-hide指令,根据赋予它们的表达式的值的真假性(truthy),来显示和隐藏它们所属的那一部分DOM。
4)ng-app
ng-app声明了Angular管理的边界,只需查找对应的ng-app所在的标签。获得Angular管理的范围。
5)ng-repeat
在第一张卡小结时就介绍过ng-repeat,这里再进行一下说明。在自己的scope中定义一个数组(model)来储存数据,然后使用 ng-repeat 将它与 DOM 绑定,进行遍历,实现列表。
相关推荐
它是一套JavaScript前端框架,用于开发当下流行的数据驱动的单页面Web应用。其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,...
AngularJS,一个于2009年由Misko Hevery等开发者创建的前端JavaScript框架,后来被谷歌收购,并广泛应用于谷歌的多种产品中。AngularJS以其强大的功能和易用性著称,在前端开发领域占据着重要的地位。 ##### 关键...
"angularjs-dropdown-multiselect"是一个专门用于创建下拉多选框的AngularJS指令,它使得在Web应用中实现多选下拉菜单变得极其简单。该指令集成了基本的多选、搜索过滤、分组等功能,极大地提高了用户体验。其主要...
AngularJS Slider是一款专为前端开发者设计的组件,它基于流行的JavaScript框架AngularJS构建,用于实现动态、交互式的滑动条功能。这个项目旨在提供一个独立、轻量级且移动友好的解决方案,无需依赖任何外部库,如...
**WEB前端框架API详解** 在当今的Web开发领域,前端框架扮演着至关重要的角色,它们为开发者提供了便捷的工具和方法,以构建响应式、高性能的用户界面。本篇文章将深入探讨几个主流的前端框架——CSS、jQuery、HTML...
AngularJS是一个流行的JavaScript框架,它提供了一种模块化、可维护的方式来构建动态的Web应用。而PDF.js是Mozilla开发的一个开源库,专门用于在浏览器中渲染PDF文档,无需依赖任何插件。 首先,让我们了解...
AngularJS(通常指的是AngularJS 1.x版本)是一个由Google维护的前端JavaScript框架,用于构建单页应用程序(SPA)。AngularJS通过双向数据绑定、依赖注入、指令系统等功能,简化了前端开发,使开发者能够更高效地...
AngularJS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合...
AngularJS是Google开发的一款前端JavaScript框架,用于构建交互式的单页应用(SPA)。而Node.js则是一个基于Chrome V8引擎的JavaScript运行环境,常用于后端开发,构建可扩展的网络应用。 **AngularJS**: 1. **...
AngularJS是由Google维护的一个开源JavaScript框架,主要用于构建单页应用程序(SPA)。它采用MVC(Model-View-Controller)架构模式,通过双向数据绑定简化了前端开发,允许视图和模型之间的数据自动同步。 NVD3则...
AngularJS是谷歌开发的一个开源前端JavaScript框架,主要用于增强基于HTML的Web应用的开发。这本书详细介绍了AngularJS的核心概念、基础知识以及如何利用这个框架构建动态和交互性强的Web应用。 知识点覆盖了...
AngularJS 是一个强大的前端JavaScript框架,由Google维护,主要用于构建单页Web应用程序(SPA)。它引入了MVC(模型-视图-控制器)架构模式,极大地简化了动态Web页面的开发。在“angularjs Web页面框架 v13.3.0”...
AngularJS,由Google维护的JavaScript框架,用于构建单页应用程序(SPA)。它扩展了HTML,使页面能够包含动态数据绑定和声明性组件。AngularJS的核心特性包括: 1. **双向数据绑定**:AngularJS使得模型与视图之间...
AngularJS是一款由Google维护的MVC(Model-View-Controller)框架,它用于构建动态、交互式的Web应用。Toastr则是一个独立的通知库,它提供了多种样式和配置选项,可以在不打断用户工作流程的情况下,优雅地显示消息...
最后,Bootstrap是由Twitter开发的一款流行的前端开发框架,它提供了一套响应式布局、移动设备优先的Web开发解决方案。Bootstrap包含了CSS样式、JavaScript插件和可重用的HTML组件,如网格系统、表单、按钮、导航、...
在前端开发领域,jQuery、AngularJS和Bootstrap是三个极为重要的技术框架,它们分别在不同的层面上解决了网页开发中的各种问题,极大地提高了开发效率和用户体验。接下来,我们将详细探讨这三个技术的核心概念、应用...
WebAPI是ASP.NET框架的一部分,主要用于构建RESTful服务,而AngularJS则是一个强大的前端JavaScript框架,用于构建动态单页应用程序(SPA)。结合这两者,我们可以创建一个高效且用户友好的附件上传系统。 首先,让...
AngularJS是一种开源的JavaScript框架,用于开发动态Web应用程序。它由Google维护,并且是目前流行的前端开发工具之一。 书名中的“Mastering”表示这本书提供的是高级和深入的知识,目标读者是已经对Web开发有一定...