Angular Introduction

Angular Primer

1. Introduction, 2. Angular Concepts and Usages, 3. Hands-on

Resources:

• Concept with Guided Reading @ thinkster
• Basic usage and hands-on @ w3school
• Interactive and Fun @ codeschool
• Full In-Depth Tutorial @ AngularJS official site (Recommended for developers)
• Official Guide & APIs
• Playground @ Plunker
• Project seed: https://github.com/angular/angular-seed.git

What is AngularJS

A Data-Driven JavaScript Framework with:

• Event handling through Data Binding
• UI templating (HTML tags)
• RESTful AJAX API (optional resouces maping through $resource plugin)
• URL mapping with state management
• Testing support, location & i18n, security, accessibility
  and more...
• Modularized design support - good for Enterprise Environment!

Why AngualrJS

• A general trend to move UI processing to Client Side
• HTML5 for cross-platform support
• Advances in JavaScript - ES6, JS engines

Limitations: framework design, weakly typed language

Receptions: Made with Angular

Angular concepts

Declarative vs. Imperative

<input ng-model="model">
Display: {{model}}

<input id="model">
Display: <span id="display"></span>
jquery code: $( "#model" ).keyup(function(event) {
    $("#display").text($(this).val());
});

Data Binding

Promises

promiseFactory.getPromise(data).then(function() {
    _this.promiseModel = data;
});
        

Live Demo

1. clone AngularJS seed project
2. build with nmp, bower, grunt
3. add new