<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic@1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
/* Styles go here */
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
// Ionic Starter App, v0.9.20
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
StatusBar.styleDefault();
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.todoCtrl', {
url: '/todoCtrl',
views: {
'tab-todoCtrl': {
templateUrl: 'tab-todolist.html',
controller: 'TodoCtrl'
}
}
})
.state('tab.people', {
url: '/people',
views: {
'tab-people': {
templateUrl: 'tab-people.html',
controller: 'PeopleCtrl'
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'tab-friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tab.friend-detail', {
url: '/friend/:friendId',
views: {
'tab-friends': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tab.setting', {
url: '/setting',
views: {
'tab-setting': {
templateUrl: 'tab-setting.html',
controller: 'SettingCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
This is a blank ionic framework starter template.
https://github.com/driftyco/ionic-starter-tabs
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
})
.controller('TodoCtrl', function($scope) {
$scope.newItem = '';
$scope.todoList = [];
$scope.addItem = function(){
if(this.newItem){
this.todoList.push({label:this.newItem});
this.newItem = '';
}
}
})
.controller('PeopleCtrl', function($scope) {
})
.controller('FriendsCtrl', function($scope, Friends) {
$scope.friends = Friends.all();
})
.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
$scope.friend = Friends.get($stateParams.friendId);
})
.controller('SettingCtrl', function($scope) {
});
//bill test controller contructor
function todoCtrl($scope) {
//新增的代辦事項(String)
$scope.newItem = '';
//所有的代辦事項(array)
$scope.todoList = [];
$scope.addItem = function(){
if(this.newItem){
this.todoList.push({label:this.newItem});
this.newItem = '';
}
}
}
angular.module('starter.services', [])
/**
* A simple example service that returns some data.
*/
.factory('Friends', function() {
// Might use a resource here that returns a JSON array
// Some fake testing data
var friends = [
{ id: 0, name: '超級大兔如' },
{ id: 1, name: '無敵小麥' },
{ id: 2, name: '致宇' },
{ id: 3, name: '路跑Yon' },
{ id: 4, name: '結婚阿飆' },
{ id: 5, name: 'mandy' },
{ id: 6, name: '懿首' },
{ id: 7, name: 'rock' },
{ id: 8, name: '專利鴻銘' },
{ id: 9, name: '沙嘟拉' }
];
return {
all: function() {
return friends;
},
get: function(friendId) {
// Simple index lookup
return friends[friendId];
}
}
});
<!--
This template loads for the 'tab.friend-detail' state (app.js)
'firend' is a $scope variable created in the FriendsCtrl controller (controllers.js)
The FriendsCtrl pulls data from the Friends service (service.js)
The Friends service returns an array of friend data
-->
<ion-view title="{{friend.name}}">
<ion-content has-header="true" padding="true">
</ion-content>
</ion-view>
<ion-view title="Setting">
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios7-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
<div class="item item-divider">
rest settings
</div>
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-share"></i>
Sharing
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-paper-airplane"></i>
Paper airplane
<i class="icon ion-compose"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-pound"></i>
Pound
<span class="item-note">
Pricing
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-briefcase"></i>
Briefcase
<span class="badge badge-assertive">0</span>
</a>
</div>
</ion-view>
<ion-view title="home">
<ion-content class="has-header padding">
<!-- Bill的註解.....add code //-->
<h2>Welcome to Bill's App</h2>
<h3>Good Morning</h3>
<h1>Home</h1>
<div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<div class="item item-divider">
Smart home control selections
</div>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-ios7-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios7-sunny"></i>
</div>
<div class="item range range-balanced">
<i class="icon ion-archive"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-radio-waves"></i>
</div>
<div class="item range range-assertive">
<i class="icon ion-medkit"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-speakerphone"></i>
</div>
<div class="item range range-assertive">
<i class="icon ion-link"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-mic-a"></i>
</div>
</div>
<div class="item item-divider">
Play ground control selections
</div>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-key"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-locked"></i>
</div>
<div class="item range range-balanced">
<i class="icon ion-pinpoint"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-radio-waves"></i>
</div>
<div class="item range range-assertive">
<i class="icon ion-arrow-graph-up-right"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-videocamera"></i>
</div>
<div class="item range range-assertive">
<i class="icon ion-compass"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-xbox"></i>
</div>
</div>
</ion-content>
</ion-view>
<ion-view title="Friends">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
{{friend.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top">
<!-- Home Tab -->
<ion-tab title="Home" icon="icon ion-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- bill test TodoList Tab -->
<ion-tab title="ToDoList" icon="icon ion-android-note" href="#/tab/todoCtrl">
<ion-nav-view name="tab-todoCtrl"></ion-nav-view>
</ion-tab>
<!-- People Tab -->
<ion-tab title="People" icon="icon ion-person" href="#/tab/people">
<ion-nav-view name="tab-people"></ion-nav-view>
</ion-tab>
<!-- Friends Tab -->
<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-tab>
<!-- Setting Tab -->
<ion-tab title="Setting" icon="icon ion-gear-b" href="#/tab/setting">
<ion-nav-view name="tab-setting"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-view title="People">
<h2>people</h2>
<ion-content class="has-header padding">
<h1>Your Setting</h1>
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios7-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
<div class="item item-divider">
More settings
</div>
<a class="item item-icon-left" href="#">
<i class="icon ion-camera"></i>
snapshot
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-folder"></i>
Folder
<i class="icon ion-ios7-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-star"></i>
Favorite List
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-clipboard"></i>
File
<span class="badge badge-assertive">0</span>
</a>
</div>
<a href="#/tab/dash" class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
</ion-content>
</ion-view>
<ion-view title="To Do List">
<h1>To do List</h1>
<header ng-controller="TodoCtrl">
<form ng-submit="addItem()">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" ng-model="newItem" name="newItem" placeholder="請輸入代辦事項">
</label>
<button class="button button-small">
新增待辦事項
</button>
</div>
</form>
<ul>
<li ng-repeat="item in todoList">{{item.label}}</li>
</ul>
</header>
</ion-view>