integrating angularjs into the campus cms
TRANSCRIPT
What is AngularJS?
AngularJS is a comprehensive framework for building client-side JavaScript applications.!• Started in 2009• Currently maintained by Google• Last few years have shown explosive growth• Designed for full-page apps, but works great for widgets and
modules.
What does AngularJS offer us?
• Separation of Concerns ("MVC", though the "C" is kind of all over the place - in the view, in the model, abstracted, etc.).
• Data binding! Your view listens to your model, your model listens to your view.
• Super simple and highly optimized sorting, filtering, and transformation of data.
• Built-in components, including promises, location/history management, AJAX, data sanitization, and more.
• v1.2 supports Internet Explorer 8. • Automatically integrates with jQuery if present. • Pure JS! So to work it into the campus CMS ...
Just plug it in!
Angular can provide some of the benefits of a server-side templating system without sacrificing the speed and reliability of the
campus CMS.
And it's fun! :D
Example 1 of 2: Conditional Display: jQuery vs. Angular (classic somewhat contrived example!) !http://codepen.io/tomborger/pen/ogwWpJ
Preview
• Angular attaches functionality to HTML elements using modules called directives. Directives "teach HTML new tricks."
• You invoke that functionality using special attributes, similar to onclick="..." Attributes can be prefixed with data- for validation. Most directives can be invoked via classes or even custom HTML elements, as well.
• Behind the scenes, Angular creates a plain JavaScript object called $scope to hold your data.
Recap
• The ng-app attribute bootstraps Angular and defines the root element of the application.
• ng-model is used with form elements, and defines a property in $scope to hold the value of the input.
• ng-true-value and ng-false-value allow you to customize the value of "true" and "false" for checkboxes.
• ng-show and ng-hide will conditionally display an element based on the expression you give them.
• ng-click will execute an expression on click.
• {{curly braces}} allow you to display data from the model.
Example 2 of 2: Big Lists! (less contrived example!) !http://codepen.io/tomborger/pen/OPgmvy
Preview
• First, we're going to define and register a new module in the global angular object.
• Then we're going to add a controller to that module, which will let us manipulate $scope directly.
• We'll use the ng-controller directive to activate our controller.
• Toward the end, we'll inject the $http service to fetch another file on the server.
Recap
• ng-repeat will repeat a block of HTML for every item in a collection.
• An ng-repeat expression can be piped to filters, including a filter named filter (I know) which will screen results, and a filter named orderBy which will sort them.
• FYI: You can also pipe any data to filters like json, currency, date, lowercase, etc.: {{myTimestamp | date}}
• The $http service can be injected into your controller and used to fetch data kept as a flat file on the server.
Caveats
• Fallbacks for those with JavaScript disabled. You can always grab the rendered markup and dump it in a <noscript> tag.
• <IE8. Not a lot of options here. • Learning curve. Angular can be trying to learn -- a lot is
abstracted, a lot is based on convention, and a lot is still in flux!
Caveats
• Documentation. Great reference, crappy teacher. • Silver lining: There are good tutorials out there! https://
thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/ • Third-party modules. In my experience, few of them work out
of the box. • Silver lining: it's really easy to adapt jQuery and jQueryUI
modules to work with Angular. • ECMAScript 6 and Angular 2.0. The next version of Angular
will heavily modify the current API; the fear is that you'll basically have to relearn Angular. • Silver lining: The current version will continue to be supported.
