angularjs enterprise training course
DESCRIPTION
In this AngularJS Enterprise Training Course participates will learn many of features in AngularJS which will give them a solid foundation of the framework. They will learn the fundamentals required to create testable, MVC-style single page applications. Students will become familiar with core concepts and will be shown advanced approaches using AngularJS. This class will include lecture and a series of instructor-led, hands-on labs. By the end of this class, participates will have the knowledge to leverage the power of AngularJS to build modern web applications easily and quickly!TRANSCRIPT
AngularJS Enterprise Training CourseTroy Miles
https://github.com/Rockncoder/AngularJSEnterprise
Day One AgendaIntroduction to AngularJS
Lab - Two Way Data Binding
AngularJS Core Concepts
Lab - Shopping Cart
Morning Break
Filters
Lab - Using Filters
Day One Agenda (continue)
Lunch
Providers
Services
Factories
Client-side Routing
Afternoon Break
Lab - Routing
Day One Agenda (continue)
Directives
Lab - jQuery UI Widget
Day One Wrap-up
Beginning AngularJS
Introduction to AngularJS
Modern JavaScript Heavy Web Applications
Single Page Applications Explained
JavaScript Library vs. Framework
Contrasting AngularJS & jQuery
Other JavaScript MVC Frameworks
Modern JavaScript Heavy Web Applications
1996 - Microsoft introduces the iframe in IE
1999 -Microsoft introduces the XMLHTTP ActiveX control
2004 - GMail & Kayak, two heavily ajax’ed apps
2005 - Jesse James Garrett’s article coins the phrase AJAX
Text
Single Page Applications Explained
Library vs Framework
library framework
IoC no yes
default behavior no yes
extensibility yes yes
code bloat yes yes
Contrasting AngularJS & jQuery
AngularJS jQuery
framework yes no
extensible yes yes
IoC yes no
default behavior yes no
minified size 106 kb 84 kb*
Lab - jQuery Data Binding
jQuery Example<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Binding jQuery Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/jquery-1.11.1.min.js"></script></head><body> <div class="container" > <h1>Greet-o-matic</h1> <input type="text" id="firstName"/> <hr/> <p>Hello <span id="showName"></span>,<br/>Have a nice day!</p> </div> <script type="text/javascript"> $( document ).ready( function(){ $('#firstName').on("keyup", function(evt){ $('#showName').text(this.value); }); }); </script></body></html>
AngularJS Example<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <title>Binding AngularJS Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/angular.js"></script></head><body> <div class="container" > <h1>Greet-o-matic</h1> <input type="text" ng-model="userName"/> <hr/> <p>Hello {{userName}},<br/>Have a nice day!</p> </div></body></html>
Two-way Data Binding<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <title>Binding AngularJS Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/angular.js"></script></head><body><div class="container" > <h1>Greet-o-matic</h1> <div class="col-lg-6"> <input type="text" ng-model="userName" placeholder="Enter name here"/> </div> <div class="col-lg-6"> <input type="text" ng-model="userName" placeholder="or over here"/> </div> <hr/> <p>Hello <span>{{userName}}</span>,<br/>Have a nice day!</p></div></body></html>
Other JavaScript MVC Frameworks
Backbone.js
Knockout
EmberJS
Other frameworks & ToDoMVC
Backbone.jsCreated by Jeremy Ashkenas in 2010
19 kb production version (minimized, not gzipped)
One dependency - Underscore.js, optional jQuery
Three core concepts: models, collections, & views
Uses lots of custom events
KnockoutCreated by Steve Sanderson in 2010
47 kb production version (minimized, not gzipped)
Uses MVVM pattern
Two way data-binding
No dependencies
Supports all mainstream browsers
EmberCreated by Yehuda Katz and Tom Dale in 2011
Convention over configuration
Ember Data, a separate package, handles RESTful data
Handlebars.js, a separate package, handles templates
337 kb production version (minimized, not gzipped)
Other frameworksDojo
YUI
Agility.js
Knockback.js
CanJS
Maria
Polymer
React
cujoJS
Montage
Sammy.js
Stapes
Batman.js
http://todomvc.com/
AngularJSCreated by Miško Hevery and Adam Abrons in 2009
JavaScript MVC
106 kb production version (minimized, not gzipped)
Declarative programming for UI
Imperative programming for business logic
AngularJS Key Features
MVC
HTML Templates
Dependency Injection
Deep Linking
Directives
Angular Core Concepts
Understanding AngularJS’ MVC Architecture
Module
Dependency Injection
Data Binding
Understanding AngularJS’ MVC architecture
Uses MVC or MVVM or MV* depends on who you ask
The goal is clear separation of concerns
The model is only concerned with data
The view presents the data to the user
The controller applies the business logic
Module
A container for different parts of your app
Most apps will have one module
Most 3rd party libraries will come with their own
Can create extra modules for more complex apps via JavaScript
Dependency InjectionA software design pattern that implements inversion of control and allows a program design to follow the dependency inversion principle
Allows a dependency to be passed to an object
Allows code to clearly state dependencies
Leads to code which is easier to debug and test
Makes it possible to minimize apps without breaking them
Dependency InjectionThe DI pattern in AngularJS looks funky due to JavaScript’s shortcomings
The pattern is name of module, dot, name of provider, name of object, an array with the list of dependencies in strings and a function as the last item in the array
tempApp.controller('CurrentCtrl', ['$scope', function ($scope) { $scope.temp = 17; }]);
Data Binding
In Angular, binding is built into the framework
Replaces text content of HTML element with the value of the expression
{{ expression }}
<ANY ng-bind=“expression”>…</ANY>
<ANY class=“ng-bind: expression;”>…</ANY>
Lab - Two Way Data Binding
Intermediate AngularJS
Filters
Understanding Filters
A tour of built-in filters
ngSanitize
Building custom Filters
Lab
Understanding FiltersUsed to format data displayed to user
Strictly front-end, doesn’t change model data
Accessible using declarative or imperative syntax
{{ expression [| filter_name[:parameter_value] ... ] }}
$scope.originalText = 'hello';$scope.filteredText = $filter('uppercase')($scope.originalText);
A tour of built-in filterscurrency
date
json
lowercase
uppercase
number
filter
limitTo
orderBy
ngSantize
Provides functionality to sanitize HTML
Parses the HTML into tokens
Safe tokens converted into properly escaped HTML strings
May be a bit overzealous
Building custom filterstempApp.filter('minimum', [function () { return function (arrTemp, minimum) { var filteredArray = []; var min = minimum ? minimum : 15; angular.forEach(arrTemp, function (value, key) { if (value.temp >= min) filteredArray.push(value); }); return filteredArray; }; }]); !
Lab - Using Filters
Providers
What are providers?
Types of providers
Services
Factories
Providers
What are providers?
Objects that are instantiated and wired together automatically by the injector service
The injector creates two kinds of objects:
services - defined by the developer
specialized objects - Angular framework pieces, controllers, directives, filters, or animations
Types of providersConstants
Value
Decorator
Provider
Service
Factory
Services
Substitutable objects that are wired together using DI
Used to organize and share code across app
Only instantiated when an app component depends on it
Singletons
Built-in services always start with “$”
Factories
Introduction to shared components
Dependency injection deep dive
Building custom factories & services
Persisting data to a Web API service
Client-side Routing
Server-side routing vs client-side routing
ngRoute module
HTML URLs vs hash based URLs
Server-side Routing vs Client-side Routing
Traditionally changing the URL triggers server side request
Angular watches $location.url() and tries to map it to a route definition
ngRoute
Provides routing and deep linking services and directives
Must include angular-route.js in HTML, after angular.js
Must mark ngRoute as a dependent module
HTML URLs vs hash based URLs
By default Angular uses hash “#” based URLs
It can use HTML5 push state, with fallback
$locationProvider.html5Mode(true);
Lab - Routing
Directives
Introduction to Directives
jQuery integration
Using a jQuery UI Widget
Directives
Markers on a DOM element that attach a behavior to it
Can be an attribute, element name, comment, or CSS
The HTML compiler traverses the DOM at bootstrap and matches directives to DOM elements
Directives Names<div timePicker></div>
<div time-picker></div>
<div time:picker></div>
<div time_picker></div>
<div x-time-picker></div>
<div data-time-picker></div>
Directive Location
Tag name: <timePicker></timePicker>
Attribute: <div timePicker></div>
Class: <div class=“time-picker;”></div>
Comment: <!— directive:time-picker —>
Built-in Directives
ng-app
ng-bind
ng-controller
ng-href
ng-readonly
ng-repeat
ng-src
ng-submit
ng-transclude
ng-view
jQuery Integration
AngularJS includes a mini version of jQuery called jqLite
It is perfectly compatible with the full version of jQuery
jQuery must be loaded before Angular or it won’t see it
Using a jQuery Widgetapp.directive('timePicker', function () { var today = new Date(new Date().toDateString()); return { require: '?ngModel', link: function ($scope, $element, $attrs, ngModel) { var initialized = false; ngModel = ngModel || { "$setViewValue": angular.noop }; // where is the missing time value? setTimeout(function () { initialized = $element.timepicker() .on('changeTime', function (ev, ui) { var sec = $element.timepicker('getSecondsFromMidnight'); ngModel.$setViewValue(sec * 1000); console.log("sec = " + sec); }); }); ngModel.$render = function (val) { if (!initialized) { //If $render gets called before our timepicker plugin is ready, just return return; } $element.timepicker('setTime', new Date(today.getTime() + val)); } } }});
Lab - jQuery UI Widget
Day Two: Advanced AngularJS
Day Two AgendaDay One Recap
Lab - Simple Calculator
Project Organization
Best Practices
Digest Cycle
Promises
Lab - Promises
Day Two Agenda (continue)
Morning Break
Directives Deep Dive
Lab - Custom Directives
Lunch
Unit Test and Test Driven Development
Lab - TDD & AngularJS
Angular UI
Day Two Agenda (continue)
Afternoon Break
ASP.NET MVC & Web API with Angular
Lab Bootstrap & AngularJS
Tips & Traps
Summary
Day One Recap
AngularJS Core Concepts
Filters
Providers
Services
Factories
Project Organization
Best PracticesModel dot notation
$scope best practices
jQuery placement via directives, not controllers
Separation of concerns
Injecting models into event handlers vs referencing $scope
Fast idempotent $watch expressions
The Digest Cycle
$watch explained
Digest cycle deep dive
External events
Understanding $apply
Promises
The promise pattern
Promises in AngularJS with $q
$q and sevices
$q and 3rd party callbacks
Directives Deep Dive
Revisiting directives
Isolated scope
Link & compile functions
Templating
jQuery integration
Directives Deep Dive
Examining different ways to write a directive
Wrapping a jQuery widget in a directive
Shadow DOM and the future of directives
Lab: Building Custom Directives
Unit Testing and TDD
Introduction to Test Driven Development
Jasmine
Karma Test Runner
Mocking
Dependency Injection and Testing
Lab: Creating an Angular App using TDD
Angular UI
Quick Bootstrap overview
Integrating AngularJS and Bootstrap
AngularJS and ASP.NET
Routing differences
Single page apps vs traditional apps
Authentication & authorization
Angular & razor views
Lab: Bootstrap and AngularJS
Lab: Angular and Web API
Summary
Resources
Slides & Notes
Links
https://bitly.com/bundles/rockncoder/6