Learning AngularJS
I have been working on a couple of projects at work using AngularJS for the frontend, and it has been great (mostly great of course with the occasional newbie frustrations) learning something new. AngularJS is one of the many newer Javascript MVC (model-view-controller) frameworks out there.
Overview
The 2-way data binding used in Angular is something I hadn’t seen before. It means that any changes to the view are propagated to the model, and any changes to the model are propagated to the view.
Angular also lets you use HTML as your template. By adding custom attributes or tags directly to HTML, Angular code is triggered behind the scenes. It is very easy to do things like hide or show a UI element based on a given Javascript expression or to disable a form submit button unless certain conditions are met.
Key Components
There are several key components to Angular that are used to do its magic.
- Controller: A function used to set up and make changes to the scope.
- Scope: An object that serves as the glue between the controller and the view. An application has more than one scope.
- Model: Data that is stored on an Angular scope.
- Directive: Powerful, reusable components that let you extend HTML and manipulate the DOM.
- View: What is seen in the browser after Angular renders the DOM based on the model and controller.
Resources
I have been finding several resources helpful in coming up to speed on Angular.
- AngularJS developer guide: High- level information on Angular components.
- AngularJS API reference: Detailed information on all parts of Angular.
- Egghead tutorials: Very useful, short videos on many various Angular topics. A must-see.
- AngularJS tutorial: Introductory “Hello World” intro to Angular.
- AngularJS Google Group:
- Batarang: Awesome Chrome extension for AngularJS debugging. Couldn’t live without it!
- Nuances of scope in AngularJS: Very thorough overview of the nuances of AngularJS scopes.
Hope that helps others getting underway with Angular! Happy learning :).