AngularJS
文章平均质量分 85
wjxbj
这个作者很懒,什么都没留下…
展开
-
通过angularjs的ng-repeat指令看scope的继承关系
ng-repeat指令的使用方式可以参考如下代码:<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>ng-repeat</title> <script sr原创 2015-06-21 11:57:48 · 149 阅读 · 0 评论 -
获取焦点ng-focus实例
test.html<html><head> <title>获取焦点ng-focus实例</title></head><body ng-controller="Controller"> <h1>获取焦点ng-focus实例</h1> &am原创 2015-09-21 22:42:27 · 511 阅读 · 0 评论 -
输入框之间的控制实例
两个输入框,任一输入框的值改变时,另一个输入框变成只读。一.watch实现test.html<html ng-app='myApp'><head> <title>Watch实例</title></head><body ng-controller='Controller'> <h1>原创 2015-09-21 22:50:48 · 126 阅读 · 0 评论 -
angular.copy用法实例
angular.copy(a,b):将对象a深度拷贝至对象b,并返回对象b,完全拷贝所有数据,优点是b与a不会相互依赖(a,b完全脱离关联)。 实例一:var r = angular.copy(a, b);将对象a中的属性深度拷贝给b对象,并返回b对象,即b、r引用的是同一个对象var a = { name : 'bijian', address ...2015-11-13 20:09:12 · 602 阅读 · 0 评论 -
angular.extend用法实例
angular.extend:依次将第二个参数及后续的参数的第一层属性(不管是简单属性还是对象)拷贝赋给第一个参数的第一层属性,即如果是对象,则是引用的是同一个对象,并返回第一个参数对象。 实例一:var r = angular.extend(b, a);将对象a的第一层属性(不管是简单属性还是对象)拷贝赋给对象b的第一层属性,即如果是对象,则是引用的是同一个...2015-11-13 20:28:05 · 274 阅读 · 0 评论 -
浅谈AngularJS模板
作为最流行的MVVM(Model-View-View-Model)框架之一,相信大部分前端对AngularJS都不会陌生,我也一样久仰大名。不得不说,AngularJS所带来的改变是巨大的,被称为未来浏览器的模式一点也不为过,尤其是思维上的转变。 作为一个常年挥舞着jQuery去指挥无穷无尽的DOM的前端,初次接触AngularJS是有困难的,许多先贤警告我们...原创 2015-11-18 20:11:58 · 111 阅读 · 0 评论 -
angular模板加载——ng-template
Angularjs作为mvc(或者说mvvm)框架,同样具备模板这一基本概念。NG加载模板的顺序为:内存加载,AJAX加载。一.内存加载 如果之前使用过Bootstrap 插件的ng版,即angular-ui,就会了解到这种方式的具体应用。模板本质上是字符串,把字符串直接写入内存,加载时直接从内存获取,速度会更快,有两种方式显式启用内存加载。1.通过使...原创 2015-11-18 20:48:30 · 1000 阅读 · 0 评论 -
Angularjs标签模板加载原理
一.前言 Angularjs提供多种模板加载方案。1.最基础的为通过预先声明路径的方式,通过Ajax获取。2.使用诸如gulp-html2js构建工具,将HTML模板转化为js文件使用。3.使用script标签引入。 一般实际情况下,开发时使用第一种方式,部署时采取第二种方式,不会采用第三种方式。本文简要说明一下标签引入模板。Angularjs本身...原创 2015-11-18 21:24:44 · 219 阅读 · 0 评论 -
angular-ngSanitize模块-$sanitize服务详解
本篇主要讲解angular中的$sanitize这个服务,此服务依赖于ngSanitize模块,要学习这个服务,先要了解另一个指令:ng-bing-html。 顾名思义,ng-bind-html和ng-bind的区别就是:ng-bind把值作为字符串和元素的内容进行绑定,但是ng-bind-html把值作为html和元素的html进行绑定,相当于jq里面的.t...原创 2015-11-19 00:13:21 · 237 阅读 · 0 评论 -
angular.copy实例
test.html<html><head> <title>angular.copy实例</title></head><body> <h1>angular.copy实例</h1> <div ng-controller="Controll原创 2015-09-21 22:36:47 · 141 阅读 · 0 评论 -
AngularJS动态校验
在Angular实际开发中,我们遇到查询数据,用ng-repeat循环在前台页面展示,而ng-repeat中的内容又需要独立操作,且需对每个ng-repeat中的区域中的输入框进行修改保存,且每个ng-repeat区域都需要校验,此时我们发现校验失效了。 遇到此问题时,当时第一反应是有两处原因,一处是由于ng-repeat中的内容是动态编译出来的,可能是作用域...2015-07-31 19:52:09 · 425 阅读 · 0 评论 -
AngularJS编程思想
用Angular进行前端开发,与传统前端开发思维不一样,传统前端开发以JQuery为代表,以DOM为中心,关注VIEW层的变化和用户操作,如我有这样一个DOM,我想让它做什么什么等,而以AnguarJS为代表的新一代前端开发,以Data为中心,聚焦于数据的变更,是MVW(Model+View+WhatEver)。 如何用AngularJS编程思想?一. 绝不...原创 2015-07-26 19:24:07 · 189 阅读 · 0 评论 -
AngularJS与RequireJS集成
RequireJS允许你定义和管理JS文件之间的依赖关系,把这些工作变成了一个简单的构建过程。利用这些异步加载管理工具,可以保证在代码执行之前所有依赖的东西就已经被加载好了——专注于开发实际的应用功能从来没有如此简单过。 AngularJS能够很好地与RequireJS(http://www.requirejs.org/)配合使用,这使得我们可以同时拥有两种组...2014-09-07 23:23:20 · 187 阅读 · 0 评论 -
AngularJS XMLHttpRequest
$http是AngularJS 中的一个核心服务,用于读取远程服务器的数据。 以下是存储在web服务器上的 JSON 文件data.json。[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name"2014-09-07 23:24:01 · 107 阅读 · 0 评论 -
AngularJS应用GubHub
AngularJS实例GutHub是一款简单管理应用,主要的特性如下:1.两列布局2.在左侧有一个导航条3.允许你创建新菜谱4.允许你浏览现有的菜谱列表 主视图位于右侧,主视图将会根据具体的URL刷新,可以显示菜谱列表、菜谱项目详情,以及用来添加或编辑菜谱的表单。 本文源码下载地址:https://github.com/joh...2014-09-07 23:24:24 · 164 阅读 · 0 评论 -
AngularJS单选按钮实例
AngularJS写一个单选按钮,我们会如下这样写:app.html<!doctype html><html><head> <script src="jquery-1.10.2.min.js"></script> <script src="angular-1.0.1.mi2014-09-12 21:47:59 · 279 阅读 · 0 评论 -
AngularJS表单验证
通过AngularJS我们不仅可以隐藏/显示错误提示消息,高亮输入框,还可以通过编写指令来随心所欲的控制表单验证方式。一.实例1app.jsvar myApp=angular.module('myModule', ['ui.bootstrap']);myApp.controller('myCtrl',function($scope){ $scope.r...2014-09-14 00:29:16 · 138 阅读 · 0 评论 -
AngularJS多Form验证
AngularJS中一个页面可以有多个Form,且Form之间还可以嵌套,对于多个Form我们在提交时,通过什么方式来判断校验是否都通过了呢?一.并列Form的校验控制 并列Form对当前的Controller来说是可见了,因此可以直接根据Form的$valid进行判断。app.jsvar myApp=angular.module('myModul...2014-09-14 14:08:33 · 225 阅读 · 0 评论 -
Service与Provider
我们不要试图去复用Controller,当我们发现两个或多个Controller有相同的代码时,我们应该抽取一个服务。一.使用$http服务HTTPBasic.html<html ng-app="MyModule"> <head> <meta http-equiv="content-type" content="text/ht...原创 2014-10-07 21:39:58 · 765 阅读 · 0 评论 -
AngularJS实现三级级联下拉选择框
index.html<!doctype html><html ng-app="ngShowcaseApp"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入 Boo原创 2015-07-15 21:03:55 · 955 阅读 · 0 评论 -
在AngularJS应用中处理单选框和复选框
AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理。 今天,我们将快速浏览一下AngularJS是如何对表单中的复选框和单选按钮进行处理的。 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的...原创 2015-12-11 21:06:46 · 299 阅读 · 0 评论 -
angular中的ng-bind-html指令和$sce服务
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签。如:$scope.currentWork.description = “hello,<br><b>今天我们去哪里?</b&g...原创 2017-08-27 20:19:57 · 118 阅读 · 0 评论 -
基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
test.html<!DOCTYPE html> <html lang="zh-CN" ng-app="App"> <head> <meta charset="UTF-8"> <title>前端研究</title> &原创 2017-09-09 09:02:59 · 211 阅读 · 0 评论 -
AngularJs表单校验实例
app.html<!DOCTYPE html><html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title>原创 2017-09-09 09:09:18 · 157 阅读 · 0 评论 -
AngularJS——简单表单验证
客户端表单验证是AngularJS里面最酷的功能之一,AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。 在AngularJS中,有许多表单验证指令。在这里,我们将谈谈几个最流行指令,然后我们将讨论如何编写自定义的验证。<form name="form"> <label name="email">Your em...原创 2017-09-09 09:24:02 · 212 阅读 · 0 评论 -
AngularJS表单验证
一.常用的表单验证指令<div class="col-md-6"> <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-md原创 2017-09-09 09:37:38 · 146 阅读 · 0 评论 -
AngularJS内幕详解之Scope
在AngularJS的代码库中呈现出了大量有趣的设计,最有趣的两个例子是scope的工作方式和directives(指令)的表现。 有的人第一次接触AngularJS时就被告知directives是和DOM交互,或供你随意操作DOM,就像jQuery. 这立马变得非常复杂,试想,scopes, directives 和controllers相互作用. 复杂的设置之后,你开始学习...原创 2017-09-10 14:37:56 · 130 阅读 · 0 评论 -
AngularJS内幕详解之Directive
在这系列的上一篇文章,我讨论了scope事件以及digest循环的行为。这一次,我将谈论指令。这篇文章包括 独立的scope,内嵌,link函数,编译器,指令控制器等等。 如果这个图表看起来非常的费解,那么这篇文章很适合你。 声明: 这篇文字是基于 AngularJS v1.3.0 tree. 一.到底什么是指令(directive)? AngularJS中,...原创 2017-09-10 14:43:58 · 250 阅读 · 0 评论 -
AngularJS 之 Factory vs Service vs Provider
当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑。一定要早点意识到,controller 这一层应该很薄;也就是说,应用里大部分的业务逻辑和持久化数据都应该放在 service 里。我每天都会在 Stack Overflow 上看到几个同类的问题,关于如何在 controller 里保存持久化数据。这就不是 controller 该干的...原创 2017-09-10 14:53:28 · 89 阅读 · 0 评论 -
ng指令中controller与link的区别
一.指令中controller与link的区别 我们都知道在ng的指令中,返回的对象中有两个重要的属性:// link function{ link: function(scope, iElem, iAttrs, ctrl) { ... }, controller: function($scope, $element, $attrs) { ... }} ...原创 2017-09-20 00:54:33 · 485 阅读 · 0 评论 -
Angularjs自定义指令实现三级联动选择地理位置
这篇文章主要介绍了Angularjs自定义指令实现三级联动,选择地理位置,以便以后工作需要可以参考。 Angularjs自定义指令实现三级联动效果图:<html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv=&qu原创 2017-09-09 08:16:37 · 189 阅读 · 0 评论 -
单页面webApp和路由(ng-route)
路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了,因为angular目前最重要的作用就是做单页面webApp,而路由这个东西是能做到页面跳转的关键。一.单页面webApp 为什么叫单页面webApp?因为它是单页面的。额,关键在于我们看到的不少webApp是多页面的啊,可以从一页跳到另一页。嗯,看起来是这样,不过实际上这几页实际还是一个页面,...原创 2017-09-07 00:36:07 · 405 阅读 · 0 评论 -
angular中的路由简单使用
在单页面应用程序中比如angular应用,我们需要根据url的变化(即:不同的请求),来分配不同的资源。根据请求的URL来决定执行哪个模块,这个过程叫路由,同时,我们需要设计路由规则。 下面给出一个简单的小demo:<!DOCTYPE html> <html> <head> <meta charset="UTF-...原创 2017-09-07 00:30:03 · 138 阅读 · 0 评论 -
AngularJS过滤器filter
在开发中,经常会遇到这样的场景: 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来; 如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍; 买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品; 以上三种场景分别对数据进行了转换...2017-09-01 00:08:48 · 278 阅读 · 0 评论 -
angularjs短信验证码及秒倒计时
工作H5开发需要做短信验证码及秒倒计时,如果是用纯JS做好像还比较容易,但用angularJS做还是一些坑,特此记录一下,有如下几种实现方式。一.setTimeout方式实现<html><head> <title>AngularJs倒计时</title></head><body> <d...2017-09-02 20:56:12 · 660 阅读 · 0 评论 -
理解和解决angularJS报错$apply already in progress
如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和解决的问题,否则就没有必要出现在日志中了。Error: [$rootScope:inprog] $apply already in progress ...原创 2017-09-02 21:51:33 · 633 阅读 · 0 评论 -
AngularJS单选、复选框
在项目开发中,有应用到单选、复选框,对于Angular来讲,其实有很多实现方法。如下应用实例:一.AngularJS radio单选实例 在页面上有几个项目名称,每个名称前面都有一个checkbox,如果打上勾,则表示这个项目已经完成,如果没有打钩,则表示未完成。 然后在下方设置一个输入框,用来输入新增加项目的名称,再下边是两个radio按钮,只能选择一个,用来选择新增肌的...2017-09-04 21:59:36 · 944 阅读 · 0 评论 -
理解$watch ,$apply 和 $digest --- 理解数据绑定过程
Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇: $watch,$apply,$digest,dirty-checking... 它们是什么?它们是如何工作的呢?这里我想回答这些问题,其实它们在官方的文档里都已经回答了,但是我还是想把它们结合在一起来讲,但是我只是用一种简单的方法来讲解,如果要想了解技术细节,查看源代码。 一.浏览器事件循环和An...原创 2017-09-05 00:22:04 · 127 阅读 · 0 评论 -
angular中的异常机制与异常之外的处理
在查阅angularjs的官方文档发现:文档中提到了throw异常angular.module('exceptionOverride', []).factory('$exceptionHandler', function() { return function(exception, cause) { exception.message += ' (caused by "...原创 2017-09-07 00:05:58 · 1168 阅读 · 0 评论 -
深究AngularJS——监听模型$watch
一.前言 1.$watch是scope内置的函数,它的作用是用来监听数据的变化。 2.$watch可监听哪些数据? 单个对象的属性 需要计算的结果(函数) 3. 语法: $scope.$watch(F,M,B); 二.对$watch参数的了解 F:要监听的数据(表达式或函数的字符串),主要是监听这些数据改变没有。它会返回被监听数据的当前值。...原创 2017-09-07 00:19:32 · 145 阅读 · 0 评论