ionic 教程
ionic 加载动画
ion-spinner
ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。
&ion-spinner icon="spiral"&&/ion-spinner&
//默认用法
像大部分其他的ionic组件一样，spinner也可以使用ionic的标准颜色命名规则，就像下面这样：
&ion-spinner class="spinner-energized"&&/ion-spinner&
&ion-content scroll="false" class="has-header"&
&ion-spinner icon="android"&&/ion-spinner&
&ion-spinner icon="ios"&&/ion-spinner&
&ion-spinner icon="ios-small"&&/ion-spinner&
&ion-spinner icon="bubbles" class="spinner-balanced"&&/ion-spinner&
&ion-spinner icon="circles" class="spinner-energized"&&/ion-spinner&
&ion-spinner icon="crescent" class="spinner-royal"&&/ion-spinner&
&ion-spinner icon="dots" class="spinner-dark"&&/ion-spinner&
&ion-spinner icon="lines" class="spinner-calm"&&/ion-spinner&
&ion-spinner icon="ripple" class="spinner-assertive"&&/ion-spinner&
&ion-spinner icon="spiral"&&/ion-spinner&
&/ion-content&
cursor: url('/try/demo_source/finger.png'),
text-align:
margin-bottom: 40px !
.spinner svg {
width: 19% !
height: 85px !
JavaScript 代码
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
效果如下所示：
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！ionic2 - Ionic 2 spinner api - Stack Overflow
to customize your list.
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
J it only takes a minute:
Does anyone know if there is ionic spinner on ionic2? like it is on ionic1
3,5261754103
Ionic 2 Spinner is available in current version(2.0.0-beta.3).
Try &ion-spinner&&/ion-spinner& in your template.
Ionic Spinner Docs
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled八、Angularjs自定义服务 provide里provider方法 以及factory、service方法以及provider供应商的概念
Angular 提供了3种方法来创建并注册我们自己的服务。
1. Provider
Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。
(1)var app=angular.mudle('myApp',[],function(provide){$provide.provider=...;this.$get=function(){};});
(2)$scope.config=function(provide){}
2. Factory & & ——可返回对象和字符串
Factory 方法直接把一个函数当成一个对象的$get 方法可以直接返回字符串
用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。
3. Service
Service 是用"new"关键字实例化的。因此，你应该给"this"添加属性，然后 service 返回"this"。你把 service 传进 controller 之后，在controller里 "this" 上的属性就可以通过 service 来使用了
4、三者的区别：
（1）provider要放在this.$get里面
（2）service可用this直接定义方法
（3）只有provider可以传入config
（4）service不能返回字符串
九、Angularjs 常用服务 $http $location $anchorScroll $cacheFactory $timeout $interval $sce
2.$location
$location服务解析地址栏中的URL（基于window.location），让你在应用代码中能获取到。改变地址栏中的URL会反应$location服务中，反之亦然。
(1) 暴露当前地址栏的URL，这样你就能? 获取并监听URL。? 改变URL。(2)当出现以下情况时同步URL? 改变地址栏? 点击了后退按钮（或者点击了历史链接）? 点击了一个链接(3)一系列方法来获取URL对象的具体内容用（protocol, host, port, path, search, hash）.formatDate
(4)$location不会做
当浏览器的URL改变时，不会重新加载整个页面。如果想要重新加载整个页面，需要使用$window.location.href。(5)内置方法：
absUrl( )：只读；根据在RFC 3986中指定的规则，返回url，带有所有的片段。
hash( )：读、写；当带有参数时，返回哈希碎片；当在带有参数的情况下，改变哈希碎片时，返回$location。
host( )：只读；返回url中的主机路径。
path( )：读、写；当没有任何参数时，返回当前url的路径；当带有参数时，改变路径，并返回$location。（返回的路径永远会带有/）
port( )：只读；返回当前路径的端口号。
protocol( )：只读；返回当前url的协议。
replace( )：如果被调用，就会用改变后的URL直接替换浏览器中的历史记录，而不是在历史记录中新建一条信息，这样可以阻止『后退』。
search( )：读、写；当不带参数调用的时候，以对象形式返回当前url的搜索部分。
url( )：读、写；当不带参数时，返回url；当带有参数时，返回$location。
3.$cacheFactory
var m1 = angular.module('myApp',[]);
m1.controller('Aaa',['$scope','$cacheFactory','$log',function($scope,$cacheFactory,$log){
$log.error('hello');
var cache = $cacheFactory('myCache');
cache.put('name','hello'); cache.put('age','20'); cache.put('job','it'); }]);
m1.controller('Bbb',['$scope','$cacheFactory','$log',function($scope,$cacheFactory,$log){
var cache = $cacheFactory.get('myCache'); console.log(cache.get('name')); }]);
4、$timeout
$timeout(function(){ $scope.name = '123'; },1100);
5、$interval
$ inteval(function(){ $scope.name = '123'; },1100);
6、$sce &——用于解析html代码文章里面的标签
var app = angular.module("myApp", []); app.controller('firstController',function($scope,$timeout,$sce,$http){
$scope.name = 'hello';
$scope.text = '&h1&hello&/h1&';
var myUrl = "/appapi.php?a=getPortalArticle&aid=338&callback=JSON_CALLBACK"; $http.jsonp(myUrl).success( function(data){
//$scope.portalDetail = data.result[0];
$scope.detailContent = function() {
return $sce.trustAsHtml(data.result[0].content); }; } ).error(function(){ alert('失败'); }); });
7、$anchorScroll
可直接跳转到网页上指定id的位置，例如点击某个li跳转至页面对应id处，方法一：$scope.hash(id);方法二：$anchorScroll();
十、angularjs ngSanitize ngRoute ngAnimate插件
1、ngSanitize & & ——ng-bind的插件
让浏览器简析html标签（1） 引入js angular-sanitize.min.js（2） 在module 中引入一下插件 var app = angular.module("myApp", ['ngSanitize']);（3） 使用&div ng-bind-html="text"&&/div& 绑定数据
2、ngRoute
引入js 依赖注入&script src="/angular.js/1.2.9/angular-route.min.js"&&/script&
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/aaa/:num',{
template : '&p&首页的内容&/p&{{name}}',//可以是标签，可以是url
controller : 'Aaa'
}) .when('/ccc',{
template : '&p&课程的内容&/p&{{name}}',
controller : 'Ccc' }) .otherwise({
redirectTo : '/aaa'
（1）$rootParams
（3）$routeChangeStart
（4）$routeChangeSuccess/Error
3、ngAnimate & & ——页面切换动效
（1） 引入js&script src="/angular.js/1.3.8/angular-animate.min.js"&&/script&（2） var m1 = angular.module('myApp',['ngAnimate']);（3） 使用下面的几种方式
CSS3的方式（1）
ng-enter-active
ng-leave-active
支持的指令
if,view,repeat,include,swtich repeat：ng-enter-stagger animation-delay
CSS3的方式（2）
ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active
支持的指令
class,show,hide,model等
animation()
enter/leave
removeClass/addClass
m1.animation('.box',function(){
addClass : function(element,sClass,done){
//console.log(element);
//console.log(sClass);
//console.log(done);
$(element).animate({width:0,height:0},1000,done); },
removeClass : function(element,sClass,done){ $(element).css({width:0,height:0}); $(element).animate({width:200,height:200},1000,done); } }; });
十一、$resource 数据交互插件
后端支持跨域请求： header('Access-Control-Allow-Origin: *');
&1、$resource &&
$resource(url, [paramDefaults], [actions], options);
支持方法：
'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'}
（1） 引入 angular-resource.min.js（2） 定义模块时加载ngResourcevar app = angular.module('app',["ngResource"]);
（3）var User = $resource('/user/:userId', {userId:'@id'});
　　var user = User.get({userId:123}, function() { user.abc = user.$save(); });
myAppModule.factory('CreditCard', ['http', function($http) {
var baseUrl = '/user/123/card';
get: function(cardId) {
return $http.get(baseUrl + '/' + cardId); },
save: function(card) {
var url = card.id ? baseUrl + '/' + card.id : baseU
return $http.post(url, card); },
query: function() {
return $http.get(baseUrl);
}, charge: function(card) {
return $http.post(baseUrl + '/' + card.id, card, {params: {charge: true}}); } }; }]);
myAppModule.factory('CreditCard', ['$resource', function($resource) {
return $resource('/usr/:userId/card/:cardId',
{userId: 123, cardId: '@id'},
{charge: {method: 'POST', params: {charge: true}, isArray: false}); }]);
十二、手机app开发的几种方式 ionic学习思路以及ionic新建的项目分析
1． 目前开发手机app的几种方式
（1）原生/Native：使用原生SDK开发App。优点不用说，当你有足够的资源，这是最理想的方式；缺点是对不同的 平台要分别开发，学习成本高,开发成本高、开发周期长、不易于web开发人员和企业建站公司转型；
（2）原生脚本/NativeScript：将原生API封装成JavaScript接口，这有点像前端的nodejs。NativeScript方式 与原生相比性能损失不大（据称只有10%左右），优点是开发语言统一使用JavaScript，缺点是 要针对不同的平台分别开发。
（3）原生+web/ Hybrid：使用原生技术开发，部分页面调用web。优点是比纯原生开发周期短， 页面更新方便，如支付宝，还有很多app的详情页面。缺点：需要原生和web配合。
（4）混合/Hybrid：使用web技术开发App，使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发， 避免了不同平台原生开发体系的学习，学习成本低，上手快、效率高,一次开发 微信 wap app全部搞定；缺点是app 在android平台性能上有一些损失，但是相信硬件的发展会接近原生。
——ionic属于hybrid开发模式，本质上是将移动web应用与浏览器打包,优点 MVC 基于angularjs，运行速度快 UI漂亮 开发简单 缺点：学习成本比其他的html5框架稍微高一些(比如jqmobi) 需要具备angularjs基础。 是否采用这种模式，需要根据具体情况综合考虑。
十三、ionic css布局介绍
1、布局模式
基本布局：标题/header、内容/content和页脚/footer。
? .bar.bar-header - 声明元素为标题区? .bar.bar-footer - 声明元素为底部? .content . scroll-content- 声明元素为内容区
2、.bar : 位置
ionic使用以下样式定义条块的位置：
? .bar-header - 置顶? .bar-subheader - header之下置顶? .bar-footer - 置底? .bar-subfooter - footer之上置底
3、.bar : 嵌入子元素
在ionic中，有三种.bar子元素的样式是预定义的：（1）标题文字 - 对包含标题文字的元素应用.title样式，通常使用h1元素；（2）按钮 - 对用作按钮的元素，应用.button样式，通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案；（3）工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常 使用div元素作为工具栏。
4、bar : 嵌入input
一种常见的UI模式是在标题栏中嵌入搜索栏。
在.bar元素中嵌入input元素，需要注意两点：1. 在条块元素上应用.item-input-inset样式2. 将input包裹在应用.item-input-wrapper样式的元素内
5、内容：.content和.scroll-content
ionic预定义了两个内容容器样式：? .content – 相对定位? .scroll-content - 绝对定位，内容元素占满整个屏幕
6、Ionic 色彩、图标和边距
（1）ionic定义了九种前景/背景/边框的色彩样式
（2）ionic 中的图标
使用图标很简单，在元素上声明以下两个CSS类即可：? .icon - 将元素声明为图标? .ion-{icon-name} - 声明要使用的具体图标
7、ionic界面组件列表
（1）列表 : .list
（2）成员容器 : .item
（3）.item : 嵌入文本：.item元素可以使用h1~h6/p标签插入不同规格的文本。
（4）.item : 嵌入图标
（5）.item : 嵌入头像
（6）.item : 嵌入缩略图
（7）.item : 嵌入大图 item-image
（8）.item card
要插入图标，需要满足两个条件：a. . card 可以让list和左右有一些边距b. 在. item-divider元素定义list的头和尾
8、ionic界面组件按钮
（1）按钮 : .button
（2）.button : 嵌入图标
（3）在列表中使用按钮
（4）button-block &——button显示成块元素
9、ionic界面组件 表单输入
（1）输入组件容器 : .item-input
（2）文本输入 : input[type="text"]
（3）文本输入：使用占位符做标签
（4）文本输入：堆叠式标签
（5）开关 : .toggle input[type="checkbox"]
（6）复选按钮
（7）单选按钮 : .item-radio input[type="radio"]
（8）滑动条 : .range input[type="range"]
（9）选择框 : .item-select select
10、界面组件选项卡
（1）选项卡 : .tabs
（2）tab-item : 使用图标
（3）.tab-item : 使用徽章
（4）.tabs : 顶部选项卡
（5）.tab-striped .tabs: 条带风格选项卡
11、栅格系统
（1）.col : 默认的定宽列
（2）.col-{width-percent} : 指定列宽
供我们快速指定列宽：.col-10 - 占据容器10%宽度
.col-20 - 占据容器20%宽度
.col-25 - 占据容器25%宽度
.col-33 - 占据容器33%宽度
.col-50 - 占据容器50%宽度
.col-67 - 占据容器67%宽度
.col-75 - 占据容器75%宽度
.col-80 - 占据容器80%宽度
.col-90 - 占据容器90%宽度
（3）.col-{width-percent} : 指定列宽
（4）.col-offset-{width-percent} : 指定列偏移
（5）.col-{align} : 列纵向对齐
.col-top - 让元素纵向顶对齐
.col-center - 让元素居中对齐
.col-bottom - 让元素向底对齐
十四、ionic&js指令布局介绍
1、ion-header-bar
align-title - 设置标题文字的对齐方式。允许值：left | right | center，分别对应左对齐、 右对齐和居中对齐。? no-tap-scroll - 当点击标题时，是否将内容区域自动滚动到最开始。允许值：true | false，默认为false。
2、ion-footer-bar
align-title - 设置标题文本的对齐方式。允许值：left | right | center 。
3、ion-content
4、ion-scroll
ion-scroll指令有两个常用的可选属性：? direction - 内容可以滚动的方向。允许值：x|y|xy。默认为 y。? zooming - 是否支持pinch-to-zoom(捏拉缩放)。允许值：true | false。
5、ion-refresher
ion-refresher指令有以下可选的属性：? on-refresh - 当用户向下拉动足够的距离并松开时，执行此表达式? on-pulling - 当用户开始向下拉动时，执行此表达式? pulling-text - 当用户向下拉动时，显示此文本? pulling-icon - 当用户向下拉动时，显示此图标? refreshing-icon - 当用户向下拉动并松开后，显示的等待图标。ionic推荐使用spinner 代替这个属性? spinner - 和refreshing-icon的作用一样，但spinner是基于SVG的动画? disable-pulling-rotation - 禁止下拉图标旋转动画
6、ion-infinite-scroll
ion-infinite-scroll指令有如下属性：? on-infinite - 必须。当滚动到底部时执行此表达式? distance - 可选。距底部距离百分比。当距离底部超过此数值时，执行on-infinite。默认为1%? icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性? spinner - 可选。载入时的spinner。默认是ionSpinner? immediate-check - 可选。是否在载入时立即检查滚动框范围
7、$ionicScrollDelegate
可以使用服务$ionicScrollDelegate，通过脚本控制滚动容器（ion-scroll或ion-content）。 $ionicScrollDelegate服务提供的常用方法如下：? resize()重新计算容器尺寸。当父元素大小变化时，应当调用此方法? scrollTop([shouldAnimate])滚动到内容顶部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程? scrollBottom([shouldAnimate])滚动到内容底部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程? scrollTo(left,top[,shouldAnimate])滚动到指定位置。left和top分别表示要滚动到的x坐标和y坐标? scrollBy(left,top[,shouldAnimate])滚动指定偏移量。left和top分别表示要滚动的x偏移量和y偏移量? getScrollPosition()读取当前视图位置。返回值为一个JSON对象，具有left和top属性，分别表示x和y坐标
阅读(...) 评论()问说网 / 蜀ICP备号