AngularJS

  1. Overview
    1. AngularJS is an increasingly popular open-source JavaScript framework created by Google in 2009
    2. Version 1.3.x is current stable version
    3. Moves much of the business logic from the server to the client
    4. Decouples DOM manipulation from application logic
    5. Supports the Model-View-Controller (MVC) design pattern
      1. Model - variables that are displayed in the view and manipulated by the controller
      2. View - the template (HTML with data bindings) that is displayed by the app
      3. Controller - contains the business logic behind the app
    6. Easy to write end-to-end tests
    7. Not the easiest framework to learn, but its many advantages make it ideal for large web apps

      Feelings about AngularJS over time
  2. Simple app
    1. Hello AngularJS
      <!doctype html>
      <html ng-app="myApp">
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
        </head>
        <body>
            <label>Name:</label>
            <input type="text" ng-model="yourName">
            <h2>Hello, {{ yourName }}!</h2>
        </body>
      </html>
      
  3. Directives
    1. AngularJS directives are HTML extensions (attributes, elements, or CSS classes) that tell AngularJS's compiler to attach certain behaviors to the DOM elements they are used on
    2. Many built-in directives
      1. ng-app - defines an AngularJS app
      2. ng-model - binds the value of HTML controls (input, select, textarea) to app data
      3. ng-bind - binds app data to the HTML view
        Hello, <span ng-bind="yourName"></span>!
        
      4. ng-init - for initializing variables
        <html ng-app ng-init="yourName = 'AngularJS'; x = 5">			
        
      5. ng-repeat - for looping through an array
        <ul ng-init="students = [{name:'Bob',  enrolled:true},
        						 {name:'Sue',  enrolled:false},
        						 {name:'Gary', enrolled:true}]">
        	<li ng-repeat="stu in students">
        		{{ stu.name + ' ' + stu.enrolled }}
        	</li>
        </ul>			
        
      6. ng-if - if statement
        <!-- Element added to DOM if enrolled is true -->
        <span ng-if="stu.enrolled">Enrolled</span>	
        
        <h3 ng-if="students.length === 0">No students</h3>
        <h3 ng-if="students.length === 1">1 student</h3>
        <h3 ng-if="students.length > 1">{{ students.length }} students</h3>	
        
      7. ng-show and ng-hide - show/hide an element based on a condition
        <!-- Set CSS display property if enrolled is true -->
        <span ng-show="stu.enrolled">Enrolled</span>		
        
    3. Directives can be prefaced with data- to make the page HTML5 compliant (data-ng-bind)
    4. You can create your own directives
  4. Expressions
    1. AngularJS expressions bind data to HTML just like ng-bind
    2. Written with double curly braces: {{ expression }}
    3. Can contain literals, operators, and variables
    4. Examples
      {{ 1 + 2 }} 
      {{ a * b}}
      {{ cust.firstName + ", " + cust.firstName }}
      {{ months[2] }}