Jessica Betts, Sophia Pandey, & Ryan Amundson AngularJS Jessica Betts, Sophia Pandey, & Ryan Amundson

Outline AngularJS History What, Who, Why Pros and Cons Modules Directives Scope & Controllers Dependency Injection Two Way Binding Filtering Services, Factories and Providers AngularJS version of MVC Asynchronous

AngularJS History Miško Hevery started work on AngularJS in 2009 Google employee Initial release was on October 20th, 2010 AngularJS version 1.0 was released in 2012 Successful - now officially supported by Google

What is AngularJS? Structural framework for dynamic web apps Use HTML as a template language Extend HTML's syntax - for web apps AngularJS - open source JavaScript framework NodeJS - Backend library, platform on Google Jquery - Frontend library, less features ReactJS - very popular - used by Facebook & Instagram structural framework for dynamic web apps. HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write.

Why AngularJS? AngularJS eliminates writing lots of code Allows code reuse Faster single page applications (SPA’s) Useful features Databinding Filters Flexibility

Module “Main() method” in other apps Defines an application Container Good for organizing

Directives Extended html attributes prefixed with ng- Built in directives Ng-repeat (item template in .NET) Ng-pattern Ng-controller Ng-href Ng-model Define your own (code sample)

Scope Controller Object with properties and methods Binds html and Javascript Syntax : $scope Controller Allows you to modify the $scope object Uses ng-controller directive

Create a Module: Add a Controller: <script> var app = angular.module("myApp", []); </script> <div ng-app="myApp" ng-controller="myCtrl"> {{ message }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.message = "Pigs can fly"; }); </script> http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_property

Two Way Binding Updates from model affect controller and vice versa {{ $scope.dataFromController }} && ng-model 2-way binding demo http://www.angularjshub.com/code/examples/basics/02_TwoWayDataBinding_HTML/example-section-container.php?url=index.demo.php

Filtering Allows you to transform data <div ng-app="myApp" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div> <script> angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "John", $scope.lastName = "Doe" }); </script> http://yorktown. cbe.wwu.edu/san dvig/angularJS/f ilterGeekProduct s.php

Dependency Injection Sending of service/dependency to client Design pattern Advantages: Separates creation from behavior Externalize configuration details Easier for testing Reduces coupling between classes and dependencies Disadvantages: more difficult to trace or read More upfront development(Injected rather than created) dependence on dependency injection frameworks

Services, Factories and Providers Objects used for dependency injection Built-in services Separation of concerns Controller communication Provider Only service to pass into config Use to provide module wide configuration prior to availability Service Similar to classes creates an object with ‘new’ keyword Referred to as ‘this’ Factory Create an object and returns the object

AngularJS Version of MVC MVC?......MVVM?....MVW?? Model-View-ViewModel $scope service

Asynchronous Callbacks Non-blocking Allows code execution to continue while waiting Allows multitasking in code