Monthly Archives: July 2014

AngularJS from Code School

Experience

I wanted to have a quick understanding about the AngularJS. I tried to watch some of Videos from egghead.io, but it is difficult to start something with a limited availability (let’s say 1-1.5 hour weekday and 4-10 hours in weekends). So I have been putting AngularJS off on my To-do list for a while and I came across the AngularJS from the Code School sponsored by Google. I thought this was a good opportunity to jump in and learn AngularJS. Normally free course from the Code School is very simple and short, but this course covers all important concept about the AngularJS.

I started to take the first lesson from Monday and spend 1-2 hours/day until Thursday and finally completed on Sunday afternoon. Along the video, I had to make notes for a lab. Hands-on lab was pretty good and it reinforced the learning the concept. I can now explore more about the AngularJS and try to have a pet project to keep that knowledge alive.

I highly recommend this free tutorial if you want to grab an idea about the AngularJS in a short period of time.

My Notes

Directive

  • Directive is a marker on HTML tag that tells Angular to run or reference some Javascript code.
<body ng-controller="StoreController">
function StoreController(){}

Controllers

  • Controllers are where we define our app’s behavior by defining functions and values.
  • Controller must be capital.
  • ng-controller directive with Controller name and keyword “as” and name a variable.
  • Scope of the controller is only inside if DOM element.
  • ng-show directive can use as a conditional based on the value. Ng-show default is false if
  • ng-hide directive can be used.
  • It seems nested div with tags are not working.
  • ng-repeat directive used to iterate array

Filters

  • Formatting with filters {{ data | filter:options}}
  • Date : {{‘1388123412323′ | date:’MM/dd/yyy @ h:mma’}}
  • Upppercase & lowercase
  • limitTo. Character display limit or loop item #
  • orderBy : with – decending. Without – ascending order.
  • <img src= …> tag tries to load the image before angular tag tries to do something.
  • Use <img ng-src directive. <img ng-src=”{{product.images[0]}}” />

Tabs

  • ng-click=”tab = 1″
  • Like {{tab}} expression, expression define a 2 way Data Binding. This means Expressions are re-evaluated when a property changes.
  • ng-init allows to evaluate an expression in the current scope.
  • ng-class directive takes the active tab and assign appropriate css class.
  • ng-class=”{ active:tab ===1}” => active is name of the class to set, tab===1 expression to evaluate if true, set class to “active”, otherwise nothing.
  • Use Panel Controller to consolidate the logic and move things out of html
  • ng-controller=”PanelController as panel”
  • ng-init=”tab = 1″ replaced inside of js. This.tab = 1;

Form

  • ng-submit allows us to call a function when the form is submitted.

Validation

  • Turn off default html validation – “novalidate” in the form.
  • Mark the form element with “required”.
  • {{reviewForm.$valid}} – form name and reference to $ built in element.
  • Preventing the submit – only submit if reviewForm.$valid is true.
  • Source before typing email
<input name="author"… class="ng-pristine ng-invalid">
Source after typing, with invalid email
<input name="author"… class="ng-dirty ng-invalid">
Source after typing, with valid email
<input name="author"… class="ng-dirty ng-valid">

.ng-invalid.ng-dirty{
border-color : #FA787E;
}

.ng-valid.ng-dirty{
border-color : #78FA89;
}
  • Angular validates email, url, number, specify min, max.

Custom directives

  • ng-include => specify name of the file to include. Name of the file with single quote because it is meant to be a variable name. Interesting thing is that it load the html file and once loaded with javascript, it fetches ng-included file as an Ajax request.
  • Custom directive will do the same thing with some additional code. Why write a Directive instead?
  • Directive allows you to write HTML that expresses the behavior of your application. Basically, directive embedded in the HTML can tell much of the story what it is trying to do.
  • Template-expanding Directives are the simplest:
  • Define a custom tag or attribute that is expanded or replaced.
  • Can include Controller logic if needed.
  • Directives can also be used for :
  • ○ Expressing complex UI
  • ○ Calling events and registering event handlers
  • ○ Reusing common components
  • To make a custom directive, need to define it inside of app.js
app.directive('productTitle', function(){
return{
//Configuration object defining how your directive will work
restrict: 'E', // type of directive E for Element use 'A' for Attriibute
templateUrl: 'product-title.html' // Url of a template
};
});
  • Dash in HTML translates to camelCase in JS <product-title> to ‘productTitle’
  • Custom directive can have other directive inside. <product-description ng-show=”tab.isSet(1)”></product-description>
  • Attribute vs. Element Directives : Attribute being embedded in html tag and element being independent tag.
  • ○ Don’t use self-closing tag for custom tags
  • ○ Use Element Directives for UI widgets
  • ○ Attributes Directive for mixin behaviors like a tooltip
  • Directives allow you to write better HTML. Allow readers to understand the behavior and intent from just HTML. Likely using custom directives to write expressive HTML.
  • Element example
<div ng-show="tab.isSet(2)" product-specs></div>

• Controller directive

app.directive('productGallery',function(){
return{
restrict: 'E',
templateUrl: 'product-gallery.html',
controller: function(){
this.current = 0;
this.setCurrent = function(imageNumber){
this.current = imageNumber || 0;
};
},
controllerAs: 'gallery'
};
});

Module

  • Group directive or other types of javascript functions into a new module.
  • New module can be referenced in a parent module, new module js file needs to be referenced in html.

Services

  • Angular provides various services; $http, $log, $filter
  • $http({method: ‘GET’, url: ‘/proudcts.json’});
  • $http.get(‘/products.json’, {apiKey: ‘myApiKey’});
  • Dependency Injection – service name in array, service name as an argument. Ultimately services are injected in the controller.
app.controller('SomeController', ['$http', function($http){
var store = this;
store.products = [];
$http.get('/products.json').success(function(data){
store.products = data;
});
}]);
  • More than 1 service example
app.controller('SomeController', ['$http', '$log', function($http, $log){

}]);
  • Besides get(), post(), put(), delete()
$http.post('/path/to/resource.json', {param: 'value' });
$http.delete('/path/to/resource.json');
  • Other HTTP method using config
$http({method: 'OPTIONS', url: '/path/to/resource.json'});
$http({method: 'PATCH', url: '/path/to/resource.json'});
$http({method: 'TRACE', url: '/path/to/resource.json'});