CF Objective Notes - AngularJS: Getting the UI Sugar without the jQuery Pain
May 15, 2014
AngularJS: Getting the UI Sugar without the jQuery Pain
Sharon DiOrio
Can't get around the fact that JavaScript is the only language in the browser, it runs everywhere, so might as well embrace that.
Sometimes you need to add Angular into an already existing app. Can't rewrite the whole UI from scratch, just need to add it into a few spots.
Imperative method – jquery, something where you look at the WHOLE DOM before you can figure out what's going to happen
Declaritive method – look at markup describing what we want, and let the underlying system figure out how to make it happen:
Bootstrapping – to start using Angular
include the angular.js file
use "ng" prefix to add Angular to something
don't have to use it on the entire page!
Can just add an "ng" prefix" to some random tag on the page, and that will be the only part that's "Angularized" on the page
with just the single tag, out of the box you get data binding
don't have to do anything special to get that
Angular says ANY variable you have can be a model
and you can get data binding off ANY variable
Angular includes a SUBset of jQuery for the accessors
if you do want to load jQuery, load it FIRST, THEN load Angular after and Angular will use your version of jQuery
...instead of bootstrapping anonymously like I did before, now we gave our app a name.
$scope acts like the "event" object in other frameworks, to pass things from controller to the view.
Then in body...
to use things that were activated via that MainCtrl controller.
$scope
docs.angularjs.org/guide/scope
scopes and directives are the tricky parts that you'll trip over when you first get starting using Angular.
$scope – shared namespace between views and controllers
Dealing with real data –
$http – core service in Angular.
with a data service –
(for when you're past the basics and want to start moving logic out of your controllers)
notice that I didn't HAVE to inject $scope. I can just inject $http if that's the only "thing" I need to use from Angular.
Battarang(sp?) – debug tools that lets you do "scope insight", will build the scope tree, shows your custom directives, etc. can help
Resources:
Angular JS docs site
Angular JS Tutorial video
Egghead.io videos
(5 minute videos on a single concept, filters, etc)
Angular JS on Youtube channel
Year of Moo Blog
Slide deck: github.com/Sharondio/talks
There are IRC channels for ColdFusion and AngularJS. Who knew? :)
Angular 1.2 supports IE8 and above
1.3 is coming soon and will NOT support IE8
(but they accept pull requests if you want to fix something)
Sharon DiOrio
Can't get around the fact that JavaScript is the only language in the browser, it runs everywhere, so might as well embrace that.
Sometimes you need to add Angular into an already existing app. Can't rewrite the whole UI from scratch, just need to add it into a few spots.
Imperative method – jquery, something where you look at the WHOLE DOM before you can figure out what's going to happen
Declaritive method – look at markup describing what we want, and let the underlying system figure out how to make it happen:
Bootstrapping – to start using Angular
include the angular.js file
use "ng" prefix to add Angular to something
don't have to use it on the entire page!
Can just add an "ng" prefix" to some random tag on the page, and that will be the only part that's "Angularized" on the page
with just the single tag, out of the box you get data binding
don't have to do anything special to get that
Angular says ANY variable you have can be a model
and you can get data binding off ANY variable
Angular includes a SUBset of jQuery for the accessors
if you do want to load jQuery, load it FIRST, THEN load Angular after and Angular will use your version of jQuery
...instead of bootstrapping anonymously like I did before, now we gave our app a name.
$scope acts like the "event" object in other frameworks, to pass things from controller to the view.
Then in body...
to use things that were activated via that MainCtrl controller.
$scope
docs.angularjs.org/guide/scope
scopes and directives are the tricky parts that you'll trip over when you first get starting using Angular.
$scope – shared namespace between views and controllers
Dealing with real data –
$http – core service in Angular.
with a data service –
(for when you're past the basics and want to start moving logic out of your controllers)
notice that I didn't HAVE to inject $scope. I can just inject $http if that's the only "thing" I need to use from Angular.
Battarang(sp?) – debug tools that lets you do "scope insight", will build the scope tree, shows your custom directives, etc. can help
Resources:
Angular JS docs site
Angular JS Tutorial video
Egghead.io videos
(5 minute videos on a single concept, filters, etc)
Angular JS on Youtube channel
Year of Moo Blog
Slide deck: github.com/Sharondio/talks
There are IRC channels for ColdFusion and AngularJS. Who knew? :)
Angular 1.2 supports IE8 and above
1.3 is coming soon and will NOT support IE8
(but they accept pull requests if you want to fix something)