together
- Pull down this repository
npm install
bower install
gulp
bower install angular
- Make sure it's all working
- karma
- gulp
together
ng-app
to initialize the angular applicationng-init
to set a variable named "buzzer" to an initial value
buzzer = 1
- Use an
{{ expression }}
to output the value to the screen ng-click
to update the value, increment the value
ng-click="buzzer = buzzer + 1"
ng-show
to print "Fizz" whenbuzzer
is a multiple of 3
- and don't show it on 0
- Refresh it a few times
- Use
ng-cloak
to control the "FOUT"
on your own
ng-hide
to print "Buzz" whenbuzzer
is a multiple of 5 (and not 0)
ng-hide
is just the opposite ofng-show
- Add a subtract 1 button
ng-if
to show a block of text if the value of buzzer is greater than 10
ng-if
works the same asng-show
ng-class
to hide that same block of text if the value of buzzer is greater than 20
- Use bootstrap's
hide
class - Use
ng-class
as an object literal that has the classname as a key and expression as a value: ngClass ng-class="{cssclassname:true === true}"
together
- Define an array using
ng-init
- something simple, like
letters = ['a', 'b', 'c']
- Create an
<ul>
with a bootstrap class oflist-unstyled
- Create a
<li>
- Add
ng-repeat
to the<li>
ng-repeat="letter in letters"
- similar to JavaScript's "for-in"
for(item in arr){...}
format
on your own
- Define an array of objects with
ng-init
- if you're not creative:
names = [{fname: 'jazahn', lname: 'clevenger'}, ...]
- Create a
<table>
with a bootstrap class oftable
- make sure you always use headers! with
scope
s! - and a caption never hurts...
ng-repeat
the row for the data in your array- Use
ng-class-even
and/orng-class-odd
to stripe the rows
together
- Create a new column for "Index"
- Print out
$index
in an expression in that column for each element of the array
- but
$index
is ugly and the context or scope may not be clear - use this format instead
(index, name) in names
- Create a new column for "Actions"
- Put a button in that column
<button class='btn'>Do something</button>
- Add an
ng-click
to the button that will donames.slice($index)
- now try
alert($index)
orwindow.alert('anything')
Angular expressions are limited by the scope they're in
together
- Add the
{{ buzzer }}
expression todiv2
- Make sure it's there and updating
- Add this controller to your app.js:
angular.module('fizzbuzzer', []).controller('MyController', function(){});
- Add an
ng-controller
todiv1
with a name of "MyController" - Check to see where
buzzer
is updating
// kind of sort of works similar to this:
// $rootScope
var buzzer = 0;
function MyController(){
// $scope
var buzzer = 1;
console.log(buzzer);
}
console.log(buzzer);