Coding w/ CORE + ADI
Angular.js
What is a frontend JavaScript Framework?
With JavaScript/jQuery we have to
- Get data to and from the server
- Keep data inputted by user in sync with server
- 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
