mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
update w/ ui-router
This commit is contained in:
@@ -19,6 +19,7 @@
|
||||
<script src="/dist/js/angular/angular-touch.js"></script>
|
||||
<script src="/dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="/dist/js/angular/angular-resource.js"></script>
|
||||
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
<script src="/dist/js/angular/angular-route.js"></script>
|
||||
<script src="/dist/js/angular/angular-touch.js"></script>
|
||||
<script src="/dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
<!-- your app's script -->
|
||||
@@ -24,20 +25,19 @@
|
||||
|
||||
<!--
|
||||
'listExample' is the name of this angular module (app.js)
|
||||
'nav-router' attribute updates the nav-bar title and animations as you navigate
|
||||
'animation' attribute sets which type of animations to use
|
||||
-->
|
||||
<body ng-app="listExample" nav-router animation="slide-left-right-ios7">
|
||||
<body ng-app="listExample" animation="slide-left-right-ios7">
|
||||
|
||||
<!-- The nav bar that will be updated as we navigate -->
|
||||
<nav-bar
|
||||
class="nav-title-slide-ios7"
|
||||
animation="nav-title-slide-ios7"
|
||||
type="bar-positive"
|
||||
back-button-type="button-icon"
|
||||
back-button-icon="ion-arrow-left-c"></nav-bar>
|
||||
|
||||
<!-- where the content of each page will be rendered -->
|
||||
<ng-view></ng-view>
|
||||
<ui-view animation="slide-left-right"></ui-view>
|
||||
|
||||
|
||||
<!--
|
||||
@@ -51,7 +51,7 @@
|
||||
The MovieIndexCtrl gets data from the MovieService (service.js)
|
||||
-->
|
||||
<script type="text/ng-template" id="/index.html">
|
||||
<nav-page title="title">
|
||||
<view title="title">
|
||||
<content has-header="true">
|
||||
|
||||
<list>
|
||||
@@ -61,7 +61,7 @@
|
||||
</list>
|
||||
|
||||
</content>
|
||||
</nav-page>
|
||||
</view>
|
||||
</script>
|
||||
|
||||
<!--
|
||||
@@ -70,7 +70,7 @@
|
||||
The MovieDetailCtrl gets data from the MovieService (service.js)
|
||||
-->
|
||||
<script type="text/ng-template" id="/movie.html">
|
||||
<nav-page title="title">
|
||||
<view title="title">
|
||||
<content has-header="true" padding="true">
|
||||
<h1>{{ movie.title }}</h1>
|
||||
<dl>
|
||||
@@ -90,7 +90,7 @@
|
||||
<dd>{{ movie.rating }}</dd>
|
||||
</dl>
|
||||
</content>
|
||||
</nav-page>
|
||||
</view>
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -3,34 +3,29 @@
|
||||
// the 2nd parameter is an array or 'requires'
|
||||
// 'listExample.services' is found in services.js
|
||||
// 'listExample.controllers' is found in controllers.js
|
||||
angular.module('listExample', ['ionic', 'ngRoute', 'ngAnimate', 'listExample.services', 'listExample.controllers'])
|
||||
angular.module('listExample', ['ionic', 'listExample.services', 'listExample.controllers'])
|
||||
|
||||
.config(function ($compileProvider){
|
||||
// Needed for routing to work
|
||||
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
|
||||
})
|
||||
|
||||
.config(function($routeProvider, $locationProvider) {
|
||||
.config(function($stateProvider, $urlRouterProvider) {
|
||||
|
||||
// Set up the initial routes that our app will respond to.
|
||||
// These are then tied up to our nav router which animates and
|
||||
// updates a navigation bar
|
||||
$routeProvider.when('/', {
|
||||
templateUrl: '/index.html',
|
||||
controller: 'MovieIndexCtrl'
|
||||
});
|
||||
$stateProvider
|
||||
.state('movieIndex', {
|
||||
url: '/',
|
||||
templateUrl: '/index.html',
|
||||
controller: 'MovieIndexCtrl'
|
||||
})
|
||||
|
||||
// if the url matches something like /movie/88 then this route
|
||||
// will fire off the MovieDetailCtrl (controllers.js)
|
||||
$routeProvider.when('/movie/:movieId', {
|
||||
templateUrl: '/movie.html',
|
||||
controller: 'MovieDetailCtrl'
|
||||
});
|
||||
// if the url matches something like /movie/88 then this route
|
||||
// will fire off the MovieDetailCtrl (controllers.js)
|
||||
.state('movieDetail', {
|
||||
url: '/movie/:movieId',
|
||||
templateUrl: '/movie.html',
|
||||
controller: 'MovieDetailCtrl'
|
||||
});
|
||||
|
||||
// if none of the above routes are met, use this fallback
|
||||
$routeProvider.otherwise({
|
||||
redirectTo: '/'
|
||||
});
|
||||
$urlRouterProvider.otherwise('/');
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -13,8 +13,8 @@ angular.module('listExample.controllers', [])
|
||||
})
|
||||
|
||||
// Controller that shows more detailed info about a movie
|
||||
.controller('MovieDetailCtrl', function($scope, $routeParams, MovieService) {
|
||||
.controller('MovieDetailCtrl', function($scope, $stateParams, MovieService) {
|
||||
// "MovieService" is a service returning mock data (services.js)
|
||||
$scope.movie = MovieService.get($routeParams.movieId);
|
||||
$scope.movie = MovieService.get($stateParams.movieId);
|
||||
$scope.title = "Movie Info";
|
||||
});
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
<script src="/dist/js/angular/angular-route.js"></script>
|
||||
<script src="/dist/js/angular/angular-touch.js"></script>
|
||||
<script src="/dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
<!-- google maps javascript -->
|
||||
|
||||
@@ -105,6 +105,7 @@
|
||||
<script src="/dist/js/angular/angular-route.js"></script>
|
||||
<script src="/dist/js/angular/angular-touch.js"></script>
|
||||
<script src="/dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
@@ -16,6 +16,7 @@
|
||||
<script src="/dist/js/angular/angular-route.js"></script>
|
||||
<script src="/dist/js/angular/angular-touch.js"></script>
|
||||
<script src="/dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<script src="/dist/js/angular/angular-resource.js"></script>
|
||||
<script src="/dist/js/angular/angular-touch.js"></script>
|
||||
<script src="/dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
<script src="services.js"></script>
|
||||
|
||||
@@ -19,119 +19,123 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body ng-controller="ActionCtrl">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
<content>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div style="background-color: #eee" ng-click="show()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button ng-click="show()" class="button">Show</button>
|
||||
<button ng-click="show()" class="button">Show</button>
|
||||
|
||||
</content>
|
||||
<script>
|
||||
angular.module('actionTest', ['ionic', 'ngAnimate'])
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
.slider-slide {
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic.ui.checkbox', 'ionic.ui.content', 'ngAnimate', 'ngTouch'])
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
.reveal-animation {
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body ng-controller="ThisCtrl">
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
.reveal-animation {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
#box {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body ng-controller="TestCtrl">
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic']);
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<script>
|
||||
angular.module('ionic.example', ['ionic.service.loading'])
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1,154 +0,0 @@
|
||||
<html ng-app="navTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Nav Bars And Tabs</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-animate.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pane nav-router animation="slide-left-right">
|
||||
<nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
|
||||
<ng-view></ng-view>
|
||||
</pane>
|
||||
|
||||
<script id="page1.html" type="text/ng-template">
|
||||
<nav-page>
|
||||
|
||||
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animate-nav="false">
|
||||
|
||||
<!-- Pets tab -->
|
||||
<tab title="Pets" icon="icon ion-home" ng-controller="PetsCtrl">
|
||||
<content has-header="true" has-tabs="true">
|
||||
<list>
|
||||
<link-item ng-repeat="pet in pets" type="item-text-wrap" href="#/pet/{{pet.id}}">
|
||||
<h3>{{pet.title}}</h3>
|
||||
<p>{{pet.description}}</p>
|
||||
</item>
|
||||
</link-item>
|
||||
</list>
|
||||
</content>
|
||||
</tab>
|
||||
|
||||
<!-- Adoption tab -->
|
||||
<tab title="Adopt" icon="icon ion-heart" ng-controller="AdoptCtrl" left-buttons="leftButtons" right-buttons="buttons">
|
||||
<content has-header="true" has-tabs="true">
|
||||
<div class="padding">
|
||||
<h2>Adopt a pet today.</h2>
|
||||
</div>
|
||||
<div class="list list-inset">
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Your name</span>
|
||||
<input type="text">
|
||||
</label>
|
||||
<label class="item item-input">
|
||||
<span class="input-label">Your email</span>
|
||||
<input type="password">
|
||||
</label>
|
||||
<label class="item item-input">
|
||||
<textarea placeholder="Any more info?"></textarea>
|
||||
</label>
|
||||
<button class="button button-positive button-block">Adopt</button>
|
||||
</div>
|
||||
</content>
|
||||
</tab>
|
||||
|
||||
<!-- Home tab -->
|
||||
<tab title="About" icon="icon ion-search">
|
||||
<content has-header="true" has-tabs="true" padding="true">
|
||||
<h3>About this app</h3>
|
||||
<p>
|
||||
This is a sample seed project for the Ionic Framework. Please change it to match your needs.
|
||||
</p>
|
||||
</content>
|
||||
</tab>
|
||||
|
||||
</tabs>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="pet.html" type="text/ng-template">
|
||||
<nav-page title="pet.title" ng-controller="PetCtrl">
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page2.html" type="text/ng-template">
|
||||
<nav-page title="'Beets'">
|
||||
<h1>Page 2</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page3">Next</a>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page3.html" type="text/ng-template">
|
||||
<nav-page title="'Battlestar Galactica'">
|
||||
<h1>Page 3</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic'])
|
||||
|
||||
|
||||
.config(function($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/', {
|
||||
templateUrl: 'page1.html',
|
||||
controller: 'Page1Ctrl'
|
||||
});
|
||||
|
||||
$routeProvider.when('/page2', {
|
||||
templateUrl: 'page2.html',
|
||||
});
|
||||
|
||||
$routeProvider.when('/page3', {
|
||||
templateUrl: 'page3.html',
|
||||
});
|
||||
|
||||
$routeProvider.when('/pet/:petId', {
|
||||
templateUrl: 'pet.html',
|
||||
controller: 'PetCtrl'
|
||||
});
|
||||
|
||||
|
||||
// configure html5 to get links working on jsfiddle
|
||||
//$locationProvider.html5Mode(true);
|
||||
|
||||
})
|
||||
|
||||
.controller('Page1Ctrl', function($scope) {
|
||||
$scope.num = Math.floor(Math.random() * 100);
|
||||
})
|
||||
|
||||
.controller('PetsCtrl', function($scope, $routeParams) {
|
||||
$scope.pets = [
|
||||
{ id: 1, title: 'Cat', description: 'Furry little feline' }
|
||||
];
|
||||
})
|
||||
|
||||
.controller('PetCtrl', function($scope, $routeParams) {
|
||||
$scope.pet = {
|
||||
title: 'Cat'
|
||||
}
|
||||
})
|
||||
|
||||
.controller('AdoptCtrl', function($scope) {
|
||||
$scope.buttons = [
|
||||
{
|
||||
content: 'Adopt',
|
||||
tap: function(e) {
|
||||
console.log('ADOPT TAPPED');
|
||||
},
|
||||
type: 'button-clear'
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,93 +0,0 @@
|
||||
<html ng-app="navTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Nav Bars</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-animate.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pane nav-router animation="slide-left-right">
|
||||
<nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
|
||||
<ng-view></ng-view>
|
||||
</pane>
|
||||
|
||||
<script id="page1.html" type="text/ng-template">
|
||||
<nav-page title="'Bears'" hide-back-button="true" right-buttons="rightButtons" hide-nav-bar="true">
|
||||
<content has-header="true">
|
||||
<h1>Page 1</h1>
|
||||
<span>{{num}}</span>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page2">Next</a>
|
||||
</content>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page2.html" type="text/ng-template">
|
||||
<nav-page title="'Beets'">
|
||||
<content has-header="true">
|
||||
<h1>Page 2</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page3">Next</a>
|
||||
</content>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page3.html" type="text/ng-template">
|
||||
<nav-page title="'Battlestar Galactica'">
|
||||
<content has-header="true">
|
||||
<h1>Page 3</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
</content>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic'])
|
||||
|
||||
|
||||
.config(function($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/cats', {
|
||||
templateUrl: 'page1.html',
|
||||
controller: 'Page1Ctrl'
|
||||
});
|
||||
|
||||
$routeProvider.when('/page2', {
|
||||
templateUrl: 'page2.html',
|
||||
});
|
||||
|
||||
$routeProvider.when('/page3', {
|
||||
templateUrl: 'page3.html',
|
||||
});
|
||||
|
||||
$routeProvider.otherwise({
|
||||
redirectTo: '/cats'
|
||||
});
|
||||
|
||||
// configure html5 to get links working on jsfiddle
|
||||
//$locationProvider.html5Mode(true);
|
||||
|
||||
})
|
||||
|
||||
.controller('Page1Ctrl', function($scope) {
|
||||
$scope.num = Math.floor(Math.random() * 100);
|
||||
|
||||
$scope.rightButtons = [
|
||||
{
|
||||
content: 'Hello',
|
||||
tap: function(e) {
|
||||
console.log('Click button');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,93 +0,0 @@
|
||||
<html ng-app="navTest">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Nav Bars</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-animate.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pane nav-router animation="slide-left-right">
|
||||
<nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
|
||||
<ng-view></ng-view>
|
||||
</pane>
|
||||
|
||||
<script id="page1.html" type="text/ng-template">
|
||||
<nav-page title="'Bears'" hide-back-button="true" right-buttons="rightButtons" hide-nav-bar="true">
|
||||
<content has-header="true">
|
||||
<h1>Page 1</h1>
|
||||
<span>{{num}}</span>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page2">Next</a>
|
||||
</content>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page2.html" type="text/ng-template">
|
||||
<nav-page title="'Beets'">
|
||||
<content has-header="true">
|
||||
<h1>Page 2</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
<a class="button button-assertive" href="#/page3">Next</a>
|
||||
</content>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script id="page3.html" type="text/ng-template">
|
||||
<nav-page title="'Battlestar Galactica'">
|
||||
<content has-header="true">
|
||||
<h1>Page 3</h1>
|
||||
<a class="button button-pure" nav-back>Back</a>
|
||||
</content>
|
||||
</nav-page>
|
||||
</script>
|
||||
<script>
|
||||
angular.module('navTest', ['ionic'])
|
||||
|
||||
|
||||
.config(function($routeProvider, $locationProvider) {
|
||||
$routeProvider.when('/cats', {
|
||||
templateUrl: 'page1.html',
|
||||
controller: 'Page1Ctrl'
|
||||
});
|
||||
|
||||
$routeProvider.when('/page2', {
|
||||
templateUrl: 'page2.html',
|
||||
});
|
||||
|
||||
$routeProvider.when('/page3', {
|
||||
templateUrl: 'page3.html',
|
||||
});
|
||||
|
||||
$routeProvider.otherwise({
|
||||
redirectTo: '/cats'
|
||||
});
|
||||
|
||||
// configure html5 to get links working on jsfiddle
|
||||
//$locationProvider.html5Mode(true);
|
||||
|
||||
})
|
||||
|
||||
.controller('Page1Ctrl', function($scope) {
|
||||
$scope.num = Math.floor(Math.random() * 100);
|
||||
|
||||
$scope.rightButtons = [
|
||||
{
|
||||
content: 'Hello',
|
||||
tap: function(e) {
|
||||
console.log('Click button');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,6 +13,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
.reveal-animation {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body ng-controller="ThisCtrl">
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
.slider-slide {
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -50,6 +50,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body ng-controller="RootCtrl">
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
<script src="../../../../dist/js/angular/angular-route.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-touch.js"></script>
|
||||
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
|
||||
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user