Learning AngularJS

Posted on

I was really excited about getting to use AngularJS and the experience has been great so far. In this post, I am going to give you a glimpse of the AngularJS goodies and hopefully it will clear up your path in learning AngularJS.

First of all, why AngularJS? Since you have been looking to learning AngularJS, you probably already have your answer. Basically, AngularJS provides full support for building Single Page Applications(SPA). Everything you need to build a SPA, such as DOM manipulation, routing, history management, AngularJS has it covered. AngularJS is a MVC framework which enforces the separation of these three layers to achieve loose coupling.

There are a few new core concepts that you need to know to get a head start.

  • Directives is a function understood by HTML. It is usually defined in HTML either as a DOM node attribute, ng-app and ng-controller for example, and some of them can be defined as tag name like ng-view.
  • Controllers handle custom logic used to display data in views which is HTML.
  • Two-way data bindings is synchronizing the data between the HTML(views) and the JavaScript objects(models).
  • Filter is used for formatting data, for example, display date in different date formats.
  • Routing defines a path to a view/controller
  • Module acts as a big container for different components.
  • Factory/service are singletons and used to store re-useable business logic and data/state that is shared between controllers. While they serve the same purpose, they are constructed in different ways. A factory function has to return an object at the end and can’t be injected as early as module.config. A service function doesn’t return an object and all the properties need to be set in the “this” scope variable and can be injected in module.config.

Moving on, there are just so many great places to check out if you want to read more…

  • Online courses
  • 1. Free course “Shaping up with Angular.js” by Code School – https://www.codeschool.com/courses/shaping-up-with-angular-js.
    I love how it gives you hands-on experience of coding AngularJs and provides detailed feedback if your code misses anything.

    2. Egghead.io – https://egghead.io
    More than a hundred classes, including the ones need pro account($15/month). You can still find lots of good free courses. They have a quick guide to get started but other than that, the courses are listed in random order.

    3. AngularJS JumpStart with Dan Wahlin – https://www.udemy.com/angularjs-jumpstart/
    It’s a $149 online course but you can probably find some coupon code online. It has 80 lectures from the overview of AngularJS to using the animation. Lots of details of the core components of AnuglarJS.

  • Books
  • 1. AngularJS by Brad Green and Shyam Seshadri
    It’s a quick read of AngularJS. Good for beginners but there are some typos in the sample code.

    2. Pro AngularJS by Adam Freeman
    Advanced programming in AngularJS. My favorite is Chapter 16 – “creating complex custom directives”. Lots of diagrams to explain how the scope works.


Set up Karma/Jasmine in Webstorm

Posted on

I use Karma/Jasmine for unit testing AnuglarJS. FYI, Karma is a test runner and Jasmine is a JavaScript test framework. They are so popular that you will find lots of examples on the websites or books for AngularJS. The setup only takes 5 steps.

1. download and install Node
http://nodejs.org/download.

2. Install Karma
Run “npm install karma” and “sudo npm install -g karma-cli” from the terminal.

3. Initiate Karma for your project
Go to the directory of your project, type “karma init” from the terminal. It will prompt some configuration options which will be defined in the generated config file karma.conf.js.

4. Modify karma.conf.js
You can find more information of each option on Karma. The most important option is the files. The organization of your files doesn’t affect the test but you need to make sure the necessary files are listed correctly in this file. My config file looks like this:

karma.conf.js

karma.conf.js

5. Right click on karma.conf.js and run it.
A browser of your choice will pop up and your tests will be run.
If all tests pass. You will see “Process finished with exit code 0″ shown in the terminal.

test results

test results

I encountered two errors before I had step 4 figured out. The errors were certainly not very helpful and I was surprised that the details that I was looking for are not mentioned on the Internet or books.

1. ReferenceError: module is not defined in …(my source file)
Cause: I didn’t have angular-mocks.js defined in karma.conf.js as I wasn’t using it in my source/test files. It turned out that it where the module/inject used in the test file (beforeEach() method) defined.

2. TypeError: scope is undefined in …(my test file)
Cause: I didn’t list the module required by my custom module in karma.conf.js as I thought they will be loaded when my custom module loads. But wrong again :P


JavaScript Prototype

Posted on

The prototype concept can be little bit confusing but it’s very important to fully understand how it works. Instead of defining classes, JavaScript uses prototype for defining the blueprint of an object. The newly added properties and functionality in an object’s prototype will be automatically applied to instances of the object. Object literals have inherited methods from Object but do not have the property “prototype” because it’s always Object. You can check that using Object.getPrototypeOf({})*. It is easier to understand the prototype concept through some examples.

1. This example is straightforward. Property “age” is added as a prototype property and it’s visible to all its object instances.

function Person(){};
var person1 = new Person();
console.log(person1.age);    //undefined
Person.prototype.age = 20;
console.log(person1.age);    //20

2. This example is similar to the one above except that the constructor function already has property age defined. The properties defined in constructor always take precedence over those in the prototype because the “this” context within the constructor function refers to the instance itself.

function Person(){
    this.age = 10;           
};
var person1 = new Person();
console.log(person1.age);    //10
Person.prototype.age = 20;
console.log(person1.age);    //10

3. There are two ways of using prototype for inheritance. You can use the object’s property prototype directly or Object.create*.

function Person(){
    this.age = 20;
}
function Student(){}
    
Student.prototype = new Person(); //RHS can also be Object.create(Person.prototype);
Student.prototype.constructor = Student;  //restore constructor method
var tom = new Student();
    
tom instanceof Student   //true
tom instanceof Person    //true
tom.constructor === Student   //true
tom.age  //20

4. The other common usage of prototype is to apply an existing prototype functionality on another object. For example, the arguments object inside every function is not a real array so you can’t execute the array functions on it directly. However, you can convert it to an array using Array’s slice method.

function convertArguments(){
    console.log(typeof arguments.push);  //undefined, but arguments.length exists
    var array = Array.prototype.slice.apply(arguments);
    console.log(typeof array.push);      //function
    return array;
}
convertArguments(1,2,3); //returns [1,2,3]

Last but not least, the properties from prototype chain is called inherited properties while the ones that are defined in the object directly are its own properties. Every object, including object literals, has the hasOwnProperty method to indicate if a specific property is the object’s own property or inherited property. When you use the “for in” loop, it will loop through both types of properties. A few other quick related notes:
1. Delete can’t delete inherited properties.
2. Object.keys* skips inherited properties.
3. Object.freeze* and Object.seal* don’t affect the object’s prototype chain.

* method supported in IE 9 and above