本文实例讲述了AngularJS自定义插件实现网站用户引导功能。分享给大家供大家参考，具体如下： 最近由于项目进行了较大的改版，为了让用户能够适应这次新的改版，因此在系统中引入了“用户引导”功能，对于初次进入系统的用户一些简单的使用培训training。对于大多数网站来说，这是一个很常见的功能。所以在开发这个任务之前，博主尝试将其抽象化，独立于现有系统的业务逻辑，将其封装为一个通用的插件，使得代码更容易扩展和维护。...
星期六加班，教育后台也要有星级评分等级的需求，醉了……基本知道些怎么做，网上也随便找了找，没什么合意的，毕竟需求不同，也不能完全一样不是。学习之，改之╮(╯▽╰)╭Directive angular.module(XXX).directive(stars, stars);function stars() {var directive = {restrict: AE,template: <ul class="rating" ng-mouseleave="leave()"> +<li ng-repeat="star in stars" ng-class="star" ng-click="click($index + 1)" ng-mou...
初学angularJS 闲暇之余做了个小案例。 功能：计算购物车商品的价格，以及删除购物车商品。 以下是完整案例（jQuery和angularjs需要自己引入） <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .cursors{cursor:pointer} </style> <script src="js/jquery-1.11.1.js"></script> <script src="js/angular.min.js"></script><script>var A=angular.module(myApp,[]); //购...
基于Angularjs实现分页 前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它，当然ng也不例外，在学习ng前我第一个想做的demo就是基于ng实现分页，除去基本的计算思路外就是使用指令封装成一个插件，在需要分页的列表页面内直接引用。 插件 在封装分页插件时我实现了几种方式总体都比较零散，最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件，觉还不错，读了下他的源码就直接在项目中...
效果图实例代码<!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0; list-style: none;font-size:12px;}.clearfix{overflow: hidden;display:block;clear:both}.clearfix:after{zoom:1}.relation{margin-top:7px;font:14px/38px "微软雅黑"; height: 38px; background: #f8f8f8; padding-left: 26px; color: #666;}.relation ...
话不多说，直接看示例代码 HTML代码<th class="col-md-3"><a href="" ng-click="desc(2,la=!la)">单价</a></th><th class="col-md-3"><a href="" ng-click="desc(3,la=!la)">销售金额</a></th><th class="col-md-1"><a href="" ng-click="desc(4,la=!la)">销售数量</a></th>其中 la=!la 是用来判断当前点击是true还是false JS代码 //开始默认为totalnum字段 按照降序排列$scope.foodsale =ret.sort(function ( x,y ){return y.tota...
AngularJS 简介 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.m...
在学习AngularJS的过程中感觉到，通过一次性从服务端的数据库获取信息，在前端进行分页，这是一种比较可取的方式。因为它节省了前后端的通信负载，把更多的显示方面的任务交给前端处理。 此内容分为两个部分，第一部分给大家简单介绍一下AngularJS的内建服务$location及其功能；第二部分通过一个比较完整的综合实例来实现分页显示数据库信息的效果。 在做angularJS的Mutilpe View & Route 的工作时，感觉到应该更加深入的了解一下a...
Angular 可使用指令无缝地增强标准表单元素的功能，我们将讨论它的优点，包括： 数据绑定、建立模型属性、验证表单、验证表单后反馈信息、表单指令属性 下面我们通过案例验证他们的用法： 一、双向数据绑定（ng-model）和建立模型属性 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head><title>Angular Directive</title><meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="css/bootstrap.mi...
angularJs 的分页重点体现在对 过滤器 的使用。这个过滤器也并不复杂。 首先上 html 代码： <!DOCTYPE html> <html ng-app="demoApp"> <head> <meta charset="utf-"> <meta name="viewport" content="width=device-width"> <title>demo</title> <link rel="stylesheet" href="demo.css"> </head> <body> <div ng-controller="demoCtrl"> <div> <ul> <li ng-repeat="sentences in demoLists[].name | paging:currentPage*listsPerPa...
前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它，当然ng也不例外，在学习ng前我第一个想做的demo就是基于ng实现分页，除去基本的计算思路外就是使用指令封装成一个插件，在需要分页的列表页面内直接引用。 插件 在封装分页插件时我实现了几种方式总体都比较零散，最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件，觉还不错，读了下他的源码就直接在项目中使用了。 原理和使用说明 1、插件源...
身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。 一旦用户被分配了适当的角色后，该用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少得多，这样将简化用...
八种AngularJS让人爱不释手的功能分享给大家，供大家参考，具体内容如下 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul> 你甚至可以指定输出的顺序： <li ng-repeat="person in persons | orderBy:name"> 第二 动态绑定之ng-model标签 任何有用户输入，只要是有值的html标签，都可以动态绑定...
angular-material 是 AngularJS 的一个子项目，用来提供实现了 Material Design 风格的组件。 Material 提供了大量的android 风格的UI组件，使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面。但在实际使用的过程中并不总是能满足我们的需求。开发一个组件就成了我们必须学习的内容。 下面是一个组件的实现: //前面省略若干代码 directive(mdSearchInput,[function(){ return{ restrict:E, cont...
AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架，由谷歌最初开发的 开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用， 使用声明性编程的用户界面和命令式编程的逻辑， 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上。 AngularJS是一款客户端MVC的javascript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS 架构)，如果你有Struts或SpringMVC...