angularjs指令详解

AngularJS 实现JavaScript 动画效果详解

AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。 我们能够在应用的部分内容当中使用动画来表明一些变化正在发生。在我上一篇文章当中,我讲到了在Angular应用中对CSS动画的支持。在这篇文章当中,我们会看到怎样利用JavaSc... »

AngularJS directive返回对象属性详解

写在前面:由于directive部分是angularjs中的重中之重,所以会分多篇章进行讲解。 »

详解AngularJS中ng-src指令的使用

前言 在日常开发工作中,有很多需求是在一个页面上显示一些图片。有时,图片的地址路径是由客户端的脚本来设置(它有可能是从数据库中获取的)。 这是Angularjs的时代,当我们想使用Angularjs来实现在页面中展示图片,我们会简单使用: <img src=”path of image”>. 如果我们只考虑展示,毫无疑问它没问题,但是在浏览器的控制台中会显示一个 404 (not fo... »

详解Angularjs中的依赖注入

一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖; 通过全局变量进行引用; 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的。比如: function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.greetName = function(name) { this.greeter.g... »

AngularJs 指令详解及示例代码

对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能。 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Bo... »

详解AngularJS控制器的使用

控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。 当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可。下面的例子展示了控制器初始化: function my Controller(... »

AngularJS 入门教程之事件处理器详解

现在我们来看看如何用AngularJS来实现它。同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时,这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。test/e2e/scenarios.js... describe;});你现在可以刷新你的浏览器,然后重新跑一遍端到端测试,或者你可以在AngularJS的服务器上运... »

详解JavaScript的AngularJS框架中的表达式与指令

“指令属性”就是绑定在DOM元素上的函数,它可以调用方法、定义行为、绑定controller及$scope对象、操作DOM,等等等等。 当浏览器启动、开始解析HTML(像平时一样)时,DOM元素上的指令属性就会跟其他属性一样被解析。 当一个Angular.js应用启动,Angular编译器就会遍历DOM树(从有ng-app指令属性的那个DOM元素开始,如我们在本系列第一篇里所提过的),解析HTML... »

AngularJS入门教程之链接与图片模板详解

这一步,你会为手机列表的手机添加缩略图以及一些链接,不过这些链接还不会起作用。接下来你会使用这些链接来分类显示手机的额外信息。 请重置工作目录: git checkout -f step-6 现在你应该能够看到列表里面手机的图片和链接了。 步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 数据 注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链... »

详解JavaScript的AngularJS框架中的作用域与数据绑定

针对以上所暴露的问题,AngularJS 用一系列指令来代替 jQuery 的事件绑定代码。为了能够组织好各类指令之间的协调工作而不出现数据混乱,AngularJS 在模型层上引申出作用域的概念,以配合控制器来实现对视图层的展现工作。作用域AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境。此外,还可以通过 AngularJS 提供的创建作用域的工厂方法来创建一个作用域。 »

AngularJS入门教程之迭代器过滤详解

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽。我们要加入全文检索功能(没错,这个真的非常简单!)。同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙。它监视着你的应用,并且在发生回归的时候迅速报告。 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框。注意到页面上的手机列表随着用户在搜索框中的输入而变化。 步骤2... »

AngularJS初始化静态模板详解

AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model、ng-click给动态添加的dom元素绑定数据和事件,怎么办? »

AngularJS 工作原理详解

个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去。在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些什么,做一个比较清楚详细的解析。正如下面一张图所示,交互过程主要由几个循环组成:AngularJS修改了一般的Javascript工作流,并且提供了它自己的事件处理机制。3. AngularJS将执行fn()函数,通常情况下,这个... »

AngularJS进行性能调优的7个建议

 AnglarJS作为一款优秀的Web框架,可大大简化前端开发的负担。近日Sebastian Fröstl在一篇博文《AngularJS Performance Tuning for Long Lists》中表示AnglarJS在处理包含复杂数据结构的大型列表时,其运行速度会非常慢。他在文中同时分享了解决方案。下面为该文的译文。   AnglarJS很棒,但当处理包含复杂数据结构的大型列... »

AngularJS 自定义指令详解及示例代码

自定义指令中使用AngularJS扩展HTML的功能。自定义指令使用的“指令”的功能定义。自定义指令只是替换了它被激活的元素。引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素。 AngularJS提供支持,以下列元素的类型来创建自定义指令。 Element directives R... »

详解AngularJS中module模块的导入导出

AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板,以及对常用工具的封装,例如$http、$cookies、$location等。 关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码。 在AngularJS实际项目中,我们可能需要把针对某... »

AngularJS HTML DOM详解及示例代码

以下指令可用于应用程序数据绑定到HTML DOM元素的属性。S.No. 名称 描述 1 ng-disabled 禁用一个给定的控制 2 ng-show 显示一个给定的控制 3 ng-hide 隐藏在给定的控制 4 ... »

AngularJS Module方法详解

AngularJS是什么? AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强。 何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/... »

AngularJS指令详解及示例代码

AngularJS指令用于扩展HTML。我们将讨论以下指令:ng-app - 该指令启动一个AngularJS应用。ng-model - 此指令定义的模型,该模型是变量在AngularJS使用。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。在下面的例子中,我们定义默认AngularJS应用使用div元素的ng-app 属性。List of Countries wit... »

AngularJS入门教程之ng-checked 指令详解

AngularJS ng-checked 指令 AngularJS 实例 选择一个或选择所有选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.j... »

AngularJS 单元测试(一)详解

AngularJS单元测试网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下。下面重点介绍一个单元测试的过程。加载一个模块AngularJS用module来包括应用不同的部分比如controllers,services, filters。ngMock模块能够注入服务service进入单元测试。ngMock暴露出angular.mock.module方法,缩写是mod... »

AngularJS ng-change 指令的详解及简单实例

AngularJS ng-change 指令AngularJS 实例当输入框的值改变时执行函数: 在输入框中输入一些信息: 输入框已经修改了 } 次。定义和用法ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。ng-change 指令需要搭配 ng-model 指令使用。AngularJS ng-change 指令指令不会覆盖原生的 onchange... »

AngularJs $parse、$eval和$observe、$watch详解

$parse和$eval $parse和$eval这两个函数都可以解析表达式的值. 它们的区别在于$parse是一个服务, 可以注入使用. $eval是scope对象上的一个方法, 我们只能在能访问scope的场景下使用它. var getter = $parse('user.name'); var setter = getter.assign; var context = {user: {nam... »

AngularJS ng-blur 指令详解及简单实例

AngularJS ng-blur 指令 AngularJS 实例 当输入框失去焦点(onblur)时执行表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angul... »

AngularJS中关于ng-class指令的几种实现方式详解

同理中的img元素中的src就不可以通过别的来改变,但是通过这种方式就是可以的!第三种:通过key/value 当lala为true的时候,class则为change3,个人认为这个是比较推荐的,可以弥补第二种方式的点点遗憾~总结我们如果在项目中可以灵活的运用这些指令会给我们带来非常多的便利,我们在解决问题的时候能有更多的思路,这样我们可以组合的使用这些指令来快速的解决一些比较苦恼的问题! »

Page 1 of 41234