AngularJSJessica Betts, Sophia Pandey, & Ryan Amundson

OutlineAngularJS History

What, Who, Why

Pros and Cons

Modules

Directives

Scope & Controllers

Dependency Injection

Two Way Binding

FilteringServices, Factories and ProvidersAngularJS version of MVC

Asynchronous

AngularJS History

Miško Hevery started work on AngularJS in 2009Google employee

Initial release was on October 20th, 2010 AngularJS version 1.0 was released in 2012Successful - 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 appsAngularJS - open source JavaScript framework

NodeJS - Backend library, platform on Google Jquery - Frontend library, less features ReactJS - very popular - used by Facebook & Instagram

Why AngularJS?AngularJS eliminates writing lots of code

Allows code reuseFaster

single page applications (SPA’s)Useful features

DatabindingFilters

Flexibility

Module

“Main() method” in other appsDefines an applicationContainer Good for organizing

DirectivesExtended html attributes prefixed with ng-Built in directives

Ng-repeat (item template in .NET)Ng-patternNg-controllerNg-hrefNg-model

Define your own(code sample)

ScopeObject with properties and methodsBinds html and JavascriptSyntax : $scope

ControllerAllows you to modify the $scope objectUses ng-controller directive

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

Add a Controller:

<script>

var app = angular.module("myApp", []);

</script>

Create a Module:

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_property

Two Way BindingUpdates from model affect controller and vice versa{{ $scope.dataFromController }} && ng-model

2-way binding demohttp://www.angularjshub.com/code/examples/basics/02_TwoWayDataBinding_HTML/example-section-container.php?url=index.demo.php

Allows you to transform data

Filtering

<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/sandvig/angularJS/filterGeekProducts.php

Dependency Injection

Disadvantages:

- more difficult to trace or read- More upfront development(Injected

rather than created)- dependence on dependency

injection frameworks

Advantages:

- Separates creation from behavior

- Externalize configuration details

- Easier for testing

- Reduces coupling between classes and dependencies

Sending of service/dependency to client

Design pattern

Services, Factories and ProvidersObjects used for dependency injectionBuilt-in servicesSeparation of concernsController communication

Factory● Create an object and returns the object

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

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

Asynchronous CallbacksNon-blocking

Allows code execution to continue while waitingAllows multitasking in code