Angular JS Jessica Betts Sophia Pandey Ryan Amundson

Angular. JS Jessica Betts, Sophia Pandey, & Ryan Amundson

Outline Angular. JS History What, Who, Why Pros and Cons Modules Directives Scope & Controllers Dependency Injection Two Way Binding

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

What is Angular. JS? Structural framework for dynamic web apps Use HTML as a template language Extend HTML's syntax - for web apps Angular. JS - open source Java. Script framework Node. JS - Backend library, platform on Google Jquery - Frontend library, less features React. JS - very popular - used by Facebook & Instagram

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

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

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

Create a Module: <script> var app = angular. module("my. App", []); </script> Add a Controller: <div ng-app="my. App" ng-controller="my. Ctrl"> {{ message }} </div> <script> var app = angular. module("my. App", []); http: //www. w 3 schools. com/angular/tryit. asp? filen ame=try_ng_controller_property app. controller("my. Ctrl", function($scope) { $scope. message = "Pigs can fly"; }); </script>

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

Filtering Allows you to transform data <div ng-app="my. App" ng-controller="person. Ctrl"> <p>The name is {{ last. Name | uppercase }} </p> </div> <script> angular. module('my. App', []). controller('person. Ctrl', function($scope) { $scope. first. Name = "John", $scope. last. Name = "Doe" }); </script> http: //yorktown. cbe. wwu. edu/san dvig/angular. JS/f ilter. Geek. Product 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 Service ● Similar to classes creates an object with ‘new’ keyword ● Referred to as ‘this’ Provider ● Only service to pass into config ● Use to provide module wide configuration prior to availability Factory ● Create an object and returns the object

Angular. JS Version of MVC - MVC? . . . MVVM? . . MVW? ? - Model-View. Model - $scope service

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