Last active
September 16, 2016 13:57
-
-
Save drhanlau/38e2b0a6dd3377277eee7c93774bdd01 to your computer and use it in GitHub Desktop.
Ionic Lab 1 Code Snippet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Ionic Starter App | |
| // 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' | |
| angular.module('yulpApp', ['ionic']) | |
| .run(function($ionicPlatform) { | |
| $ionicPlatform.ready(function() { | |
| if(window.cordova && window.cordova.plugins.Keyboard) { | |
| // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard | |
| // for form inputs) | |
| cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); | |
| // Don't remove this line unless you know what you are doing. It stops the viewport | |
| // from snapping when text inputs are focused. Ionic handles this internally for | |
| // a much nicer keyboard experience. | |
| cordova.plugins.Keyboard.disableScroll(true); | |
| } | |
| if(window.StatusBar) { | |
| StatusBar.styleDefault(); | |
| } | |
| }); | |
| }) | |
| .config(function($stateProvider, $urlRouterProvider) { | |
| $stateProvider | |
| .state('home', { | |
| url: '/home', | |
| templateUrl: 'views/home/home.html', | |
| abstract: true | |
| }) | |
| .state('home.feed', { | |
| url: '/feed', // url will be /home/feed | |
| views: { | |
| 'tab-feed': { | |
| templateUrl: 'views/home/feed.html' | |
| } | |
| } | |
| }).state('home.search', { | |
| url: '/search', // url will be /home/search | |
| views: { | |
| 'tab-search': { | |
| templateUrl: 'views/home/search.html' | |
| } | |
| } | |
| }).state('home.settings', { | |
| url: '/settings', // url will be /home/settings | |
| views: { // named views | |
| 'tab-settings': { | |
| templateUrl: 'views/home/settings.html' | |
| } | |
| } | |
| }); | |
| // as you can see, home.feed, home.search and home.settings | |
| // have a parent home | |
| // if none of the above states are matched, use this as the fallback | |
| $urlRouterProvider.otherwise('/home/feed'); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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. | |
| icon-off and icon-on both represent the icons that are used when the tabs | |
| are being checked or unchecked. | |
| --> | |
| <ion-tabs class="tabs-icon-only tabs-color-active-positive tabs-icon-only"> | |
| <!-- Feed Tab --> | |
| <ion-tab title="Feed" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/home/feed"> | |
| <!-- tab-feed is the name of the template that you are going to render --> | |
| <ion-nav-view name="tab-feed"></ion-nav-view> | |
| </ion-tab> | |
| <!-- Search Tab --> | |
| <ion-tab title="Search" icon-off="ion-ios-search" icon-on="ion-ios-search-strong" href="#" ui-sref="home.search"> | |
| <!-- tab-search is the name of the template that you are going to render --> | |
| <ion-nav-view name="tab-search"></ion-nav-view> | |
| </ion-tab> | |
| <!-- Settings Tab --> | |
| <ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#" ui-sref="home.settings"> | |
| <!-- tab-settings is the name of the template that you are going to render --> | |
| <ion-nav-view name="tab-settings"></ion-nav-view> | |
| </ion-tab> | |
| </ion-tabs> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 rel="manifest" href="manifest.json"> | |
| <!-- un-comment this code to enable service worker | |
| <script> | |
| if ('serviceWorker' in navigator) { | |
| navigator.serviceWorker.register('service-worker.js') | |
| .then(() => console.log('service worker installed')) | |
| .catch(err => console.log('Error', err)); | |
| } | |
| </script>--> | |
| <link href="lib/ionic/css/ionic.css" rel="stylesheet"> | |
| <link href="css/style.css" rel="stylesheet"> | |
| <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above | |
| <link href="css/ionic.app.css" rel="stylesheet"> | |
| --> | |
| <!-- ionic/angularjs js --> | |
| <script src="lib/ionic/js/ionic.bundle.js"></script> | |
| <!-- cordova script (this will be a 404 during development) --> | |
| <script src="cordova.js"></script> | |
| <!-- your app's js --> | |
| <script src="js/app.js"></script> | |
| </head> | |
| <body ng-app="yulpApp"> | |
| <!-- | |
| The nav bar that will be updated as we navigate between views. | |
| --> | |
| <ion-nav-bar class="bar-stable"> | |
| <ion-nav-back-button> | |
| </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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment