话不多说，我们下面直接来看实现的示例代码 【一】Angular 路由状态发生改变时可以通过 $stateChangeStart 、 $stateChangeSuccess 、 $stateChangeError 监听，通过注入$location实现状态的管理 代码示例如下：function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on($stateChangeStart, function(event, toState, toParams, fromState, fromParams) { console.log(event)...
基于Angularjs实现分页 前言 学习任何一门语言前肯定是有业务需求来驱动你去学习它，当然ng也不例外，在学习ng前我第一个想做的demo就是基于ng实现分页，除去基本的计算思路外就是使用指令封装成一个插件，在需要分页的列表页面内直接引用。 插件 在封装分页插件时我实现了几种方式总体都比较零散，最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件，觉还不错，读了下他的源码就直接在项目中...
对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法：angular.module(myApp, []) .directive(myDirective, function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scop...
AngularJs学习笔记系列第一篇，希望我可以坚持写下去。本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容，但也加入些许自己的理解与尝试结果。 一、总括 本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。 二、Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular，实现自动初始化。 <!doctype html><html xmlns:ng="http://angularjs.org" ng-app><body>...<scri...
在实现Angularjs实现mvvm式的选项卡之前，先搬出我们常用的jquery实现。1、jquery实现简单粗暴的选项卡效果var nav = $(".tabs");//tab切换 var box = $(".box");//容器 nav.on("click", function(){ //点击事件var this_index=$(this).index();$(this).addClass("active").siblings().removeClass("active");box.eq(this_index).show().siblings().hide(); });在这里只给出js核心部分，html和css不做赘述。以上代码，简单粗暴的实...
基于angularjs制作的幻灯片演示地址 npm方式安装 npm install angularjsSlider使用方法 第一步（引入） require(angularjsSlider)(moduleName);//引入第二步（参数配置）类型说明dataArray幻灯片图片数据 [{img: "1.jpg",link:#}...]timerNumber幻灯片切换间隔timer="2"btn-leftString左侧切换按钮btn-left="#btnleft"btn-rightString右侧切换按钮btn-right=".btnright"animate-typeString切换动画方式animate-type="ease"animate...
一、What does it do?$location服务分析浏览器地址栏中的URL（基于window.location），让我们可以在应用中较为方便地使用URL里面的东东。在地址栏中更改URL，会响应到$location服务中，而在$location中修改URL，也会响应到地址栏中。$location服务： 暴露当前浏览器地址栏的URL，所以我们可以1.注意和观察URL 2.改变URL当用户做以下操作时，与浏览器一起同步URL：1.改变地址栏 2.单击后退或者前进按钮（或者点击一个历史链接）。 3...
虽然angular提供许多有用的service，在一些特别的应用中，我们会发现编写自定义service是很有用的。如果我们想做这件事，我们首先要在module中注册一个service工厂方法，可以通过Module.factory api（http://docs.angularjs.org/api/angular.module）或者在module配置方法中直接通过$provide api（http://docs.angularjs.org/api/AUTO.$provide）。所有angular service都参与到DI（//www.gxlcms.com/article/91775.htm）中，既可以...
原文再续，书接上回。。。依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一、总括Angular的HTML compiler允许开发者自定义新的HTML语法。compiler允许我们对任意HTML元素或属性，甚至是新的HTML标签、属性（如<beautiful girl=”cf”></beautiful >）附加行为。Angular将这些附加行为称为directives。HTML有很多专门格式化静态文档的预定义HTML样式结构（可以告诉浏览器如何显示标记的内容）。假设某东东需要被居中...
原版地址：http://code.angularjs.org/1.0.2/docs/guide/concepts 继续。。 一、总括 本文主要是angular组件(components)的概览，并说明他们如何工作。列表如下： statup - 依旧是hello world...改为Hello Kitty！runtime - 介绍angular的runtimescope - view与contorller的纽带（神马glue...胶）controller - app的行为(application behavior)model - app的数据view - 用户所看到的东东directives - HTML的语法扩展filters - 根据...
Directive是教HTML玩一些新把戏的途径。在DOM编译期间，directives匹配HTML并执行。这允许directive注册行为或者转换DOM结构。Angular自带一组内置的directive，对于建立Web App有很大帮助。继续扩展的话，可以在HTML定义领域特定语言（domain specific language ,DSL)。 一、在HTML中引用directivesDirective有驼峰式（camel cased）的风格的命名，如ngBind（放在属性里貌似用不了~）。但directive也可以支蛇底式的命名（snake ca...
一、什么是Module？很多应用都有一个用于初始化、加载（wires是这个意思吗？）和启动应用的main方法。angular应用不需要main方法，作为替代，module提供有指定目的的声明式，描述应用如何启动。这样做有几项优点： 这过程是声明描述的，更加容易读懂。在单元测试中，不需要加载所有module，这对写单元测试很有帮助。额外的module可以被加载到情景测试中，可以覆盖一些设置，帮助进行应用的端对端测试（end-to-end test）。第三方代...
一、什么是Scope？scope（http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope）是一个指向应用model的object。它也是expression（http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html）的执行上下文。scope被放置于一个类似应用的DOM结构的层次结构中。scope可以监测（watch,$watch）expression和传播事件。 二、scope的特性 scope提供$watch API（http://code.angularjs.org/1.0.2/docs/api/ng.$rootScop...
AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。 ng-viewng-view 标记只是简单地创建一个占位符，是一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。 使用定义一个div与ng-view在主模块中。 <div ng-app="mainApp"> ...<div ng-view></div></div> ng-templateng-template 指令是用来创建使用script标签的HTML视图。它包含一个...
AngularJS支持内置的国际化三种类型的过滤器货币，日期和数字。只需要根据国家的区域纳入相应的JS。默认情况下它处理浏览器的语言环境。例如，要使用丹麦语的语言环境，使用下面的脚本<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 使用丹麦语的语言环境实例 testAngularJS.html <html> <head><title>Angular JS Forms</title> </head> <body><h2>AngularJS Sample Application</h2><d...