Day 2

Brief Review of Day 1
Let’s take a few minutes to refresh your mind of what you learned yesterday.  We realized a few benefits of AngularJS and how it’s unique.   Here’s a list of what we’ve learned.

  • Including AngularJS as javascript files into an HTML file
  • Rending output by placing variables inside double-nested braces
  • HTML attributes which are called directives
  • How these directives can have expressions and filters
  • Setting up a module as an app
  • Creating a custom controller and adding it to the app module
  • Specific type of directives and how they are used
  • Placing logic functions into the controller and display functions into HTML tags

In the following tutorial you will learn additional directives including making custom ones and form validation.  There are more examples of ng-model and how to use them in forms.  Another one ng-include is used for templates or snippets which you plan to repeat frequently, to customize you would use template extending such as:

<div ng-include="'product-title.html'">Predefined directive</div>
app.directive('customTitle', function {
return {
restrict: 'E',  // E for element, A for attribute
templateUrl: 'custom-title.html'
}
});

To utilize AngularJS’s built-in validation you will have to include the HTML5 attribute of novalidate for consistency in case of querky browsers.   $valid is a new thing and I haven’t looked into the specifics of it, but it’s a boolean to include in a <form> tag to determine if the input is valid.  $valid is used as a value in the ng-submit directive.  Here’s an example:

<form name='myForm' ng-submit='myForm.$valid' novalidate>

After a form is valid you can have a controller take the data push it into an array or object.  There is no use of a database in the tutorial.  The function created for the data save will be used inside the ng-submit directive.  Another examples of ng-class is also provided but this time you will write the CSS.

Continue with level 3 of the tutorial and return here before going onto level 4.

In level 4 of the tutorial you refactor code such as ng-includes by moving it out of the html and into the app.js file.  The difference you notice with the custom directives from controllers is that you provide an immediate return {} and your code goes inside that return block.  What’s happening here is that upon render of the page that directive is immediately applied where as a controller is not.

You can also modify your controller by deleting the original you created “app.module(‘MyController’, function(){…}) and moving the inner function inside the custom directives return block such as the example here:

return {
restrict: 'E' ,
templateUrl: 'include-file.html' ,
controller:  function(){ ... } ,
controllerAs: 'ctrlAlias'
}

As you see above, restrict is something that declares wether to render an element tag ‘E‘ or ‘A‘ an attribute inside a tag.  A controller alias is also necessary using the property ‘controllerAs‘.  The above goes into a js file while the example below goes in the HTML file:

<my-custom-directive>An example of restrict E</my-custom-directive>
<div custom-attribute>An example of restrict A</div>

If you haven’t done so, now would be a good time to complete level 4 & 5 of the tutorial.

After tutorial 4, we now can understand module definitions a little better by including dependencies.  That just means that one module is dependent on another so they can work together.  The name sounds bigger than it really is.  In tutorial 5, you get a good introduction to web services and how to import data instead of hard coded arrays.  AngularJS allows you work with services utilizing their built-in objects $http, $log, and $filter.

$http works like a function to retrieve data using ajax so if you know jQuery, it’s similar to $.ajax

To include these services you pass them as arguments in a controller definition such as:

app.controller('RandomController', ['$http', '$log', function($http, $log){ ... } ] ); 

Since we have dealt with dependencies and arguments in controllers we can also discuss the $scope function.  With the completion of the tutorial I can recommend another great video, so go this website and click on section 2 videos $scope.watch, Remove Scope watcher, ngCloak to learn what Code School hasn’t taught.  Those videos are also free.  I’ve watched all the videos in section 2 of the Infinite Skills website and they are good but not as simple to understand as Code School.  Although they do total 5 hours and you can probably find a coupon to get a discount for Udemy’s website.  (Disclaimer: I don’t get any commission for referring this.)

That’s it for Day 2.

What’s you should have learned:

Directives

ng-model: having your data appear as values in a form.
ng-submit: submitting data to a controller.
ng-class: additional uses of toggling CSS classes by function or boolean.

Directives Properties

restrict: renders into the DOM an element tag or attribute.
templateUrl: injects an external html file into the current one.
controller: property to the custom directive.
controllerAs: creates an alias to be used in the html file.

Other Concepts

Dependency & Injections (objects being passed into controllers and their functions
$http (uses ajax)
$valid (validation boolean)
novalidate (html5 attribute)
required (html5 attribute)
Refactoring code into the MV* pattern

Add your own comments (using the disqus commenting) if I missed out on something that needs better explanation.

What medium do you prefer for these daily curations?

View Results

Loading ... Loading ...

Learn coding in a collaborative team environment.