February 27, 2014
@ 09:33 AM
  1. Keys point of AngularJS:
    1. MVC
    2. Two way binding
    3. Dirty Checking
    4. Dependency Injection
    5. Support TDD
  2. MVC Structure:
    1. Controller: Central components
    2. View: Directives
    3. Services: Complex business logic
    4. Model: Data object
  3. Simple example

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

    <script src="angular.min.js"></script>
    <script type="text/javascript">
        function HelloWorldCtrl($scope) {
            $scope.helloMessage = "Hello World";
        }
    </script>

</body>
</html>
 

  1. Angular Seed: is a zip file for you use as start point application https://github.com/angular/angular-seed
  2. Controller & Scope

Controller => Scope  <==> View

Controller create scope, scope contains model, View can bind to function the scope.

  1. Data Express
    1. Model can be any type of javascript objects
    2.  {{session.upVoteCount}}
    3. Bind image:  <img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
  2. Built-in Directives
    1. Tag : <ng-form />(Not supported by IE)
    2. Attribute:  <div ng-form>
    3. Class: <div class=”ng-form“>
    4. In Html comments: <!—ng-form -->
  3. Event Directives
    1. ngClick, ngDblClick, (note: there no rightClick event)
    2. ngMusedown, ngMouseenter, ngMouseleave, ngMousemove,ngMouseover,ngMouseup
    3. ngChange:  

<input type=”checkbox”  ng-change=”handelChange()” ng-model=”property” />

    1. ngApp, ngBind,ngBindTemplate,ngBindHtml,ngBindHtmlUnsafe

ngBind don’t support multiple bindings, ngBindTemplate support multiple bindings

    1. ngHide, ngShow, ngCloak (ngCloak avoid flashes on slower client computer)

<body ng-cloak> //to avoid a flash of unbouned html


    1. ngStyle, ngClass.

ngClass directive has two companion directives: ngClassEven & ngClassOdd                           

    1. IE not support : ngDisabled, ngChecked, ngMultiple, ngReadonly, ngSelected .
    2. ngForm, ngSubmit, ngHref, ngSrc

ngForm let nest form. ngSrc delay fetching a image until after binding.

    1. ngNonBindable (tell angular not bind)

<div> {{1+2}} </div> //display 3

<div ng-non-bindable> {{1+2}} </div> //display {{1+2}}


9. Filters
    1.  {{expression | filter}} 
    2.  Ex.  {{“abc” | uppercase}}  {{3.14169 | number:2}}  {{34 | currency}}

 {{event.date | date:’mediumDate’}}

    1. Building filters: uppercase, lowercase ,number, currency, date ,json
    2. ngRepeat filter:   orderBy, limitTo, filter (there is a filter name  ‘filter’)
    3. custom filter: 

module.filter(‘name’,function(){

               return function( input /*,parameters */){ return output;}

});

10. Two Way Binding
    1. ngModel : bind to input, select, textarea

               <input type=’text’ ng-model=”obj.property” /> //the value changed, the obj.property updated

    1. ngClick to bind save or cancel action
    2. Two way binding will update on every key stroke.
    3. Property will be created automatically. (week script language ;) )

    11. Validation

    1. Requied

<input id=’name’ type=’text’ required ng-model=’obj.name’ />

    1.  ngParrten

<input id=’date’ type=’text’ required ng-pattern=”/\d\d/\d\d/\d\d\d\d/” ng-model=’obj.date’ />

 

    1.  Form properties, CSS
    2. Fire Validation
    3. <form name=”newEventForm”>

<button type=”submit” ng-disabled=”newEventForm.$invalid” ng-click=”saveEvent(event,newEventForm)” />