Angular.js by example, Getting started.

August 15, 2016

Angular Who?

Good question, the plan is to figure out what Angular is and how it works through a series of pens that follow my learning; before each one I gave myself a little challenge which you can use to learn on your own, so come along.

Note: Change is coming… Angular 2 is just around the corner, but working with the current stable version of Angular 1 and then learning Angular 2 seems to be the correct path.

The General Idea with Angular

Angular is a web framework for making web apps, it follows the MVC pattern which you might be familiar with and introduces it’s own syntax and conventions ( Check the intro ), the gist of which seems to be injecting Javascript into HTML tags to add functionality, let’s try the traditional Hello World to start:

*My/Your challenge: Import Angular, display something

See the Pen Angular Hello World by Eugenio - Keno - Leon (@k3no) on CodePen.

Easy enough,and app is declared in the JS file ( it is really a module), and then called through the ng-app - pronounced een-jee ? in the HTML section, Notice we are also running some Javascript like stuff inside the HTML, or in Angular parlance an expression.


I hope at some point to make a minimal MVC app with Angular, so looking into controllers next (albeit briefly )seems a good idea.

*My/Your challenge: Create a controller and display something unique to that controller

See the Pen Angular Hello World Controller by Eugenio - Keno - Leon (@k3no) on CodePen.

Still sort of easy, a new concept(Scope) has been introduced as a way of tying a specific controller to a specific view, the view in this case is the HTML.

Data Binding

Data flow in Angular seems to be a 2 way street, let’s explore data binding by exchanging information from a button to a script and inversely.

*My/Your challenge: Create a controller and a view where data is exchanged 2 ways.

See the Pen Angular Data Binding by Eugenio - Keno - Leon (@k3no) on CodePen.

The binding occurs both through the use of the controller in HTML ( The View) and by assigning a function within the controller to the click event, neat. You might have noticed (if not go notice it ), that the style changes by using the keyword ng-class & the button uses ng-click, these are Angular Directives, let’s take a closer look:

Angular Directives

*My/Your challenge: Use the directive ngRepeat

See the Pen Angular Directives by Eugenio - Keno - Leon (@k3no) on CodePen.

Angular directives simply add functionality to HTML, in this case a handy recursion function that you probably have written a few times. Angular comes with a bunch of Built in Directives, and you can also make your own.


So we’ve covered a few core concepts, let’s look into how Angular deals with the model part of MVC with a directive called ngModel

*My/Your challenge: Use ngModel in Angular

See the Pen Angular ngModel by Eugenio - Keno - Leon (@k3no) on CodePen.

So it appears that the model in Angular is just whatever is inside a controller (the logic bits) and is bound to the HTML (The view), ngModel ( and other directives) just make it easier to bind form/input elements to the logic inside the controller (the scope) or in their words: **“You can think of the view as simply an instant projection of your model.” **

Other Bits

This seems to be just the tip of the Angular Iceberg, I’ll have to come back and revisit and expand the subject, but for now I would like to explore a few other things that jumped at me from Angular, let’s start with Filters ( I used them to display some JSON in the Cat example) :

*My/Your challenge: Use a filter to display information.


See the Pen Angular Filters by Eugenio - Keno - Leon (@k3no) on CodePen.

With FILTERS, you can format data displayed on your view, there are some very handy already built in , and you can also make your own, for the previous example I just used 2 built in filters applied inside the controller ( in Javascript) and in the view as expression.

Alright, as mentioned before each aspect of Angular seems to have some nuance and complexity associated plus a ton of other intermediate and advanced features I didn’t cover, check the official site if you are in a hurry, I’ll try covering more ground in the next post, but for now I hope these pens help you get started with Angular.