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
*My/Your challenge: Import Angular, display something
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
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 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.
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:
*My/Your challenge: Use the directive ngRepeat
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
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.” **
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.
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.