r3s Java is simple: August 2013

Tutorials:

Fast Notes:

*********

jQuery --> To manipulate and control DOM elements.

AngularJS --> for data CRUD, Single page Applications,

AngularJS Features:

-------------------

Two way data binding

MVC pattern

Template

Custom-directive (reusable components, custom markup)

REST-friendly

Deep Linking (set up a link for any dynamic page)

Form Validation

Server Communication

Localization

Dependency injection

Full testing environment (both unit, e2e)

------------------------------------------------------------------------------------------------------------------------------------------------------

Tutorial: http://docs.angularjs.org/tutorial/

app.js

------

var app = angular.module('MyTutorialApp', []);

maincontroller.js

-----------------

app.controller("MainController", function($scope){

$scope.understand = "I now understand how the scope works!";

});

index.html

----------

<!DOCTYPE html>

<head>

<title>Learning AngularJS</title>

</head>

<body>

</div>

</body>

</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

maincontroller.js

-----------------

app.controller("MainController", function($scope){

$scope.inputValue = "";

});

index.html

----------

</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

maincontroller.js

-----------------

app.controller("MainController", function($scope){

$scope.selectedPerson = 0;

$scope.selectedGenre = null;

$scope.people = [

{

id: 0,

music: ['Rock','Metal','Dubstep','Electro']

{

id: 1,

music: ['Indie','Drumstep','Dubstep','Electro']

{

id: 2,

music: ['Rock','Metal','Thrash Metal','Heavy Metal']

{

id: 3,

music: ['Pop','RnB','Hip Hop']

}

];

});

index.html

----------

<option ng-repeat='label in people[selectedPerson.id].music'>{{label}}</option>

</select>

</div>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

index.html

----------

<body>

<ul>

<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>

</ul>

</div>

</body>

maincontroller.js

-----------------

app.controller("MainController", function($scope){

$scope.people = [

{

id: 0,

music: ['Rock','Metal','Dubstep','Electro'],

live: true

{

id: 1,

music: ['Indie','Drumstep','Dubstep','Electro'],

live: true

{

id: 2,

music: ['Rock','Metal','Thrash Metal','Heavy Metal'],

live: false

{

id: 3,

music: ['Pop','RnB','Hip Hop'],

live: true

}

];

$scope.newPerson = null;

$scope.addNew = function() {

if ($scope.newPerson != null && $scope.newPerson != "") {

$scope.people.push({

id: $scope.people.length,

live: true,

music: []

});

}

});

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Creating Custom Filter

-----------------------

app.filter('isGenre', function() {

return function(input, genre) {

if (typeof genre == 'undefined' || genre == null) {

return input;

} else {

var out = [];

for (var a = 0; a < input.length; a++){

for (var b = 0; b < input[a].show.genres.length; b++){

if(input[a].show.genres[b] == genre) {

out.push(input[a]);

}

return out;

}

};

});

Applying Custom Filter

-----------------------

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Gun-shot points

---------------

angular.module(-,-)

$scope

$scope.variablename

ng-app

ng-controller

app.controller(-,-)

ng-model

ng-options

Ex: ng-options='obj.name for obj in people'

ng-repeat

Ex: ng-repeat='label in people[selectedPerson.id].music'

filer:variablename

ng-show

ng-hide

Ex: <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>

ng-click

Ex: <button ng-click='addNew()'>Add</button>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

************************************************************************************

<!doctype html>

<head>

</head>

<body>

<p>Nothing here {{'yet' + '!'}}</p>

</body>

</html>

ng-app directive

----------------

Ex: <html ng-app>

AngularJS script tag

--------------------

Double-curly binding with an expression:

----------------------------------------

Nothing here {{'yet' + '!'}}

3 thing during app bootstrap

-----------------------------

1. injector is created. [used for dependency injection within this app]

2. injector will create the root scope.

3. Angular will "compile" the DOM starting at the ngApp root element

function PhoneListCtrl($scope) {

$scope.phones = [

{"name": "Nexus S",

"snippet": "Fast just got faster with Nexus S."},

{"name": "Motorola XOOM™ with Wi-Fi",

"snippet": "The Next, Next Generation tablet."},

{"name": "MOTOROLA XOOM™",

"snippet": "The Next, Next Generation tablet."}

];

}

Here, Controller - PhoneListCtrl

Model - phones

- The phone data is then attached to the scope ($scope) that was injected into our controller function.

The controller scope is a prototypical descendant of the root scope that was created when the application bootstrapped.

- Angular uses scopes, along with the information contained in the template, data model, and controller, to keep models and views separate,

but in sync. Any changes made to the model are reflected in the view; any changes that occur in the view are reflected in the model.

--> Agular Template

- Html page with Angular

--> ng-repeat directive

--> <li ng-repeat="phone in phones">

<p>{{phone.snippet}}</p>

</li>

- The curly braces around phone.name and phone.snippet denote bindings.

- By providing context for our data model, the controller allows us to establish data-binding between the model and the view.

- phone.name and phone.snippet refers model.

--> root scope

----------

A root scope can be retrieved using the $rootScope key from the $injector.

Child scopes are created using the $new() method.

(Most scopes are created automatically when compiled HTML template is executed.)

Ex: var scope = $rootScope.$new();

--> Inheritance

-----------

A scope can inherit from a parent scope, as in this example:

var parent = $rootScope;

var child = parent.$new();

--> Data-binding

------------

When the page loads, Angular binds the name of the input box to a variable of the same name in the data model and keeps the two in sync.

Ex: Here, in the below code Data-binding done through "query"

Search: <input ng-model="query">

<p>{{phone.snippet}}</p>

</li>

</ul>

--> Executing multiple expressions:
--------------------------------
ng-click="loadImage(item.configurationUid);isCollapsed = !isCollapsed"

r3s Java is simple

Thursday, 29 August 2013

JSDT

Jasmine

Tuesday, 27 August 2013

AngularJS

Monday, 26 August 2013

Quotes

Sunday, 25 August 2013

List of Tools and Technologies

Friday, 23 August 2013

Eclipse - Kepler

About Me