MVWTF?

An AngularJS Primer

VOCABULARY

RTFM'ing more better

"BOOTSTRAP ANGULAR"


  <!doctype html>
  <html ng-app>
    <head>      <script src="angular.min.js"></script>
    </head>
    <body>
      ...
    </body>
  </html>

"BOOTSTRAP ANGULAR"

Bootstrap anywhere


  <!doctype html>
  <html>
    <head>      <script src="angular.min.js"></script>
    </head>
    <body>      <section id="calendar" ng-app> Yay {{ 'AngularJS' }} </section>      <section id="article"> basic HTML </section>    </body>
  </html>

"DIRECTIVE"

Reusable templates

"DIRECTIVE"

ng-init

   <div ng-init='user = { name: "chan", class: "villian" }'></div>

"DIRECTIVE"

ng-class

   user = { name: "The Joker", class: "villain" }

   <div class="super" ng-class="user.class"> {{ user.name }} </div>

   <div class="super <%= user.name %>"> <%= user.name %> </div>

"DIRECTIVE"

ng-repeat

   favoriteThings = ["pizza", "brownies", "tacos"]

   <li ng-repeat="thing in favoriteThings"> {{thing}} </li>

   <% @favorite_things.each do |thing| %>    <li><%= thing %></li>  <% end %>

"DIRECTIVE"

ng-model


  <input type="text" ng-model="name" />  <p> {{name}} </p>

   $(function () {    var $input = $('input');
    $input.keyup(function () {      $('p').text($input.value);    });  });

"SCOPE"

Every directive creates a new scope

Encapsulated JS variables and functions

"SCOPE"

$rootScope

   <div ng-app>                           // $rootScope    <input ng-model="name">              // $srootScope.name

     <div ng-controller="TweetsCtrl">     // $scope = $rootScope.new()      <input ng-model="name" />          // $scope.name

     <ul ng-controller="ThingsCtrl">      // $scope = $rootScope.new()      <li ng-repeat="thing in Things">   // $scope.thing