introduction to angular james kahng. terms framework template/environment constructed in the...
TRANSCRIPT
Introduction to AngularJames 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
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 H TML• 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)
Rewrite SOONTM
• Angular 2.0 announced (article also explains best practices)• 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)
Resources
Beautiful• Intro video• Part of intro tutorial set (FREE)
• Walkthrough• Explanation of $scope• Incremental examplesNice• 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• E-mail your entry to [email protected]• May the best man/woman win!