<!doctype html> <html ng-app> <head> <script src="angular.min.js"></script> </head> <body> ... </body> </html>
<!doctype html> <html ng-app> <head>
<script src="angular.min.js"></script>
</head> <body> ...
</body> </html>
<!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>
<!doctype html> <html> <head>
</head> <body>
<section id="calendar" ng-app> Yay {{ 'AngularJS' }} </section>
<section id="article"> basic HTML </section>
Reusable templates
<div ng-init='user = { name: "chan", class: "villian" }'></div>
user = { name: "The Joker", class: "villain" }
<div class="super" ng-class="user.class"> {{ user.name }} </div>
<div class="super <%= user.name %>"> <%= user.name %> </div>
favoriteThings = ["pizza", "brownies", "tacos"]
<li ng-repeat="thing in favoriteThings"> {{thing}} </li>
<% @favorite_things.each do |thing| %> <li><%= thing %></li> <% end %>
<% @favorite_things.each do |thing| %>
<li><%= thing %></li>
<% end %>
<input type="text" ng-model="name" /> <p> {{name}} </p>
<input type="text" ng-model="name" />
<p> {{name}} </p>
$(function () { var $input = $('input'); $input.keyup(function () { $('p').text($input.value); }); });
$(function () {
var $input = $('input');
$input.keyup(function () {
$('p').text($input.value);
});
Every directive creates a new scope
Encapsulated JS variables and functions
<div ng-app> // $rootScope <input ng-model="name"> // $srootScope.name
<div ng-app> // $rootScope
<input ng-model="name"> // $srootScope.name
<div ng-controller="TweetsCtrl"> // $scope = $rootScope.new() <input ng-model="name" /> // $scope.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
<ul ng-controller="ThingsCtrl"> // $scope = $rootScope.new()
<li ng-repeat="thing in Things"> // $scope.thing
By Michael Chan
