├── LICENSE
├── README.md
├── index.html
└── js
└── app.js
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Rakshith
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ionic-angularjs-kitchensink
2 | ===========================
3 |
4 | Simple Kitchen Sink App developed using Ionic Framework + AngularJS
5 |
6 | Features
7 | -
8 | - Tab View navigation
9 | - Side Menu navigation
10 | - List View navigation
11 | - Slide / Swipe navigation
12 | - Popup alerts and Actionsheet
13 | - Button types
14 | - Form elements
15 | - Keyboard input types
16 | - Building native packaged app using [Cordova](https://github.com/krisrak/ionic-angularjs-intelxdk-seed)
17 |
18 | 
19 |
20 | Building Native packaged apps with Cordova
21 | -
22 | Refer to the Ionic-AngularJS-IntelXDK-Seed project to get started with building native packaged apps using [IntelXDK](http://xdk.intel.com):
23 |
24 | [ionic-angularjs-intelxdk-seed](https://github.com/krisrak/ionic-angularjs-intelxdk-seed)
25 |
26 | Intel XDK will help you to easily build apps for iPhone/iPad, Android, Windows Phone and more stores using any HTML5 project.
27 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Ionic-AngularJS Kitchen Sink
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
60 |
61 |
91 |
92 |
124 |
125 |
132 |
133 |
202 |
203 |
274 |
275 |
314 |
315 |
341 |
342 |
359 |
360 |
382 |
383 |
384 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | angular.module('ionicApp', ['ionic'])
2 |
3 | .config(function ($stateProvider, $urlRouterProvider) {
4 |
5 | $stateProvider
6 | .state('menu', {
7 | url: "/menu",
8 | abstract: true,
9 | templateUrl: "menu.html",
10 | controller: 'MenuCtrl'
11 | })
12 | .state('menu.tabs', {
13 | url: "/tab",
14 | views: {
15 | 'menuContent' :{
16 | templateUrl: "tabs.html"
17 | }
18 | }
19 | })
20 | .state('menu.tabs.buttons', {
21 | url: "/buttons",
22 | views: {
23 | 'buttons-tab': {
24 | templateUrl: "buttons.html",
25 | controller: 'ButtonsTabCtrl'
26 | }
27 | }
28 | })
29 | .state('menu.tabs.list', {
30 | url: "/list",
31 | views: {
32 | 'list-tab': {
33 | templateUrl: "list.html",
34 | controller: 'ListCtrl'
35 | }
36 | }
37 | })
38 | .state('menu.tabs.item', {
39 | url: "/item",
40 | views: {
41 | 'list-tab': {
42 | templateUrl: "item.html"
43 | }
44 | }
45 | })
46 | .state('menu.tabs.form', {
47 | url: "/form",
48 | views: {
49 | 'form-tab': {
50 | templateUrl: "form.html"
51 | }
52 | }
53 | })
54 | .state('menu.keyboard', {
55 | url: "/keyboard",
56 | views: {
57 | 'menuContent': {
58 | templateUrl: "keyboard.html"
59 | }
60 | }
61 | })
62 | .state('menu.slidebox', {
63 | url: "/slidebox",
64 | views: {
65 | 'menuContent': {
66 | templateUrl: "slidebox.html",
67 | controller: 'SlideboxCtrl'
68 | }
69 | }
70 | })
71 | .state('menu.about', {
72 | url: "/about",
73 | views: {
74 | 'menuContent': {
75 | templateUrl: "about.html"
76 | }
77 | }
78 | });
79 |
80 | $urlRouterProvider.otherwise("menu/tab/buttons");
81 |
82 | })
83 |
84 | .controller('ListCtrl', function ($scope) {
85 |
86 | $scope.data = {
87 | showDelete: false
88 | };
89 |
90 | $scope.itemButtons = [
91 | {
92 | text: 'Delete',
93 | type: 'button-assertive',
94 | onTap: function (item) {
95 | alert('Delete Item: ' + item.id + ' ?');
96 | }
97 | }
98 | ];
99 |
100 | $scope.onItemDelete = function (item) {
101 | $scope.items.splice($scope.items.indexOf(item), 1);
102 | };
103 |
104 | $scope.items = [
105 | {
106 | id: 1
107 | },
108 | {
109 | id: 2
110 | },
111 | {
112 | id: 3
113 | },
114 | {
115 | id: 4
116 | },
117 | {
118 | id: 5
119 | },
120 | {
121 | id: 6
122 | },
123 | {
124 | id: 7
125 | },
126 | {
127 | id: 8
128 | },
129 | {
130 | id: 9
131 | },
132 | {
133 | id: 10
134 | }
135 | ];
136 |
137 | })
138 |
139 | .controller('ButtonsTabCtrl', function ($scope, $ionicPopup, $ionicActionSheet, $ionicModal) {
140 | $scope.showPopup = function () {
141 | $ionicPopup.alert({
142 | title: 'Popup',
143 | content: 'This is ionic popup alert!'
144 | });
145 | };
146 | $scope.showActionsheet = function () {
147 | $ionicActionSheet.show({
148 | titleText: 'Ionic ActionSheet',
149 | buttons: [
150 | {
151 | text: 'Facebook'
152 | },
153 | {
154 | text: 'Twitter'
155 | },
156 | ],
157 | destructiveText: 'Delete',
158 | cancelText: 'Cancel',
159 | cancel: function () {
160 | console.log('CANCELLED');
161 | },
162 | buttonClicked: function (index) {
163 | console.log('BUTTON CLICKED', index);
164 | return true;
165 | },
166 | destructiveButtonClicked: function () {
167 | console.log('DESTRUCT');
168 | return true;
169 | }
170 | });
171 | };
172 | })
173 |
174 | .controller('SlideboxCtrl', function($scope, $ionicSlideBoxDelegate) {
175 | $scope.nextSlide = function() {
176 | $ionicSlideBoxDelegate.next();
177 | }
178 | })
179 |
180 | .controller('MenuCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
181 | $ionicModal.fromTemplateUrl('modal.html', function (modal) {
182 | $scope.modal = modal;
183 | }, {
184 | animation: 'slide-in-up'
185 | });
186 | })
187 |
188 | .controller('AppCtrl', function() {
189 |
190 | ionic.Platform.ready(function() {
191 |
192 | });
193 |
194 | });
195 |
196 |
--------------------------------------------------------------------------------