Angularjs Tutorial for Beginners

Tutorial
Develop Mobile Applications with AngularJS

Developing Mobile Applications
Training in Bangalore
Native Look & Feel
Web-Technologies (HTML, JavaScript, CSS)
Setup
Architecture
Development
APIs
WHAT IT'S ALL ABOUT

Installed and in Path:
Node.JS - node - brew install node
Node Package Manager - npm
Git - git - brew install git
Ruby - ruby
Compass - compass - [sudo] gem install compass

Optional:
Android SDK
developer.android.com/sdk (http://developer.android.com/sdk/index.html) or brew install android
Launch Android SDK Manager ( android or Help (http://developer.android.com/tools/help/sdk-manager.html))
Install Following Packages:
Xcode and iOS 7 Simulator on MacOS

Apache Cordova - [sudo] npm install -g cordova
Ionic - [sudo] npm install -g ionic
Optional:
Ripple Emulator - [sudo] npm install -g ripple-emulator
iOS Sim - [sudo] npm install -g ios-sim

WebView
Mobile OS
AngularJS
THE BIG PICTURE
Application
Ionic
Cordova

Better Known as PhoneGap (http://phonegap.com/)
Nitobi Adobe Apache
Native Wrapper for Web-App
Mixing Native- and Web-Code
Plugins for Feature Access
cordova.apache.org (http://cordova.apache.org/)
Current Version: 3.4.1
License: Apache 2.0

229 Plugins
Native JavaScript
org.apache.cordova
Camera
Battery Status
Console
Contacts
Device Information + Motion + Orientation
Dialogs
File + File Transfer
CORDOVA PLUGINS

Distributioin of Cordova
Services like PhoneGap Build
phonegap.com (http://phonegap.com/)
Developed by Adobe
License: Apache 2.0

HTML enhanced for web apps!
angularjs.org
JavaScript-Framework for Rich Browser Applications
Brings Core UI Concepts like MVC to Browser
Extends HTML instead of abstract it
Lets You Extend HTML to Your Needs (Directives)
angularjs.org (https://angularjs.org/)
Current Version: 1.2.16
License: MIT
by

Frontend-Framework
CSS Optimized for Mobile App
AngularJS Directives and Services
Touch Support
Navigation
Menus & Dialogs
Cordova Plugin(s)
ionicframework.com(http://ionicframework.com/)
Current Version: 1.0.0-beta.6
License: MIT

Similar to Ionic
Frontend-Framework
Cordova and AngularJS based
Directives and Services
onsenui.io (http://onsenui.io/)
Current Version 1.0.4
License: Apache 2.0

Create and Navigate to an Empty Folder
Run ionic start myFirstApp tabs to Create a New Ionic Application
Navigate to Project Folder cd myFirstApp
Run ionic serve (Ignore Error on Console)
Browser to http://localhost:8100 (http://localhost:8100)
Play around with the App!
Kill Dev-Server in Console with CTRL+C
Do the Same Again with ionic start mySecondApp sidemenu
HANDSON

PROJECT STRUCTURE
Cordova
hooks
merges
platforms
plugins
www
config.xml
Ionic
ionic.project
Custom
scss
bower.json
Gulpfile.js
package.json

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/w
idgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html" />
<access origin="*" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />

<preference name="BackupWebStorage" value="none" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
</widget>
CONFIG.XML

Required to Configure and Build Cordova Project
Run cordova to See All Available Commands
Commands to Configure Project
Commands to Build Project
CORDOVA CLI

Ionic Consists of Two Things:
Framework (also Available via Bower)
Command Line Interface (via NPM)
CLI Not Required to Develop Ionic App
Different Versioning
Run ionic to See All Available Commands
Shortcuts to Cordova CLI
create and serve
login and upload
IONIC CLI

Node Package, Installed via npm install -g ripple-emulator
Emulates Android Device in Browser
Requires Android as Platform
Start Server and Open Browser: ripple emulate
RIPPLE EMULATOR

Android
Android SDK Required
cordova platform add android or ionic platform android
cordova emulate android or ionic emulate android
Take a Nap or Drink Some Coffee ...
iOS
Xcode, iOS Simulator and ios-sim Required
cordova platform add ios or ionic platform ios
cordova emulate ios or ionic emulate ios
PLATFORM SIMULATORS

Create a New Cordova Project (not Ionic)
Compare Project Structure to Ionic Project (config.xml)
Delete Cordova Project
Add Android Platform to Ionic Project via ionic
Remove Android Platform via cordova
Add Android Platform Again via cordova
Run ionic serve , Open App in Browser and Check Console for JS Errors
Run Ripple Emulator and Check Console for JS Errors
Run cordova serve , Open App in Browser and Check Console for JS Errors
HANDSON

API Documentation: docs.angularjs.org/api (https://docs.angularjs.org/api)
Pay Attention: Documentation for latest Build (Select Box at The Top Left Corner)
Basic Tutorial: docs.angularjs.org/tutorial (https://docs.angularjs.org/tutorial)
Great Tutorial Videos: egghead.io (https://egghead.io/)
ANGULARJS

API Doc and Guides at ionicframework.com/docs (http://ionicframework.com/docs/)
Lot of Live Demos and Code Examples
All Directive Starts with Prefix ion (Nice!)
All Services Uses $ionic Prefix (Bad Practice?)
Uses Angular-UI Router
IONIC

Avoid Overlapping Elements (Popups, Overlays)
Try to Keep the DOM Small, Create Multiple Small States
HTML Tables Are Sluggish
Transport Really Needed Data Only
Use Caching
Minimize Code
Test Performance on Real and Old Devices
PERFORMANCE HINTS

Subfolders in hooks
Something Executable (with Hash-Bang)
See README (https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md) for a List Of Available Hooks
Can Be Used to Build Frontend (Modify www Content)
Pay Attention: No www Folder No Valid Cordova Project!
HOOKS

FABULOUS ANGULARJS BUILD SYSTEM
Helps to Structure Code
Dev-Mode with Server, Proxy and LiveReload
SASS 3.2 and LESS 1.5 support
Spec and End-2-End Test
Mock Data for Tests and Dev-Mode
Running Bower to Install and Update Frontend Dependencies
Project- and Per-Developer Configuration as well as Command Line Arguments
Building Distribution with
Annotating AngularJS Dependencies (Transform to Array-Notation)
Code Minimization
Running End-2-End Tests Against Build Application
FABS

Clone GitHub Repo pburgmer/et-ka-2014-ionic-tutorial-app (https://github.com/pburgmer/et-ka-2014-ionic-tutorial-app)
to Get an Ionic App with fabs as Build-System
Run npm install in Project Folder
Create before_prepare Hook
Run Grunt Build: grunt clean prepare compile
Create a Symlink (if not exists) from build-output/compiled to www
or Clean www and Copy Content from build-output/compiled to It
Add Android as Platform
Run cordova prepare
Take a Look at platform/android/www to Ensure Minified Version Is Used
HANDSON

TIB Academy
Second Floor and Third Floor,
5/3 BEML Layout,
Varathur Road,
Thubarahalli,
Kundalahalli Gate,
Bangalore – 66
Landmark – Behind Kundalahalli Gate bus stop,
Opposite to
SKR Convention Mall,
Next to AXIS Bank.

Angularjs Tutorial for Beginners

More Related Content

What's hot

Similar to Angularjs Tutorial for Beginners

More from rajkamaltibacademy

Recently uploaded

Angularjs Tutorial for Beginners