Notes for Code School course Shaping Up with Angular

The following is my notes to go along with the free Code School course Shaping Up with Angular (https://www.codeschool.com/courses/shaping-up-with-angular-js)

what is angular?

- a client-side javascript framework for adding interactivity to HTML

———————————

Directive:

- 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

Modules:

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

Controller:

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

Expressions:

- 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
  docs.angularjs.org/guide/expression
- two way data binding: expressions are reevaluated when values change

Filters:

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

Services:

- 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-hide="product.soldOut"
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:

date:'MM/dd/yyyy'
uppercase
limitTo:8
orderBy:'-price'

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Thanks, I just printed these

Thanks, I just printed these up for extra review.

Post new comment

  • Allowed HTML tags: <em> <strong>
  • Lines and paragraphs break automatically.

More information about formatting options

Image CAPTCHA
Enter the characters shown in the image.