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.
Controllers
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.
Models
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.
Filters
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.
Best,
Keno