前言 大家都知道在使用anularjs开发前端页面时，常常使用ng-show、ng-hide、ng-if功能来控制页面元素的显示或隐藏，那他们之间有什么不同呢？下面通过这篇文章来一起看看吧。 实现原理 ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏，对应的DOM元素会一直存在于当前页面中，而ng-if根据表达式的值动态的在当前的页面中添加删除页面元素。如果赋值表达式的值为false，那么这个元素就会从页面中删除，否则会添加一个元素。...
刚了解了下Angular.js，发现Angular.js绑定数据方面非常方便，套下教程demo: <div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"><h1>你输入了: {{name}}</h1> </div>我就想着，使用jq/js怎么实现类似的效果，后来找找，发现使用propertychange可以实现。 JQ： <div class="wrap"><textarea></textarea><div class="miss"></div></div>$(textarea).on(input propertychange, function() {$(.miss).html($(t...
$watch简单使用 $watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality);每个参数的说明如下： watchExpression：监听的对象，它可以是一个angular表达式如name,或函数如function(){return $scope.name}。listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)objectEquali...
前言 在Angular框架中,创建团队为使用者进行了Ajax请求的封装,并通过$http服务暴露出相关的接口.Angular在其官方文档中指出, $http服务底层针对Web常见的安全攻击做出了相应的对策,也就是说使用$http服务封装的Ajax为使用者提供了更为安全的保障.作为一个框架,保证框架的可用性,适配性是很有必要的. Angular在设计,实现中也体现出来了这样的良好风格.我们通常在使用Ajax时,有时候希望我们能够在请求发起前或接收到请求后做一些相应...
前言 大家应该都知道，Django和Angular的模板系统使用了非常相似的标签系统，比如说，都是使用{{ content }}表示变量名字。所以Django和Angular配合使用的时候，会引起冲突。我在网上找到了一些解决方法。现在总结后分享给大家，下面来一起看看吧。 一、 改变AngularJs的默认标签下面的代码可以将Angular原来的标签改成{[{ content }]} 。 修改Angular的标签 myModule.config(function($interpolateProvider) {$interpolateProvide...
前言 相信大家在做项目里经常需要登录注册，那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。 Angular下载地址：https://code.angularjs.org/1.5.0/angular.js 首先看一下页面效果（通过bootstrap实现的布局样式）： 当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对angular进一步深入理...
本文着重介绍关于ng的测试部分，主要包括以下三个方面： 框架的选择（Karma+Jasmine）测试的分类和选择（单元测试 + 端到端测试）在ng中各个模块如何编写测试用例下面各部分进行详细介绍。 测试的分类 在测试中，一般分为单元测试和端到端测试，单元测试是保证开发者验证代码某部分有效性的技术，端到端（E2E）是当你想确保一堆组件能按事先预想的方式运行起来的时候使用。 其中单元测试又分为两类： TDD(测试驱动开发)和BDD(行为驱...
首先本文以个人目前项目的部分代码为例说明为什么要用deferred。 function getBase64(img){//传入图片路径，返回base64function getBase64Image(img,width,height) {var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataURL = canvas.toDat...
一、写个简单的Angular App在开始写测试之前，我们先写一个简单的计算App,它会计算两个数字之和。代码如下： <html> <head><script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script></head><body><!-- This div element corresponds to the CalculatorController we created via the JavaScript--><div ng-controller="CalculatorController"><input ng-model="x" type="number"><in...
前言 众所周知AngularJS 中可以使用 ng-repeat 显示列表数据，这对大家来说应该都不陌生了， 用起来很简单， 也很方便， 比如要显示一个产品表格， Controller 的 Javascript 代码如下： angular.module(app, []) .controller(MyController, MyController);MyController.$inject = [$scope]; function MyController($scope) {// 要显示的产品列表数据；$scope.products = [{id: 1,name: Product 1,description: Product 1 descript...
$apply()和$digest()介绍 AngularJS提供了一个非常酷的特性叫做双向数据绑定(Two-way Data Binding)，这个特性大大简化了我们的代码编写方式。数据绑定意味着当View中有任何数据发生了变化，那么这个变化也会自动地反馈到scope的数据上，也即意味着scope模型会自动地更新。类似地，当scope模型发生变化时，view中的数据也会更新到最新的值。那么AngularJS是如何做到这一点的呢？当你写下表达式如 时，AngularJS在幕后会为你在scope...
一、ng-show/ng-hide 与 ng-if的区别？我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话，那么ng-if的性能好过ng-show. 二、解释下什么是$rootScrope以及和$scope的区别？通俗的说$rootScrope 页面所有$scope的父亲。我们来看下如何产生$rootScope和$scope吧。 step1:Angular解析ng-app然后在内存中创建$rootSco...
对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。现在在学习angular，使用angularjs 分页，基于 directive 实现，样式使用的 bootstrap，直接在 html代码中加入 标签即可调用。 先来看下效果图实例代码 app.directive(pagePagination, function(){return {restrict : E,tem...
AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码，具体代码如下所示： // 1、实现输入数字输出对应汉字，要求使用angularjs，不准使用$watch函数，for循环；提示：ng-change指令 <div ng-app="myApp" ng-controller="changeCtrl"> // 定义一个app指令 定...
Angular.js中index.html简单结构：<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || World}}! </body> </html> ng-app属性是angular.js的标志语句，它标记了angular.js的作用域。ng-app可以添加在很多地方，像上面那样添加到html标签上，说明a...