Introduction to Angular James Kahng

Terms Framework Template/environment constructed in the language where you fill in details with code Library Set of provided functions that do things people often need in their code

Why Angular? Single page applications are becoming very popular Gmail Google Docs Trello Todoist Others BUT HTML, CSS, JS was designed for static websites Web applications written in these languages can quickly become complex, unreadable and hack-y

Enter Angular.js Released in 2009 Framework that reimagines HTML for web application development HTML can now communicate with JS code. How does it do this? Directives

Marker (custom attribute) in HTML tag that tells Angular to run some JS code Demo The ng-app and ng-controller markers are built-in Angular directives More later

Expressions 2-way data binding Changes in HTML change our JS variable and vice-versa Syntax: {{data}} Demo

Controllers Behavior (Javascript) bound to our HTML It communicates with the “data model” for our view data The data you can see For example, a controller can hold an array of row entries for a table Demo

Directives Revisited Directives can be used to create reusable DOM elements/attributes/classes These can add HTML or do some kind of function This is how we can produce dynamically rendered pages Demo Demo 2

Services So far, directives are for DOM manipulation Controllers are for managing view data Services are for heavy lifting in the background (application data) HTTP requests, calculations, storage Persistent Angular has built-in services that include $http, $route You can also write custom services to better modularize your application

When to use Angular Large-scale dynamic web applications Scales very well Organized Modular and reusable (directives, controllers, services) CRUD Create, Read, Update, Delete

Small-scale? Use jQuery and design patterns (Module design pattern)Module design pattern

Rewrite SOON TM Angular 2.0 announced (article also explains best practices)announced Release ~late 2015-early 2016? New features and simpler Will not be backwards-compatible aka your code will break BUT Learning Angular 1 is great for learning other frameworks and JS

Examples Angular Cellar Cafe Townsend Angular 2048 (tutorial here) Angular 2048here

Resources Beautiful Intro video Part of intro tutorial set (FREE)intro tutorial set Walkthrough Explanation of $scope Incremental examples Nice Set of tutorial videos

Coding challenge Write a simple Angular app using what we learned Copying is fine, but type it yourself (honor system) Bear in mind, the most creative app will win your entry to May the best man/woman win!