Building Enterprise Applications

with AngularJS

Created by Tom Wilson / @twilson63

http://twilson63.github.io/2013.ato-talk/#/

WHOAMI

Tom Wilson

President of Jack Russell Software, a Division of CareKinesis

Technology Vision, Software Architecture, Developer Training

Head Instructor for CHS CodeCamp - http://chscodecamp.com

Teach: AngularJS, NodeJS, CouchDb, and DevTools

CoderDojo CHS http://coderdojochs.github.io/

Champion - NodeCopter Pilot Instructor

https://github.com/twilson63 | @twilson63

Heads Up

  • Our Problem
  • What is AngularJS?
  • Directives
  • More AngularJS Features
  • How we are using AngularJS?
  • Conclusion

Our Problem

Our clients continued to ask/demand for richer user experiences.

http://fistfuloftalent.com/wp-content/uploads/2012/06/angry-computer-large-500x320.jpg

JQuery event model was becoming unmaintainable.

We needed to test our JavaScript in a sane efficient way.

http://blog.algoworks.com/wp-content/uploads/2013/09/Software-testing-trends-2013.jpg

We wanted a JavaScript Framework that would be fun and productive.

http://tippingback.com/wp-content/uploads/2012/11/How-to-have-fun-advice-from-the-social-skills-self-help-blog-tipping-back.jpg

What is AngularJS?

AngularJS is built around the belief that declarative programming should be used for building UIs and wiring software components, while imperative programming is excellent for expressing business logic. The framework adapts and extends traditional HTML to better serve dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS deemphasizes DOM manipulation and improves testability.

hhttp://en.wikipedia.org/wiki/Angular_JS

Hello World AngularJS App

<!doctype html>
            <html ng-app>
              <head>
                <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
              </head>
              <body>
                <p ng-init=" name='World' ">Hello {{name}}!</p>
              </body>
            </html>

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

Two-Way Data Binding


            <html ng-app>
              <head>
                <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
              </head>
              <body>
                <input ng-model="name">
                <p>Hello {{name}}!</p>
              </body>
            </html>

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how code gets hold of its dependencies.


              angular.module('app')
                .controller('MainCtrl', function($scope, $http, $location) {
                  ...
                });
            
angular.module('App', [])
              .controller('HomeCtrl', function($window) {
                $window.document.write('Hello World');
            });

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

Scope

http://docs.angularjs.org/guide

Scope is the Glue

http://docs.angularjs.org/guide

Services

              angular.module('myModule', [])
                            .factory('notify', function($window) {
                              var msgs = [];
                              return function(msg) {
                                msgs.push(msg);
                                if (msgs.length == 3) {
                                  $window.alert(msgs.join("\n"));
                                  msgs = [];
                                }
                              };
                            }]);
                            .controller('MainCtrl', function($scope, notify) {
                              notify('Hello');
                              notify('World');
                              notify('GoodBye');
                            });
                          });

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

Services are Singletons

Directives

Built-In

  • ngRepeat
  • ngClick
  • ...

ngRepeat

<html ng-app>
              <head><title>HelloWorld</title></head>
              <body>
                <div ng-init=" items=[1,2,3,4] "></div>
                <ul>
                  <li ng-repeat="item in items">
                    {{item}}
                  </li>
                <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
              </body>
            </html>

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

ngClick

<html ng-app>
              <head><title>HelloWorld</title></head>
              <body>
                <div ng-controller="Main">
                <div ng-init=" items=[1,2,3,4] "></div>

                <button ng-click="alert()">Click</button>
                </div>
                <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
              </body>
            </html>

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

Understanding the Directive

angular.module('app')
            .directive('myDirective', function() {
              return {
                restrict: 'EAC',
                scope: true,
                transclude: false,
                replace: true,
                compile: ...
                link: ...
                templateUrl: ...
                controller: ...
              }
            });

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

Build your own

angular.module('directive', []).directive('contenteditable', function() {
              return {
                require: 'ngModel',
                link: function(scope, elm, attrs, ctrl) {
                  // view -> model
                  elm.on('blur', function() {
                    scope.$apply(function() {
                      ctrl.$setViewValue(elm.html());
                    });
                  });

                  // model -> view
                  ctrl.$render = function(value) {
                    elm.html(value);
                  };

                  // load init value from DOM
                  ctrl.$setViewValue(elm.html());
                }
              };
            });

See the Pen %= penName %> by Tom Wilson (@twilson63) on CodePen

More

  • ngResource
  • Filters
  • angular-ui
  • angularFire

New Features with 1.2

Animations

http://twilson63.github.io/ng-animate-talk/#/

Mobile - Touch

http://docs.angularjs.org/api/ngTouch

How we are using AngularJS?

Embedding mini Apps into our Rails Apps

Single Page Applications

New: Reusable AngularJS Applications

Conclusion

  • AngularJS is moving to what browsers should offer
  • AngularJS makes it quick and easy to build proof of concept applications
  • AngularJS declarative and imperative design is reliable and maintainable

Community

http://ngmodules.org/

Thank you

Questions

http://twilson63.github.io/ngTodoPouch/