标题定的是angularjs与bootstrap相结合实现手风琴菜单，其实也就是用的bootstrap的样式。 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。主要练习自定义指令，向指令中传递参数，老规矩先上效果图：{{item.text}} 上面是我自定义的指令，菜单存在标题和内容3条用了 ng-repeat来渲染。指令基本API如下：app.directive('myDirective',function(){ return { //restrict: 默认为A（属性，默...
身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。一旦用户被分配了适当的角色后，该用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少得多，这样将简化用户的...
如上图所示，我们需要实现如下这些验证功能： 控件都是必输控件 都需要控制最大长度 第一次打开页面，控件不能显示为错误状态 输入内容再清空后，必输控件需要显示为错误状态 只有所有输入合法后，发布按钮才能变为可用状态 通过AngularJS，我们可以很轻松的实现这些要求，只需要1行JS代码。UI样式这里采用的是Bootstrap。先上示例代码： HTML。DemoJS代码（真的只有一行哟） ContractCreateController.jsvar ftitAppModule = angu...
真正的应用需要和真实的服务器进行交互，移动应用和新兴的Chrome桌面应用可能是个例外，但是对于此外的所有应用来说，无论你是想把数据持久化到云端，还是需要与其他用户进行实时交互，都需要让应用与服务器进行交互。 为了实现这一点，Angular提供了一个叫做$http的服务。它提供了一个可扩展的抽象方法列表，使得与服务器的交互更加容易。它支持HTTP、JSONP和CORS方式。它还包含了安全性支持，避免JSON格式的脆弱性和XSRF。它让你...
本文简单介绍AngularJS框架后，用一个实例演示{{}}插值法和ng-bind指令的使用。 不同于jquery只是一个加强和简化前端开发的类库，angularjs是一个完整web前端框架，所以学习曲线高了很多。 angularjs给我的感觉类似于Java的Spring框架，处于中心容器位置粘合其他组件，其内置的很多组件已经可以满足一般场景，特殊场景我们可以按照框架思路扩展。 下面从最基础的内容走起：代码如下:ng-bind directive直接输出字符串字面值Hello {{...
虽然我不是前端程序员，但明白前端做好验证是多么重要。因为这样后端就可以多喘口气了，而且相比后端什么的果然还是前端可以提高用户的幸福感。 AngularJS提供了很方便的表单验证功能，在此记录一番。 首先从下面这段代码开始代码如下:angular.module('myApp',[]) .controller('validationController', ['$scope',function($scope) {$scope.user = 'Kavlez';$scope.email = 'sweet_dreams@aliyun.com'; }]);input标签的一些验证选项...
HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式：使用Ajax - 让一台服务器来调用获取相应的HTML页面，并将其设置在HTML控件的innerHTML。 使用服务器端包含 - JSP，PHP等Web端服务器技术可以在包括动态页面中的HTML页面。使用AngularJS，我们可以用ng-include指令在一个HTML页面嵌入另一个HTML页面。例子 tryAngularJS.htmlAngular JS Includestable, th , td {border: 1px solid grey;border-collapse: ...
在Angular当中，CSS和JavaScript之间唯一的区别就是它们的定义。没有什么区别妨碍到被定义的动画被使用。首先，我们需要加载ngAnimate模块到我们应用的root模块当中。angular.module('coursesApp', ['ngAnimate']);而所有将被处理的JavaScript动画事件依然保持不变。以下是一个直接支持的动画列表和它们对应的不同行为： 指令事件集 ng-viewng-includeng-switchng-if enterleaveng-repeat enterleavemoveng-showng-hideng-class ...
AngularJS 1.2 通过引入基于纯CSS class的切换和动画，在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view，让我们来看一下，一个引入众多的不同切换的可伸缩方法，以及指定的每个页面如何切入和切出。 演示: http://embed.plnkr.co/PqhvmW/preview 首先，标记：既然ng-view使用进入/离开动画，那么就能简单地在DOM里使用两个 ng-view 元素来进行新视图切入和旧视图切出。因此，我们在使用相对定位的 pag...
完整代码：https://github.com/scotch-io/laravel-angular-comment-app 目前，Laravel和Angular均已经成为了Web发展世界里非常著名的工具。Laravel以给PHP社区引入的伟大内容著称，Angular以其惊人的前端工具及简单著称。组合这两大框架似乎是合乎逻辑的下一步。 在我们的使用环境下，我们将使用Laravel作为后端的RESTful API，Angular作为前端，以创建一个简单的单页的评论应用。 下面是一个简单的例子，展示了如何开始使用这两种...
AngularJS 提供了一个很棒的方式来创建单页app。正是由于这个原因，使得我们的站点看起来更像是一个原生的手机程序。为了使它看起来更像是原生的程序，我们可以使用 ngAnimate module 为它添加过渡和动画效果。 这个模块可以使我们创建漂亮的程序。今天，我们将要看一下如何为 ng-view 添加动画效果。 我们要构建什么 我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个...
主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL，再有dataURL转化为Blob文件，Blob对象可以直接赋值给Formdata.app.service('Util', function($q) {var dataURItoBlob = function(dataURI) {// convert base64/URLEncoded data component to raw binary data held in a stringvar byteString;if (dataURI.split(',')[0].indexOf('base64') >= 0)byteString = atob(dataURI.split(',')[1]);elsebyteString = unescape(...
不得不说，上手AngularJS比我想象得难多了，把官网提供的PhoneCat例子看完，又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍，对于基本的使用依然有很多说不清道不明的疑惑，于是决定通过做一个在线聊天室帮助理解。DEMO可以戳→chat room，代码可以戳→ChatRoom-AngularJS。 清晰图可以戳 功能 着手开发之前，首先明确一下需要实现的功能： 新用户登入，广播通知其他用户 用户下线，广播通知其他用户 可显示在线人数及列表 可...
Angular.js 中的特性,双向绑定.多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明:$scope.$watch(参数,function(newValue,oldValue){//逻辑处理 })上面我们就是创建了一个监听器. ‘参数 就是$scope对象下的一个对象(或者一个对象的属性),注意...
要实现这个功能，可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现。步骤如下： 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本，还需要修改ng-infinite-scroll.js程序，将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(elem).xxx 3. 在HTML中引入script4. HTML示例代码如下：