Tuesday, 27 August 2013

AngularJS

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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script> <!-- app.js needs to be included before maincontroller.js. (???) -->
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
{{understand}}
</div>
</body>
</html>


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

maincontroller.js
-----------------
app.controller("MainController", function($scope){
$scope.inputValue = "";
});

index.html
----------
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='inputValue' />
{{inputValue}}
</div>

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

maincontroller.js
-----------------
app.controller("MainController", function($scope){
$scope.selectedPerson = 0;
$scope.selectedGenre = null;
$scope.people = [
{
id: 0,
name: 'Leon',
music: ['Rock','Metal','Dubstep','Electro']
},
{
id: 1,
name: 'Chris',
music: ['Indie','Drumstep','Dubstep','Electro']
},
{
id: 2,
name: 'Harry',
music: ['Rock','Metal','Thrash Metal','Heavy Metal']
},
{
id: 3,
name: 'Allyce',
music: ['Pop','RnB','Hip Hop']
}
];
});

index.html
----------
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<select ng-model='selectedPerson' ng-options='obj.name for obj in people'></select>
<select ng-model='selectedGenre'>
<option ng-repeat='label in people[selectedPerson.id].music'>{{label}}</option>
</select>
</div>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
index.html
----------
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
</body>

maincontroller.js
-----------------
app.controller("MainController", function($scope){
$scope.people = [
{
id: 0,
name: 'Leon',
music: ['Rock','Metal','Dubstep','Electro'],
live: true
},
{
id: 1,
name: 'Chris',
music: ['Indie','Drumstep','Dubstep','Electro'],
live: true
},
{
id: 2,
name: 'Harry',
music: ['Rock','Metal','Thrash Metal','Heavy Metal'],
live: false
},
{
id: 3,
name: 'Allyce',
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,
name: $scope.newPerson,
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
-----------------------
<li ng-repeat="tvshow in results | filter: filterText | isGenre:genreFilter">

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

Gun-shot points
---------------
angular.module(-,-)
$scope
$scope.variablename
ng-app
ng-controller
app.controller(-,-)
ng-model
{{ variablename }}
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>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
</head>
<body>
  <p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>


ng-app directive
----------------
Ex: <html ng-app>


AngularJS script tag
--------------------
<script src="lib/angular/angular.js">


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">
{{phone.name}}
      <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">
<ul class="phones">
          <li ng-repeat="phone in phones | filter:query">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
     </ul>
--> Executing multiple expressions:
     --------------------------------
ng-click="loadImage(item.configurationUid);isCollapsed = !isCollapsed"
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)