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

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

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

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

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

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

9. 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)

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

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

12. Two Way Binding Updates from model affect controller and vice versa
{{ $scope.dataFromController }} && ng-model
2-way binding demo

13. 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>
cbe.wwu.edu/san dvig/angularJS/f ilterGeekProduct s.php

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

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

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

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