AngularJS can provide some of the benefits of a server-side templating system without sacrificing the speed and reliability of the campus CMS.

1. Integrating AngularJS
into the Campus CMS
Tom Borger
tborger@ucsd.edu

2. 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.

5. 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 ...

6. Just plug it in!

7. 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

8. Example 1 of 2:
Conditional Display: jQuery vs. Angular
(classic somewhat contrived example!)
!
http://codepen.io/tomborger/pen/ogwWpJ

9. 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.

10. 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.

11. Example 2 of 2:
Big Lists!
(less contrived example!)
!
http://codepen.io/tomborger/pen/OPgmvy

12. 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.

13. 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.

14. 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!

16. 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.

17. Thanks!
!
!
Tom Borger
tborger@ucsd.edu
Office of Admissions and Relations with Schools