mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
Merge pull request #157 from driftyco/154-router-nav
wip - router based nav controller
This commit is contained in:
Max Lynch
19
js/ext/angular/test/directive/ionicNavRouter.unit.js
Normal file
19
js/ext/angular/test/directive/ionicNavRouter.unit.js
Normal file
@ -0,0 +1,19 @@
|
||||
describe('Angular Ionic Nav Router', function() {
|
||||
var modal, q;
|
||||
|
||||
beforeEach(module('ngRoute'));
|
||||
beforeEach(module('ionic.ui.navRouter'));
|
||||
|
||||
beforeEach(inject(function($compile, $rootScope, $controller) {
|
||||
compile = $compile;
|
||||
scope = $rootScope;
|
||||
}));
|
||||
|
||||
iit('Should init', function() {
|
||||
element = compile('<pane nav-router>' +
|
||||
'<nav-bar></nav-bar>' +
|
||||
'<ng-view></ng-view>' +
|
||||
'</pane>')(scope);
|
||||
|
||||
});
|
||||
});
|
||||
149
js/ext/angular/test/navAndTabs.html
Normal file
149
js/ext/angular/test/navAndTabs.html
Normal file
@ -0,0 +1,149 @@
|
||||
<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 href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pane nav-router animation="slide-left-right">
|
||||
<nav-bar class="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 hide-back-button="true">
|
||||
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
|
||||
|
||||
<!-- 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" 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 = [
|
||||
{
|
||||
text: 'Adopt',
|
||||
tap: function(e) {
|
||||
console.log('ADOPT TAPPED');
|
||||
},
|
||||
type: 'button-clear'
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
js/ext/angular/test/navRouter.html
Normal file
70
js/ext/angular/test/navRouter.html
Normal file
@ -0,0 +1,70 @@
|
||||
<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 href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
|
||||
<script src="../../../../dist/js/ionic.js"></script>
|
||||
<script src="../../../../dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<pane nav-router animation="slide-left-right">
|
||||
<nav-bar class="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'">
|
||||
<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>
|
||||
</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',
|
||||
});
|
||||
|
||||
// configure html5 to get links working on jsfiddle
|
||||
//$locationProvider.html5Mode(true);
|
||||
|
||||
})
|
||||
|
||||
.controller('Page1Ctrl', function($scope) {
|
||||
$scope.num = Math.floor(Math.random() * 100);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user