本文实例讲述了AngularJS日期格式化常见操作。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"><meta charset="UTF-8"><title>www.gxlcms.com AngularJS日期格式化</title><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><style>.c1 {color: red;}</style> </head> <body ng-controller="myCtrl"> <!--格式 ： 年-月-日 星期 时:分:秒.毫秒 --> <d...
本文实例讲述了AngularJS中的作用域。分享给大家供大家参考，具体如下： 问题引入 使用 Angular 进行过一段时间的开发后，基本上都会遇到一个这样的坑： <div ng-controller="TestCtrl"><p>{{name}}</p><div ng-if="show"><input type="text" ng-model="name"></div> </div> <script> function TestCtrl($scope){$scope.show = true;$scope.name = htf; } </script>把 p 元素和 input 元素绑定同一个变量，你本以为，在输入框输入内...
本文实例讲述了Angular2实现组件交互的方法。分享给大家供大家参考，具体如下： 前言 在Angular开发中，我们经常会涉及到组件之间的交互，比如会引用自己部门开发的组件 有时候，我们需要向引用的组件里面绑定一些数据，或者我们需要引用的子组件输出一些数据 这时，我们就需要处理好组件之间的交互 组件交互的关键代码 父组件绑定数据到子组件 子组件 <h3>{{hero.name}} says:</h3> @Input() hero: Hero;父组件 <hero-child [hero...
传统做法 前端维护状态，手动操作DOM更新视图。前端框架对服务器数据通过模版进行渲染。当用户产生了一个动作之后，我们通过document.getElementBy... 手动进行DOM更新。 框架帮忙分离数据和视图，后续状态更新需要手动操作DOM，因为框架只管首次渲染，不追踪状态监听变化。 双向数据绑定 当我们在前端开发中采用MV*的模式时，M - model，指的是模型，也就是数据，V - view，指的是视图，也就是页面展现的部分。通常，我们需要编写...
本文实例讲述了Angular2管道Pipe及自定义管道格式数据用法。分享给大家供大家参考，具体如下： 管道(Pipe)可以根据开发者的意愿将数据格式化，还可以多个管道串联。 纯管道(Pure Pipe)与非纯管道(Impure Pipe) 管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下，管道都是纯的，在自定义管道声明时把pure标志置为false,就是非纯管道。如: @Pipe({name: sexReform,pure:false })纯管道和非纯管道的区别: ① 纯管道: Angu...
自己写了个Angular的文字折叠组件，这种组件其实很多地方都能用到效果如下 展开后的效果 折叠后的效果 先放全部代码，使用的时候只需要把自己需要展现的文字{{designer.des}}替换成自己所在路由器所需要绑定的数据即可 .directive(textfold, function() {return {restrict: EA,template: <p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;...
本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考，具体如下： html5原生方法 先看一下html5原生方法上传和预览图片的实现： // <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file"> var imgInput= document.getElementById("img-input"); imgInput.addEventListener("change", function(e){var imgFile = e.target.files[0]; //...
本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考，具体如下： 当scope选项写为scope:{ }这种形式的时候，就已经为指令生成了隔离作用域，指令的模板就无法访问外部作用域了： 具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。 现在，我们来看看绑定策略的三种形式： @、= 、&。 1. @ 本地作用域属性：使用@符号...
本文介绍了Angularjs的启动过程分析，分享给大家启动过程（v1.3.9） 步骤一 用自执行函数的形式让整个代码在加载完成之后立即执行in angular.js Line6 (function(window, document, undefined)在window上暴露一个唯一的全局对象angular，Line250 angular = window.angular || (window.angular = {}) 获得其它工具模块 Line 2129function publishExternalAPI(angular) {extend(angular, {bootstrap: bootstrap,copy: copy,extend: ...
本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下： ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。 定义： <element ng-repeat="expression"></element>说明：experssion表达式定义了如何循环集合。常用的如：x in records 下面通过一个例子,来说明ng-repeat如何绘制一个表格： <div ng-app=mainApp ng-controller=studentController><table border="0"><tr><td>姓...
本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考，具体如下： 使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。 在angular中为我们提供了3种方案： ① 通过数据的双向绑定（不推荐使用） ② 通过对象数组。 ③ 通过key/value 一、通过数据双向绑定： function changeClass(){$scope.className = "change2";...
本文实例讲述了AngularJS在路由中传递参数的方法。分享给大家供大家参考，具体如下： 我们不仅可以在控制器中直接定义属性的值，比如: app.controller(listController,function($scope){$scope.name="ROSE"; });AngularJS还提供了传递参数的功能，目前我接触到的一种方式是从视图中传参： <!--首页html--> <li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li> //js .config([$routeProvider,...
本文实例讲述了AngularJS表单验证功能。分享给大家供大家参考，具体如下： 在AngularJS的管辖下，每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的ngModelController实例，用以控制每个input的行为。 首先先从简单的验证开始。 AngularJs的ngModelController提供了几种属性：$pristine;$dirty;$valid;$invalid;$error pristine：表单并没有改变。 dirty：表单改变了。 valid...
本文实例讲述了AngularJS中的promise用法。分享给大家供大家参考，具体如下： JavaScript异步回调有好处也有坏处，回调函数大量嵌套十分复杂．所以javascript中还有另一种异步处理模式叫promises．在AngularJS中的实现就是$q服务． 下面是一些小例子． then,catch,finally 在链最后的 catch 为整个链式处理提供一个异常处理点 在链最后的 finally 总是会被执行，不管 promise 被处理或者被拒绝，起清理作用 <!DOCTYPE html> <html>...
写在开头 关于Angular脏检查，之前没有仔细学习，只是旁听道说，Angular 会定时的进行周期性数据检查，将前台和后台数据进行比较，所以非常损耗性能。 这是大错而特错的。我甚至在新浪前端面试的时候胡说一通，现在想来真是羞愧难当! 没有深入了解就信口开河实在难堪大任。 最后被拒也是理所当然。 误区纠正 首先纠正误区，Angular并不是周期性触发藏检查。只有当UI事件，ajax请求或者 timeout 延迟事件，才会触发脏检查。为什么叫...