Integrating AngularJS into the Campus CMS

Integrating AngularJS into the Campus CMS

• 1.
  Integrating AngularJS into theCampus CMS Tom Borger tborger@ucsd.edu
• 2.
  What is AngularJS? AngularJSis 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 AngularJSoffer 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 itin!
• 7.
  Angular can providesome 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 of2: Conditional Display: jQuery vs. Angular (classic somewhat contrived example!) ! http://codepen.io/tomborger/pen/ogwWpJ
• 9.
  Preview • Angular attachesfunctionality 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-appattribute 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 of2: Big Lists! (less contrived example!) ! http://codepen.io/tomborger/pen/OPgmvy
• 12.
  Preview • First, we'regoing 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 willrepeat 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 forthose 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. Greatreference, 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 ofAdmissions and Relations with Schools