Coding w/ CORE + ADI

Angular.js

What is a frontend JavaScript Framework?

With JavaScript/jQuery we have to 
  1. Get data to and from the server
  2. Keep data inputted by user in sync with server
  3. Re-render the web page based on user input

This is a lot of the same code written by many developers.
 
There must be an easier, more streamlined, and structured way of doing things
  • i.e. Ember.js, Backbone.js, Angular.js

MVC for Frameworks

Model = your data (i.e. FB profile info)
View = your webpage (i.e. what you see on your FB profile)
Controller = gets user input and changes your data 
(i.e. when you add a friend on FB)

What is Angular.js?

  • Not just a JavaScript MVC frontend framework
  • Doesn't just make jQuery tasks easier
Think of it as an add-on to HTML that lets you bind data to HTML elements and attach behavior to them through HTML alone

What we will be building

A web app that lets you find all 
gold-nugget or silver-nugget
Professors


Directives

Adding new features (attributes & elements) to HTML

  • If we add ng-app to an HTML element i.e. <body ng-app> then we create an AngularJS application there
  • ng-model is how we add data/variables to HTML



Data Binding

What we did with ng-model is something called data binding

Controllers

We don't want just the entire HTML view synced to one model. We want separate Controllers for different parts.

  • the $scope variable passed into the controller will hold all models/data within that HTML element

ng-repeat Directive

A directive that let's you easily repeat through an entire list

Filters

We don't need to repeat the entire list and can just list those we want

Additional Resources


(Videos)

(Books)

Future Events


Sign up for our listserv for info on future events & workshops


Give us feedback here

Angular.js

By Don Yu

Made with Slides.com

Angular.js

  • 1,001

More from Don Yu