angularjs - western washington university file · web viewangularjs history . miško hevery started...
Post on 10-Nov-2018
216 Views
Preview:
TRANSCRIPT
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
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
top related