Posts

Showing posts from 2017

Practical Guide to PreLink, PostLink and Controller Methods of Angular Directives

Link function of an Angular Directive As the name implicates, the link function has the duty of linking the model to the templates. Link function is the place where AngularJs does the data binding to the compiled templates. Let’s take a look at the signature of a link function. link : function LinkFn ( scope , elem , attr , ctrl ) { } There are 4 parameters available to the link function. scope  : The  scope  of the directive elem  : Dom element where the directive is applied attr  : Collection of attributes of the Dom Element ctrl  : Array of controllers required by the directive Now let’s create a simple directive to see how the data binding works. See the JSFiddle below: The  name  and  greeting  properties attached to the scope are linked to the template once the link function is executed. And, the browser will show  “Hey, I am Paul”  in the view. The above is the usual way to create a link fu...

Getting started with Karma for AngularJS Testing

Image
Introducing Karma A tool called  Karma  is a JavaScript test runner created by the AngularJS team. Jasmine is the testing framework that we talked about in the  getting started with unit testing for AngularJS  post, and Karma provides helpful tools that make it easier to us to call our Jasmine tests whilst we are writing code. We’re going to rebuild the single page calculator app from the last post using Karma for the tests. Installing Karma You can read the full installation instructions  here  or we also summarise them below. The first step is to install Node.js: Install  Node.js NB the documentation states that:  Karma works on the two latest stable versions. That is 0.8.x and 0.10.x at this point.  However, I have Node.js v0.12.x and have yet to run into any problems. Node: For the following commands I assume use of Terminal for Mac or Command Prompt for Windows. Open the Terminal/Command Prompt and enter the following:...