AngularJS Enterprise Training Course

AngularJS Enterprise Training CourseTroy Miles

https://github.com/Rockncoder/AngularJSEnterprise

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


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


Other frameworksDojo

YUI

Agility.js

Knockback.js

CanJS

Maria

Polymer

React

cujoJS

Montage

Sammy.js

Stapes

Batman.js

http://todomvc.com/

http://todomvc.com/

AngularJSCreated by Miško Hevery and Adam Abrons in 2009

JavaScript MVC


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

http://ASP.NET

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


Revisiting directives

Isolated scope

Link & compile functions

Templating

jQuery integration


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

http://ASP.NET

Lab: Bootstrap and AngularJS

Lab: Angular and Web API

Summary

Resources

Slides & Notes

Links

https://bitly.com/bundles/rockncoder/6

https://bitly.com/bundles/rockncoder/6

AngularJS Enterprise Training Course

Documents

Transcript of AngularJS Enterprise Training Course