先来看看效果图首先先来说一下指令嵌套，指令嵌套顾名思义就是两个以上的指令嵌套在一起，比如下面这样： <A-deirective><B-directive></B-directive><C-directive></C-directive> </A-directive>下面这个tabs功能的指令，刚好用到了这个，可以让代码更加简洁。 <!DOCTYPE html> <html lang="en" ng-app="docsTabsExample"> <head><meta charset="UTF-8"><title></title><script></script><script src="lib/angular.min.js" type="...
前言一开始打算用原生的angularjs写，但是发现用原生angularjs，无论如何都不能获取里面图片的宽度和高度，因为angularjs内置的jquery方法里没有winth() 、height()方法。最好我还是引入了jquery，在同一scope上绑定了宽度高度。下面上源码，顺便我会把里面的一些注意的点说一下。 效果图首先说明下 1、首先使用了两个同级指令，并在两个同级指令间进行通信，同级指令间通信，非常简单，就是不要让同级的指令生成独立的scope，并且...
在刚开始没有给输入框添加焦点之前，没有任何效果。见下图：然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二：中间的输入登录密码文字，会自动添加到顶部（原谅我没有截取到动画过程的图片）。 我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。 下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。 原...
先来看看效果图其实写一个轮播图还是蛮简单的，我想了两种种方法，来实现轮播图（实际上细分是5种，但是其中两种是操作dom原生，三种是利用AngularJs的动画，所有归为两大类），等我写出来，大家好好理解一下就好。 那我先写一种，第一种是不使用angularjs的动画模块，只使用指令来完成动画的切换。在这里面就是在指令里操作dom元素，超级easy。 示例代码 <!DOCTYPE html> <html lang="en" ng-app="lunbo"> <head><meta charset="U...
AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。 我们能够在应用的部分内容当中使用动画来表明一些变化正在发生。在我上一篇文章当中，我讲到了在Angular应用中对CSS动画的支持。在这篇文章当中，我们会看到怎样利用JavaScript脚本在AngularJS应用当中生成动画效果。在Angular当中，CSS和...
前言 Jquery发展至今,幻灯组件已经非常成熟，所以下面小编带大家一起看看利用Angularjs实现幻灯片效果的步骤。 npm方式安装 npm install angularjsSlider使用方法 第一步（引入） require(angularjsSlider)(moduleName);//引入第二步（参数配置） 类型说明dataArray 幻灯片图片数据 [{img: "1.jpg",link:#}...]timer Number幻灯片切换间隔timer="2"btn-left String左侧切换按钮btn-left="#btnleft"btn-rightString右侧切换按钮btn-...
本文用angularJS简单实现了一个小的按钮提示，按钮点击后会变色，注意html文件中需要引入jquery.js和angular.js 运行截图：当点击按钮的时候 按钮的样式改变：css代码： <style type="text/css">*{margin: 0px;padding: 0px;}.bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relative;}.bucSelected {border:1px solid rgb(195,195,195);color:#000;cursor: pointer;border-radius: 6px;backgrou...
AngularJS 动画AngularJS 提供了动画效果，可以配合 CSS 使用。AngularJS 使用动画需要引入 angular-animate.min.js 库。<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>还需在应用中使用模型 ngAnimate：<body ng-app="ngAnimate">什么是动画？动画是通过改变 HTML 元素产生的动态变化效果。实例勾选复选框隐藏 DIV: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>...
AngularJS 是一组用于创建单页Web应用的丰富框架，给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。 本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果。 通过CSS方式实现显示/隐藏动画效果 思路： →npm install angular-animage →依赖：var app = angular.module("app",["ngAnimate"]); →controller中一个变量接收bool值 →界面中提供一个按钮，点击改变bool值...
angularjs作为一个全ajax的框架，对于请求，如果页面上不做任何操作的话，在结果烦回来之前，页面是没有任何响应的，不像普通的HTTP请求，会有进度条之类。 什么是拦截器？$httpProvider 中有一个 interceptors 数组，而所谓拦截器只是一个简单的注册到了该数组中的常规服务工厂。下面的例子告诉你怎么创建一个拦截器: <!-- lang: js --> module.factory(myInterceptor, [$log, function($log) {$log.debug($log is here to show y...
AngularJS 提供了一个很棒的方式来创建单页app。正是由于这个原因，使得我们的站点看起来更像是一个原生的手机程序。为了使它看起来更像是原生的程序，我们可以使用 ngAnimate module 为它添加过渡和动画效果。 这个模块可以使我们创建漂亮的程序。今天，我们将要看一下如何为 ng-view 添加动画效果。 我们要构建什么 我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个...
在Angular当中，CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先，我们需要加载ngAnimate模块到我们应用的root模块当中。 angular.module(coursesApp, [ngAnimate]); 而所有将被处理的JavaScript动画事件依然保持不变。以下是一个直接支持的动画列表和它们对应的不同行为： 指令事件集 ng-viewng-includeng-switchng-if enterleaveng-repeat enterleavemoveng-showng-hideng-class ...
如上图所示，我们需要实现如下这些验证功能： 控件都是必输控件 都需要控制最大长度 第一次打开页面，控件不能显示为错误状态 输入内容再清空后，必输控件需要显示为错误状态 只有所有输入合法后，发布按钮才能变为可用状态 通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码： HTML。 <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp"> <head><meta charset="utf-8...