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
- Slides: 17