前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它，当然ng也不例外，在学习ng前我第一个想做的demo就是基于ng实现分页，除去基本的计算思路外就是使用指令封装成一个插件，在需要分页的列表页面内直接引用。 插件 在封装分页插件时我实现了几种方式总体都比较零散，最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件，觉还不错，读了下他的源码就直接在项目中使用了。 原理和使用说明 1、插件源...
循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。 用AngularJS就爽多了，语法和JSP类似： <!doctype html> <html ng-app> <head><meta charset="utf-8"><title>ng-repeat directive</title> </head> <body> <table ng-controller="CartContr...
AngularJS 是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展 HTML 的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如 JQuery 等）合作融洽。 <body ng-app="myNoteApp"> <html> <div ng-controller="myNoteCtrl"> <p><textarea ng-model="message" cols="40" rows="10" maxlength="100"></textarea></p> <p>100/<span ng-bind="left()"></span></p> <...
身份验证 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。 一旦用户被分配了适当的角色后，该用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少得多，这样将简化用...
先给大家简单介绍angular.js和bootstrap基本概念。AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分页。先上图看...
标题定的是angularjs与bootstrap相结合实现手风琴菜单，其实也就是用的bootstrap的样式。 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。主要练习自定义指令，向指令中传递参数，老规矩先上效果图：<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page> 上面是我自定义的指令，菜单存在标题和内容3条用了 ng-repeat来渲染。指令基本API如下：app....
废话不多说了，直接看干货吧。 使用service来共享数据定义一个共享服务的service //家电维修共享数据的服务 angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ return { //缓存当前需要维修的设备名称、数量、唯一标识 deviceRepairObj : [], //小区位置 xiquLocation:{}, //预约时间 appointmentDate:{ "date":"", "time":"" }, //预约日期界面回退到上一个界面的...
首先设定一段Angularjs代码的ng-class： <i class="header-help-icon down" ng-class="{up:showMenu}"></i> 比较容易理解的Angularjs ng-class设置样式代码，那我们使用React怎么去实现它呢？ 首先在state设置一个变量比如： isShowLoginMenu，在不同场景改变它的值，然后在绑定在class样式上面 <i className={"header-help-icon down" + (this.state.isShowLoginMenu ? up : )}></i> or <span id="vip-header-logo" c...
angular-material 是 AngularJS 的一个子项目，用来提供实现了 Material Design 风格的组件。 Material 提供了大量的android 风格的UI组件，使用 angularjs + Material 可以很容易开发出风格接近原生 Android 5.x 的web界面。但在实际使用的过程中并不总是能满足我们的需求。开发一个组件就成了我们必须学习的内容。 下面是一个组件的实现: //前面省略若干代码 directive(mdSearchInput,[function(){ return{ restrict:E, cont...
随着你的单页应用扩大，其下载时间也越来越长。这对提高用户体验不会有好处（提示：但用户体验正是我们开发单页应用的原因）。更多的代码意味着更大的文件，直到代码压缩已经不能满足你的需求，你唯一能为你的用户做的就是不要再让他一次性下载整个应用。这时，延迟加载就派上用场了。不同于一次性下载所有文件，而是让用户只下载他现在需要的文件。 所以。如何让你的应用程序实现延迟加载？它基本上是分成两件事情。把你的模块拆分...
在进行有一定规模的项目时，通常希望实现以下目标：1、支持复杂的页面逻辑（根据业务规则动态展现内容，例如：权限，数据状态等）；2、坚持前后端分离的基本原则（不分离的时候，可以在后端用模版引擎直接生成好页面）；3、页面加载时间短（业务逻辑复杂就需要引用第三方的库，但很可能加载的库和用户本次操作没关系）；4，还要代码好维护（加入新的逻辑时，影响的文件尽量少）。 想同时实现这些目标，就必须有一套按需加载的机制，...
AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架，由谷歌最初开发的 开源项目，干净的架构吸引了大量粉丝，适合建立CRUD类型的业务应用程序，并不适合开发游戏等应用， 使用声明性编程的用户界面和命令式编程的逻辑， 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上。 AngularJS是一款客户端MVC的javascript框架，而客户端MVC代表未来架构(为什么要使用MVC+REST+CQRS 架构)，如果你有Struts或SpringMVC...
我们看到这项技术已经应用在了许多的网页上。比如购物车，注册表单，入职流程以及许多多步表单，让用户更容易在线填写表单。下面我们将构建它： 使用UI Router，它能内嵌状态，为每个状态显示不同的view,我们能让多步表单变得相当的容易。为了快速的理解UI Router是怎样工作的，看我们的文章：AngularJS使用UI-Router路由让我们言归正传，开始创建我们的最棒的表单！ 创建工程创建工程有个模板结构. 需要个 布局文件 , 每个表单的...
本文实例讲解了Angular实现form自动布局的详细代码，分享给大家供大家参考，具体内容如下 效果图：具体代码： 1.formlayoutCtrl.jsuse strict; sxlcApp.controller(formlayoutCtrl, [$scope, $filter, $http, function($scope, $filter, $http){$scope.title = 表单布局中;$scope.dataParamsUrl = ./php/formlayout.json;$scope.resetForm = function(num){console.log(num)} }]); 2. formlayout.html <div class="container" ng-...
所谓的延迟加载通常是：直到用户交互时才加载。如何实现延迟加载呢？ 需要搞清楚三个方面： 1、html元素的哪个属性需要延迟加载？ 2、需要对数据源的哪个字段进行延迟加载？ 3、通过什么事件来触发延迟加载？ 自定义的Directive的页面表现大致是这样：<ul> <li ng-repeat="cust in customers" delay-bind="{{::cust.street}}" attribute="title" trigger="mouseenter"> <a delay-bind="{{::cust.url}}" attribute="href" trigger="...