Shaping Up with Angular a Code School course

The following is my notes to go along with the free Code School course Shaping Up with Angular (

what is angular?

a client-side javascript framework for adding interactivity to HTML



- is a marker on a HTML tag that tells angular to run or reference javascript code
- HTML annotations that trigger Javascript behaviors
- custom directive: html that expresses behavior: <book-title></book-title>
  - element & attribute directive


- where we write pieces of an angular application and define dependencies
- where our application components live


- where we define our app's behavior by defining functions and values
- where we add application behavior


- allow you to insert dynamic values into your HTML
- how values get displayed on the page
  I am {{4 + 6}} = I am 10
  {{"hello" + " you"}} = hello you
- two way data binding: expressions are reevaluated when values change


- clean and format output data
- {{ data* | filter:options* }}


- give controllers extra functionality
  - $http - fetch json data from a web service
    - can get(), post(), put(), delete()
  - $log - logging to javascript console
  - $filter - filter an array


Form Validations

- example
  - turn off default browser validation - <form name="tForm" novalidate>
  - turn on required attribute on text areas - <textarea name="t" required></textarea>
  - test for validity - {{tForm.$valid}} - boolean if filled out right
- Angular JS has built in validation for email, url and number fields (also min and max)


Built in Directives:

ng-app="store" - attach the application module to page
ng-controller = "storeController as store" - attach a controller function to the page
ng-show="product.forSale" - display based on expression
ng-repeat="product in store.products" - repeat a section for each item in an arrray
ng-source="{{product.images[0].full}}" - used to add path to images
ng-click="tab = 1"
ng-init="tab = 1" - initialize a value
ng-class="{ active:tab === 1 }" - add class active if expression is true
ng-model="review.body" - bind form element value to property
ng-submit="" lets us call a function on our controller when form is submitted
ng-include="'template.html'" - includes html snippets

Custom Directives:

<product-title></product-title> - in html as Element Directive
app.directive('productTitle', function() {
  return {
    restrict: 'E',
    templateUrl: 'product-title.html'
<h3 product-title></h3> - in html as Attribute Directive

Example Filters: