Cross-Platform Mobile Development with Ionic Framework and Angular

Embed Size (px)

Text of Cross-Platform Mobile Development with Ionic Framework and Angular

  • Markers on a DOM element (attribute, element name, comment or CSS class); "... a way to teach HTML new tricks." Anything (within your app) ; A function that's attached to a DOM element:

    a whole execution environment; a micro-application;

  • Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript

  • $ cordova platform add ios

    $ phonegap platform add ios



  • $ npm install -g cordova ionic

  • $ ionic start mySideMenu sidemenu$ cd mySideMenu tabs


  • $ ionic platform add ios$ ionic build ios$ ionic emulate ios$ ionic run ios

  • $ ionic serveRunning dev server: http://localhost:8100Running live reload server: http://localhost:35729Watching : [ 'www/**/*', '!www/lib/**/*' ]Ionic server commands, enter: restart or r to restart the client app from the root goto or g and a url to have the app navigate to the given url consolelogs or c to enable/disable console log output serverlogs or s to enable/disable server log output quit or q to shutdown the server and exit

  • $ gem install rb-fsevent$ sass --watch scss/app.scss:css/app.css

    // Customize Ionic variables pre-import$stable: #e8f8f8;

    @import www/lib/ionic/scss/ionic;

    // Add custom styles.highlighted { color: #ffff00; }


  • /* Empty. Add your own CSS if you like */.new-block { color: #f0f0f0;}

    // New block styles.parse { font-weight: bold; }


  • www/js/app.js

  • www/js/controllers.js

  • www/js/directives.js

  • www/index.html


  • @stauffermatt - Intro to Ionic Ionic Framework AngularJS Gulp Grunt Bower NodeJS