Angular.js

we will be using http://www.w3schools.com/angular/

Start with this file:

angular_start.html
File Size:	0 kb
File Type:	html

Download File

Main components in Angular:

View, which is the HTML.
Model, which is the data available for the current view.
Controller, which is the JavaScript function that makes/changes/removes/controls the data.

AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.

<div ng-app="">
 	<p>Name: <input type="text" ng-model="name"></p>
 	<p ng-bind="name"></p>
</div>

Angular expressions go in {{}}

<div ng-app="">
 	<p>My first expression: {{ 5 + 5 }}</p>
</div>

Another example of expression using ng-model

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

using expressions in style components

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

</div>

you can initiate and then use as mathematical operands multiple variables (ng-init is not very common)

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Same using ng-bind

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Strings

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Objects

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Arrays

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Angular Modules

AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the controller.

Limitations:

You can only have one ng-app per page.
You can only associate a single module with a single HTML element

Try working with ng-app here:

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_controller

ng-repeat

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

ng-repeat on objects

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x	in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

Data Validation, try here http://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_validate

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

application status, try here http://www.w3schools.com/angular/tryit.asp?filename=try_ng_model_status

<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required>
    <h1>Status</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

Controller, try here http://www.w3schools.com/angular/tryit.asp?filename=try_ng_databinding_controller

Root Scope vs Scope http://www.w3schools.com/angular/tryit.asp?filename=try_ng_scope_rootscope

GET example for Weather API

angular1.html
File Size:	0 kb
File Type:	html

Download File

GET Songs List

angular_list_songs.html
File Size:	0 kb
File Type:	html

Download File

POST Song

angular_post_song.html
File Size:	0 kb
File Type:	html

Download File

DELETE Song

angular_delete.html
File Size:	0 kb
File Type:	html

Download File

IONIC

Getting started with ionic http://ionicframework.com/getting-started/

npm install -g cordova ionic
ionic start myApp tabs
cd myApp/
ionic platform add ios
ionic build ios
brew install ios-sim
ionic emulate ios

You can open the project in your XCode by opening the xcodeproj in the /myApp/platforms/ios

​IONIC

IONIC