SlideShare a Scribd company logo
Angular 1.x and 2 for Beginners
Oswald Campesato
Consultant/Training:
www.iquarkt.com
ocampesato@yahoo.com
SVCC 2015 (10/03/2015)
Evergreen College San Jose
Main Topics in This Session
Features of Angular 1.x
What about Angular 2
What about BB/D3/AngularJS
What to Learn….?
Brief History of Angular
Misko Hevery (the creator)
Began in 2009
An open source project (Google)
Client-side framework for Web apps
Distributed core team
Initially meant primarily for UI designers
Lots of modules available
Evolved in functionality and complexity
Six years is a long time (hence Angular 2)
Some Features of Angular 1.x
 MV* pattern, modular code, expressive HTML
 “hockey stick” learning curve
 Two-way data binding
 Works with BackboneJS (no directive required)
 Works with ReactJS and D3.js (custom directives)
 built-in services and support for custom services
What are Angular Directives?
Angular built-in directives extend HTML
Appear as an “ng-” prefix (or data-ng- prefix)
ng-app, ng-controller, ng-model
ng-click, ng-show, ng-enable
Angular custom directives: written by you
Simple Example of Angular 1.x
<!DOCTYPE html>
 <html ng-app>
 <head>
 <script

src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/an
gular.min.js">
 </script>
 </head>
 <body>
 Type something: <input type="text" ng-model="sometext" />
 <h1>Hello {{ sometext }}</h1>
 <h1>Hello again {{ sometext }}</h1>
 </body>
</html>
Services in Angular 1.x
 <html ng-app=“app”>
 var app = angular.module(“app”, []);
 Controllers: app.controller(“myController”, function() { });
 Directives: app.directive(“myDirective”, function() { });
 Factories: app.factory(“myFactory”, function() { });
 Services: app.service(“myService”, function() { });
 Providers: app.provider(“MyProvider”, function() { });
Click Events in Angular 1.x
 <!DOCTYPE html>
 <html ng-app=“app”>
 <head><script src=…></script>
 <script>
 var app = angular.module(”app", []);
 </script>
 </head>
 <body>
 <button ng-click="count = count + 1" ng-init="count=3">
 Increment the count
 </button>
 count: {{count}}
 </body>
 </html>
Scope in Controller in Angular 1.x: AVOID
 <!DOCTYPE html>
 <html ng-app=“app”>
 <head><script src=…></script></head>
 <body>
 <div ng-controller=”MyController">
 <p>{{food}}</p>
 </div>
 <script>
 var app = angular.module('app', []);
 app.controller(”MyController", function($scope){
 $scope.food = “Chicago pizza”;
 });
 </script>
 </body>
 </html>
Best Practice: Controller As in Angular 1.3+
 <!DOCTYPE html>
 <html ng-app=“app”>
 <head><script src=…></script></head>
 <body>
 <div ng-controller=”MyController as vm">
 <p>{{vm.value}}</p>
 </div>
 <script>
 var app = angular.module('app', []);
 app.controller(”MyController", function(){
 var vm = this;
 vm.value = “stuffed pizza”;
 });
 </script>
 </body></html>
Best Practice: Controller As in Angular 1.3+
 <!DOCTYPE html>
 <html ng-app=“app”>
 <head><script …></script></head>
 <body>
 <div ng-controller="ButtonController as bc">
 <button ng-click="bc.clickMe()">Click Me</button>
 </div>
 <script>
 var app = angular.module('app', []);
 app.controller("ButtonController", function(){
 var bc = this;
 bc.clickMe = function() { alert("Hello World"); }
 });
 </script></body>
 </html>
Angular Factory Example (part 1)
 <div ng-controller="MainCtrl as mc">
 <input type="text" placeholder="Enter a Word:” name="name"
 ng-model="mc.word" required />
 <input type="submit" name="submit" value="Save”
 ng-click='mc.saveItem()')
 </div>
 <script>
 var app = angular.module("app", []);
 app.controller("MainCtrl", function(db) {
 var mc = this;
 mc.word = "";
 mc.saveItem = function() {
 db.addItem(mc.word);
 mc.word = "";
 };
Angular Factory (part 2)
 app.factory('db', function() {
 var items = [];
 var dao = {};
 dao.addItem = function(item) {
 items.push(item);
 return 'added item';
 };
 dao.getItems = function() {
 return items;
 }
 // a factory must return an object:
 return dao;
 });
Angular $http Service
$http.get('https://api.github.com/users/johndoe')
.success(function(data) {
 $scope.gists = data;
})
.error(function(data, status) {
 console.error('Repos error', status, data);
})
.finally(function() {
 console.log("finally finished repos");
});
Custom Directive in Angular 1.x
 <!DOCTYPE html>
 <html ng-app=“app”>
 <head><script …></script></head>
 <body>
 <hello-world></hello-world>
 <script>
 var app = angular.module(”app", []);
 app.directive('helloWorld', function() {
 return {
 //restrict: 'AE', // A, E, C, or M
 template: '<h3>Hello World from SVCC</h3>’
 };
 });
 </script>
 </body></html>
D3 Directive in Angular 1.x (outline)
 <body>
 <my-cube></my-cube>
 <script>
 var app = angular.module(”app", []);
 app.directive('myCube', function() {
 function link(scope, el, attr) {
 // ADD YOUR CUSTOM D3 CODE HERE
 }
 // return an object to modify the DOM
 return {
 link: link,
 restrict: 'E'
 }
 });
 </script></body></html>
D3 Code for a Cube (part 1)
 // ADD YOUR CUSTOM D3 CODE HERE
 var width = 300, height = 300, fillColors = ["red", "yellow", "blue"];
 var points1 = "50,50 200,50 240,30 90,30";
 var points2 = "200,50 200,200 240,180 240,30";
 // “outer” SVG element (contains the cube):
 var svg = d3.select(el)
 .append("svg")
 .attr("width", width)
 .attr("height", height);
 // top face (parallelogram):
 var polygon = svg.append("polygon")
 .attr("points", points1)
 .attr("fill", fillColors[1])
 .attr("stroke", "blue")
 .attr("stroke-width", 1);
D3 Code for a Cube (part 2)
 // front face (rectangle)
 svg.append("rect")
 .attr("x", 50)
 .attr("y", 50)
 .attr("width", 150)
 .attr("height", 150)
 .attr("fill", fillColors[0]);
 // right face (parallelogram)
 var polygon = svg.append("polygon")
 .attr("points", points2)
 .attr("fill", fillColors[2])
 .attr("stroke", "blue")
 .attr("stroke-width", 1);
Custom Directive Options in Angular 1.x
 app.directive('helloWorld', function() {
 return {
 //omitting “restrict” and “template”
 templateUrl: 'SomeMarkup.html',
 controller: MyControllerFunction,
 controllerAs: ctrl,
 bindToController: true,
 transclude: true, // overwrite versus include
 compile: compileFunction, // before DOM insertion
 link: linkFunction, // after DOM insertion
 scope: {
 oneWay: ‘@’, twoWay: ‘=‘, expr: ‘&’
 }
 };
 });
Two-way Data Binding
 Model update causes view update
 View update causes model update
 Angular checks what has changed
 Angular also checks what might have changed
 Synchronizing view+model an be inefficient
 Can lead to “infinite” loops ;(
Best Practice: “One-time” Checking
 A feature of Angular 1.3 (or higher):
{{::firstname}} is Angular 1.3+ syntax
 forAngular 1.2: use the bindonce module
 Eliminates redundant checks (better performance)
What about BackboneJS?
 BackboneJS provides built-in objects:
 A View object
 A Model object
 A Collection object
 A Collections object
Backbone and Angular 1.x (part 1)
 <body ng-controller="MyController as ab">
 <ul><li ng-repeat="item in ab.collection.models">
 {{ item.name }}
 <input type="number" ng-model="item.attributes.cost">
 </li></ul>
 <p>Total Cost: {{ ab.collection.totalCost() | currency }}</p>
 <script>
 var app = angular.module('app', []);
 app.controller('MyController', function() {
 var ab = this;

 var data = [
 { id: 1, name: 'Beer', cost: 10, quantity: 3 },
 { id: 2, name: 'Pizza', cost: 20, quantity: 5 },
 { id: 3, name: 'Chips', cost: 15, quantity: 2 }
 ];
Backbone and Angular 1.x (part 2)
 var FoodCollection = Backbone.Collection.extend({
 totalCost: function() {
 var total = 0;
 this.forEach(function(model) {
 total += model.get('cost')*model.get('quantity');
 });
 return total;
 }
 });
 ab.collection = new FoodCollection(data);
 ab.items = ab.collection.toJSON();
 });
 </script>
AngularJS + Other Technologies
AngularJS + Backbone
AngularJS + ReactJS
AngularJS + Firebase
AngularJS + Parse
AngularJS + Pubnub
AngularJS + Material Design
UP NEXT: DELVING INTO ANGULAR 2…..
Features of Angular 2 (part 1)
ETA: Q1/Q2 of 2015
+ component-based architecture
+ loosely coupled components
+ less code more application focus
+ "Mobile First" approach
Angular 2 Github repository:
https://github.com/angular/angular
Features of Angular 2 (part 2)
Angular 2 can be 5x faster than Angular 1.x
One-way data binding (by default)
Two-way data binding (optional)
Dependency injection
Support for ES6 and TypeScript
Performance comparable to React(?)
Ang1.x features dropped from Ang 2
+ $scope
+ factories
+ controllers
+ providers
+ $apply
+ $digest
+ many built-in directives
Angular 2 Template Syntax
 [attribute] syntax:
<input [value]="name”>
 (method) syntax:
<input #myname (keyup)=”vm.myCtrlMethod()">
 ^ symbol handles bubble up events:
<div (^click)=”handleClick()">
<div></div>
</div>
 [(method)] syntax for two-way binding:
<input [(ng-model)]=”vm.foo”>
<p>Hello {{vm.foo}}</p>
Ang 1.x ng-repeat vs *ng-for
 Angular 1.x “ng-repeat”:
<ul>
<li ng-repeat="user in users">
<h2>{{user.name}}</h2>
</li>
</ul>
 Angular 2 “*ng-for”:
<ul>
<li *ng-for="#user in users">
<h2>{{user.name}}</h2>
</li>
</ul>
The APIs of a DOM Element
 Attributes: hold values in elements (always strings)
 Properties: properties of a DOM object
 Methods: the functions on a DOM object
 Events: click, focus, input, etc
 Attributes and properties sometimes match:
The ‘src’ attribute of an <img> element
 Attributes and properties sometimes do not match:
<input value="pizza">
input.value = "beer";
input.getAttribute('value'); // "pizza”
 NB: Ang 2 binds to properties; Ang 1.x binds to attributes
What are Transpilers?
 They convert code from one language to another
 Babel (formerly 6to5):
+converts ES6 (some ES7) to ECMA5
+ appears to be the de facto standard
 Traceur (Google):
+ converts ES6 to ECMA5
+ used by Angular 2
TypeScript (MicroSoft): http://www.TypeScriptlang.org
Angular 2 and ES6
ES6 classes (transpiled to ES5)
@ symbol for annotations
@Template
@Component
Angular 2 + ES6 Example
import {Component, Template, bootstrap} from
'angular2/angular2';
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
class MyAppComponent { // component controller
constructor() {
this.name = 'World!';
}
}
bootstrap(MyAppComponent);
Angular 2 and Event Objects
 <button (click)="clicked($event)"></button>
@Component(...)
@View(...)
class MyComponent {
clicked(event) {
event.preventDefault();
// do stuff here
}
}
bootstrap(MyComponent);
Angular 2 and Forms (part 1)
 import {Component, Template, Parent} from
'angular2/angular2'
 import {FormBuilder, Validators, FormDirectives,
ControlGroup} from 'angular2/forms’;
 @Component({
 selector: 'login-page'
 })
 @Template({
 url: 'pages/login.html',
 directives: [View, FormDirectives]
 })
Angular 2 and Forms (part 2)
 export class LoginPage {
 constructor() {
 var fb = new FormBuilder()
 this.loginForm = fb.group({
 email: ['', Validators.required],
 password: ['', Validators.required],
 });
 }
 doLogin(event) {
 // Show the value of the form
 console.log(this.loginForm.value);
 event.preventDefault();
 }
 }
Angular 2 and Forms (part 3)
 <form (^submit)="doLogin($event)"
[control-group]="loginForm">
 <div>
 <input control="email" type="email”
placeholder="Your email">
 </div>
 <div>
 <input control="password" type="email"
placeholder="Your email">
 </div>
 <button type="submit">Log in</button>
 </form>
Angular2/Webpack Starter
https://github.com/angular-class/angular2-webpack-starter
 1) download zip file (or clone repo)
 2) npm start (= "npm run server")
 3) go to http://localhost:3000
 Check out these files:
 src/app/app.ts
 src/app/bootstrap.ts
More Useful Links
 Change detection in Angular 2:
https://github.com/angular/watchtower.js
http://zone.js/
http://victorsavkin.com/post/110170125256/change-
detection-in-angular-2
 Angular scaffolding:
https://github.com/DaftMonk/generator-angular-fullstack
https://github.com/yeoman/generator-angular
http://lauterry.github.io/ngTailor/
 Touch animations:
https://docs.google.com/document/d/16Z6Lun15DoWNr
E2imk7N-2WiRAaqc954LOfU2-
2JSoI/edit#heading=h.rcjxs836qiki
Angular Tutorials
 Getting started with Angular 2:
https://docs.google.com/document/d/1MkpvTNfmxHwd
Sv9rQyQIvjRLnoGk4rvkNMkOEWTPkCw/edit#heading=h.6
z1yv9f94fuv
 Building Angular Apps using Flux:
https://docs.google.com/document/d/16axBamHEZORS_
KJZDjahLuhkhUuNVt77ZcGRoRiyjfQ/edit
New features in Angular 1.4:
 https://docs.google.com/document/d/1BkDxdkzB5Jm
QBgpLKEkGY92pWF9Xr89cSLltPJVdHC0/edit
Future Work in Angular 2
Server-side rendering
Web Workers
smooth and responsive UI
Native mobile UI (see Ionic for mobile)
Compile as build step
What about ES6?
Arrow functions and let keyword
Block scopes
Classes and inheritance
Default parameters
Destructured assignment
Generators, Iterators, Maps, and Sets
Promises and Rest parameters
Spread operator
Template Literals
ES6 let and Arrow Functions
let square = x => x * x;
let add = (x, y) => x + y;
let pi = () => 3.1415;
console.log(square(8)); // 64
console.log(add(5, 9)); // 14
console.log(pi()); // 3.1415
ES6 Class Definition (part 1)
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
calcArea() {
return this.height * this.width;
}
}
 var r1 = new Rectangle(5,10);
 var r2 = new Rectangle(25,15);
ES6 Class Definition (part 2)
 console.log(“r1 area = ”+r1.calcArea());
 console.log(“r2 area = ”+r2.calcArea());
 Test this code here:
http://babeljs.io/repl/
 More Examples:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Classes
What is TypeScript?
 A superset of JavaScript (ES6): 10/01/2012
 A compiled language (tsc compiler)
 strong typing and also type inferencing
 Type checking during compile time
 “minimal” extra compile time overhead
 “.ts” files are transpiled into “.js” files (via tsc)
 “lib.d.ts” contains TypeScript definitions
 TypeScript type definitions (update via “nuget”):
https://github.com/borisyankov/DefinitelyTyped
TypeScript Variables
 var isDone: boolean = false;
 var height: number = 6;
 var name: string = "dave";
 var myList:number[] = [1, 2, 3]; // option #1
 var myList:Array<number> = [1, 2, 3]; // option #2
 var changeMe: any = 4;
 changeMe = ”I’m a string now";
 var myList:any[] = [1, true, ”pizza"];
TypeScript Functions
 void return type:
function myLogger(msg?:string): void {
console.log("My custom logger: “+msg);
}
 Generics:
function identity<T>(arg: T): T {
return arg;
}
// output has 'string' type (explicit/inferred):
var output = identity<string>("Dave");
var output = identity("Dave");
TypeScript ‘any’ Type
 any return type:
 function selectSomething(x): any {
 if (typeof x == "object") {
 return 10;
 } else {
 return "abc";
 }
 }
NB: “any” type disables type checking
NB: you can disallow implicit “any” in Visual Studio
Functions versus Lambda Expressions
 JavaScript Function:
var doubleJS = function(x) { return 2*x; }
 TypeScript Function:
var doubleTS = function(x:number) {return 2*x;}
 Lambda versions of the TypeScript function:
var lambdaTS = (x:number) => 2*x;
var lambdaTS = x => 2*x;
Another Lambda function:
var x = function(delay:number, () =>void) {
// timer code
});
TypeScript Interfaces
interface User {
name: string;
weight?: number; // optional
}
function displayUser(user: User) {
console.log(user.name);
}
 This works even without ‘weight’ in the interface:
var aUser = {name: "John Smith", weight:200};
displayUser(aUser);
TypeScript Class (part 1)
class User {
fname: string;
lname: string;
constructor(fname:string, lname:string) {
this.fname = fname;
this.lname = lname;
}
fullname():string {
return this.fname+" "+this.lname;
}
}
TypeScript Class (part 2)
 var u1:User, u2:User;
 u1 = new User("Jane", "Smith");
 u2 = new User("John", "Jones");
 console.log("user1 = "+u1.fullname());
 console.log("user2 = "+u2.fullname());
 Exercise: use an interface in class User
 Aside: use interfaces as arguments of public
methods (whenever possible) instead of using
standard JS/TS types or class instances
Convert JSON Data to TS Class (1)
Consider the following array of data:
var people = [
{fname:"Jane",lname:"Smith",zip:"94043"},
{fname:"John",lname:"Jones",zip:"94539"},
{fname:"Dave",lname:"Starr",zip:"67800"}
]
Convert JSON Data to TS Class (2)
class People {
 public fname:string;
 public lname:string;
 public zip:string;
 constructor(public fname:string,
 public lname:string,
 public zip:string) {
 this.fname = fname;
 this.lname = lname;
 this.zip = zip;
 }
}
Convert JSON Data to TS Class (3)
Array of TypeScript objects:
var TSPeople = [
new People("Jane","Smith","94043"),
new People("John","Jones","94539"),
new People("Dave","Starr","67800")
];
TypeScript and the this keyword
 The this keyword is contextually bound in the same
fashion as standard JS functions
 The this keyword is lexically bound in Lamba functions
so it’s automatically captured (emitted JS uses _this)
 Typically based on how the function is called
 More information about the this keyword:
https://tinyurl.com/MDNthis
Migrating JS ‘classes’ to TypeScript
 Option #1: Annotate with an interface:
+Interface and impl are synchronized manually
+Faster initially and lower risk
 Option #2: Refactor as a class:
+More initial code changes
+More maintainable and semantic
http://www.typescriptlang.org/Handbook
What about Aurelia?
 Similar to Angular 2 and created by Rob Eisenberg:
http://aurelia.io/
 Blog post:
http://www.syntaxsuccess.com/viewarticle/angular-
2.0-vs-aurelia
 Code sample:
http://www.syntaxsuccess.com/articleList/aurelia
What Should I Learn???
 Main features of ES6 and TypeScript 1.5+
 “basic” Angular 1.4 and 2 (best practices)
 Practice converting code from ANG 1.x to 2
 Select an IDE:
+WebStorm 10: free 30-day trial ($49/year)
+Visual Studio Code (free)
+ Atom (free) with atom-TypeScript extension
 Command Line Tools:
+ npm, npmjs, gulp, grunt (older), broccoli,
+ webpack, browserify (older), jspm+systemjs
https://github.com/addyosmani/es6-tools
Other Technologies to Learn
 Sass/Bootstrap 4 (previous: less)
 HandleBars/Nunjucks (previous: Jade/EJS)
 Material Design (and MDL)
 Firebase/AngularFire
 D3.js for Data Visualization
 Ionic (=Angular for Mobile)
Browser Status for ES6
 Modern IE: https://goo.gl/56n7IL
 Mozilla: https://goo.gl/iSNDf9
 Chrome: https://www.chromestatus.com/features#ES6
Useful ES6 Links
https://github.com/lukehoban/es6features
http://kangax.github.io/compat-table/es6/
https://dev.modern.ie/platform/status/?filter=f3f0000bf&search=es6
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_suppo
rt_in_Mozilla
https://medium.com/@bojzi/overview-of-the-javascript-ecosystem-
8ec4a0b7a7be
What about ReactJS?
Provides “V” in MVC
One-way data binding
JSX (optional)
Hierarchical set of components
“React” = top-level namespace
Maintains a “virtual DOM”
Only updates the “delta”
Hence it’s very efficient
What about EmberJS 2.0?
Learning curve
Two-way data binding
MVC pattern
Involves accessors (“get”)
involves mutators (“set”)
People to follow
 Addy Osmani:
http://www.super-script.us/2015/es6-tools.html
 Nicolas Bevacqua:
http://ponyfoo.com/
 Dr. Axel Rauschmeyer:
http://www.2ality.com/
 Mike North:
https://frontendmasters.com/
Web Components Meetup
 This meetup is currently at HackerDojo in MTV:
http://www.meetup.com/Web-Components-Silicon-
Valley-Meetup/
Github + Graphics Samples
 https://github.com/ocampesato/reactjs-graphics
 https://github.com/ocampesato/angular-graphics
 https://github.com/ocampesato/web-animations
 https://github.com/ocampesato/polymer-svg-css3
Recent/Upcoming Books and Training
1) HTML5 Canvas and CSS3 Graphics (2013)
2) jQuery, CSS3, and HTML5 for Mobile (2013)
3) HTML5 Pocket Primer (2013)
4) jQuery Pocket Primer (2013)
5) HTML5 Mobile Pocket Primer (2014)
6) D3 Pocket Primer (2015)
7) Python Pocket Primer (2015)
8) AngularJS Pocket Primer (2016)

More Related Content

What's hot

Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Codemotion
 
Angular 5
Angular 5Angular 5
Angular 2
Angular 2Angular 2
What’s new in angular 2
What’s new in angular 2What’s new in angular 2
What’s new in angular 2
Ran Wahle
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
Commit University
 
AngularJS 2.0
AngularJS 2.0AngularJS 2.0
AngularJS 2.0
Boyan Mihaylov
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
Patrick Schroeder
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0 Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
Sumanth Chinthagunta
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
Laurent Duveau
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
Ravi Mone
 
Angular 2: core concepts
Angular 2: core conceptsAngular 2: core concepts
Angular 2: core concepts
Codemotion
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
Ron Heft
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dhyego Fernando
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dor Moshe
 
Angular 2 - An Introduction
Angular 2 - An IntroductionAngular 2 - An Introduction
Angular 2 - An Introduction
NexThoughts Technologies
 
Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!
Sirar Salih
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Naveen Pete
 
Angular 2 interview questions and answers
Angular 2 interview questions and answersAngular 2 interview questions and answers
Angular 2 interview questions and answers
Anil Singh
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
Filipe Falcão
 

What's hot (20)

Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
Understanding Angular 2 - Shmuela Jacobs - Codemotion Milan 2016
 
Angular 5
Angular 5Angular 5
Angular 5
 
Angular 2
Angular 2Angular 2
Angular 2
 
What’s new in angular 2
What’s new in angular 2What’s new in angular 2
What’s new in angular 2
 
Angular 2 - The Next Framework
Angular 2 - The Next FrameworkAngular 2 - The Next Framework
Angular 2 - The Next Framework
 
AngularJS 2.0
AngularJS 2.0AngularJS 2.0
AngularJS 2.0
 
Angular 2 Essential Training
Angular 2 Essential Training Angular 2 Essential Training
Angular 2 Essential Training
 
Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0 Single Page Applications with AngularJS 2.0
Single Page Applications with AngularJS 2.0
 
Angular 2... so can I use it now??
Angular 2... so can I use it now??Angular 2... so can I use it now??
Angular 2... so can I use it now??
 
Angular2 with type script
Angular2 with type scriptAngular2 with type script
Angular2 with type script
 
Angular 2: core concepts
Angular 2: core conceptsAngular 2: core concepts
Angular 2: core concepts
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
An Intro to Angular 2
An Intro to Angular 2An Intro to Angular 2
An Intro to Angular 2
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Angular 2 - An Introduction
Angular 2 - An IntroductionAngular 2 - An Introduction
Angular 2 - An Introduction
 
Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Angular 2 interview questions and answers
Angular 2 interview questions and answersAngular 2 interview questions and answers
Angular 2 interview questions and answers
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
 

Viewers also liked

Space survival game
Space survival gameSpace survival game
Space survival gameRoss
 
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
Christopher T. Walrath
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2
Adam Klein
 
Introduction to Angular JS
Introduction to Angular JSIntroduction to Angular JS
Introduction to Angular JS
Santhosh Kumar Srinivasan
 
Building single page applications with angular.js
Building single page applications with angular.jsBuilding single page applications with angular.js
Building single page applications with angular.js
Dieter De Mesmaeker
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2
Ross Dederer
 
Embrace the Angular 2 Ethos in Angular 1.x
Embrace the Angular 2 Ethos in Angular 1.xEmbrace the Angular 2 Ethos in Angular 1.x
Embrace the Angular 2 Ethos in Angular 1.x
Lukas Ruebbelke
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2 Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
Ross Dederer
 
Angular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page ApplicationAngular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page Application
Edureka!
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
Nir Kaufman
 
Angular 2 vs Angular 1
Angular 2 vs Angular 1Angular 2 vs Angular 1
Angular 2 vs Angular 1
GDG Odessa
 
Living Things and Non-Living Things
Living Things and Non-Living ThingsLiving Things and Non-Living Things
Living Things and Non-Living Things
gmanb5
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
Aayush Shrestha
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
Kenichi Kanai
 

Viewers also liked (14)

Space survival game
Space survival gameSpace survival game
Space survival game
 
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece How to Upgrade Angular 1 to Angular 2 - Piece by Piece
How to Upgrade Angular 1 to Angular 2 - Piece by Piece
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2
 
Introduction to Angular JS
Introduction to Angular JSIntroduction to Angular JS
Introduction to Angular JS
 
Building single page applications with angular.js
Building single page applications with angular.jsBuilding single page applications with angular.js
Building single page applications with angular.js
 
Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2 Migrating an Application from Angular 1 to Angular 2
Migrating an Application from Angular 1 to Angular 2
 
Embrace the Angular 2 Ethos in Angular 1.x
Embrace the Angular 2 Ethos in Angular 1.xEmbrace the Angular 2 Ethos in Angular 1.x
Embrace the Angular 2 Ethos in Angular 1.x
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2 Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
 
Angular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page ApplicationAngular JS - Develop Responsive Single Page Application
Angular JS - Develop Responsive Single Page Application
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
 
Angular 2 vs Angular 1
Angular 2 vs Angular 1Angular 2 vs Angular 1
Angular 2 vs Angular 1
 
Living Things and Non-Living Things
Living Things and Non-Living ThingsLiving Things and Non-Living Things
Living Things and Non-Living Things
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
 

Similar to Angular1x and Angular 2 for Beginners

Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
Riccardo Masetti
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
murtazahaveliwala
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
SolTech, Inc.
 
Angular js
Angular jsAngular js
Angular js
Behind D Walls
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Learnimtactics
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
Keith Bloomfield
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
EPAM Systems
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
أحمد عبد الوهاب
 
Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
Mahima Radhakrishnan
 
introduction to Angularjs basics
introduction to Angularjs basicsintroduction to Angularjs basics
introduction to Angularjs basics
Ravindra K
 
Angular js
Angular jsAngular js
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
Ran Wahle
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
Yashobanta Bai
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
Ran Wahle
 
Angular 2.0
Angular  2.0Angular  2.0
Angular 2.0
Mallikarjuna G D
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
Ravi Mone
 
Angular beans
Angular beansAngular beans
Angular beans
Bessem Hmidi
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
Troy Miles
 
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
William Marques
 

Similar to Angular1x and Angular 2 for Beginners (20)

Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
 
Intro to AngularJs
Intro to AngularJsIntro to AngularJs
Intro to AngularJs
 
Angular js
Angular jsAngular js
Angular js
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
 
Training On Angular Js
Training On Angular JsTraining On Angular Js
Training On Angular Js
 
introduction to Angularjs basics
introduction to Angularjs basicsintroduction to Angularjs basics
introduction to Angularjs basics
 
Angular js
Angular jsAngular js
Angular js
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
 
Angular 2.0
Angular  2.0Angular  2.0
Angular 2.0
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Angular beans
Angular beansAngular beans
Angular beans
 
Ionic framework one day training
Ionic framework one day trainingIonic framework one day training
Ionic framework one day training
 
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
 

More from Oswald Campesato

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
Oswald Campesato
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
Oswald Campesato
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
Oswald Campesato
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
Oswald Campesato
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
Oswald Campesato
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
Oswald Campesato
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
Oswald Campesato
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
Oswald Campesato
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
Oswald Campesato
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
Oswald Campesato
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
Oswald Campesato
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
Oswald Campesato
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
Oswald Campesato
 

More from Oswald Campesato (20)

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
 

Recently uploaded

Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 

Recently uploaded (20)

Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 

Angular1x and Angular 2 for Beginners

  • 1. Angular 1.x and 2 for Beginners Oswald Campesato Consultant/Training: www.iquarkt.com ocampesato@yahoo.com SVCC 2015 (10/03/2015) Evergreen College San Jose
  • 2. Main Topics in This Session Features of Angular 1.x What about Angular 2 What about BB/D3/AngularJS What to Learn….?
  • 3. Brief History of Angular Misko Hevery (the creator) Began in 2009 An open source project (Google) Client-side framework for Web apps Distributed core team Initially meant primarily for UI designers Lots of modules available Evolved in functionality and complexity Six years is a long time (hence Angular 2)
  • 4. Some Features of Angular 1.x  MV* pattern, modular code, expressive HTML  “hockey stick” learning curve  Two-way data binding  Works with BackboneJS (no directive required)  Works with ReactJS and D3.js (custom directives)  built-in services and support for custom services
  • 5. What are Angular Directives? Angular built-in directives extend HTML Appear as an “ng-” prefix (or data-ng- prefix) ng-app, ng-controller, ng-model ng-click, ng-show, ng-enable Angular custom directives: written by you
  • 6. Simple Example of Angular 1.x <!DOCTYPE html>  <html ng-app>  <head>  <script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/an gular.min.js">  </script>  </head>  <body>  Type something: <input type="text" ng-model="sometext" />  <h1>Hello {{ sometext }}</h1>  <h1>Hello again {{ sometext }}</h1>  </body> </html>
  • 7. Services in Angular 1.x  <html ng-app=“app”>  var app = angular.module(“app”, []);  Controllers: app.controller(“myController”, function() { });  Directives: app.directive(“myDirective”, function() { });  Factories: app.factory(“myFactory”, function() { });  Services: app.service(“myService”, function() { });  Providers: app.provider(“MyProvider”, function() { });
  • 8. Click Events in Angular 1.x  <!DOCTYPE html>  <html ng-app=“app”>  <head><script src=…></script>  <script>  var app = angular.module(”app", []);  </script>  </head>  <body>  <button ng-click="count = count + 1" ng-init="count=3">  Increment the count  </button>  count: {{count}}  </body>  </html>
  • 9. Scope in Controller in Angular 1.x: AVOID  <!DOCTYPE html>  <html ng-app=“app”>  <head><script src=…></script></head>  <body>  <div ng-controller=”MyController">  <p>{{food}}</p>  </div>  <script>  var app = angular.module('app', []);  app.controller(”MyController", function($scope){  $scope.food = “Chicago pizza”;  });  </script>  </body>  </html>
  • 10. Best Practice: Controller As in Angular 1.3+  <!DOCTYPE html>  <html ng-app=“app”>  <head><script src=…></script></head>  <body>  <div ng-controller=”MyController as vm">  <p>{{vm.value}}</p>  </div>  <script>  var app = angular.module('app', []);  app.controller(”MyController", function(){  var vm = this;  vm.value = “stuffed pizza”;  });  </script>  </body></html>
  • 11. Best Practice: Controller As in Angular 1.3+  <!DOCTYPE html>  <html ng-app=“app”>  <head><script …></script></head>  <body>  <div ng-controller="ButtonController as bc">  <button ng-click="bc.clickMe()">Click Me</button>  </div>  <script>  var app = angular.module('app', []);  app.controller("ButtonController", function(){  var bc = this;  bc.clickMe = function() { alert("Hello World"); }  });  </script></body>  </html>
  • 12. Angular Factory Example (part 1)  <div ng-controller="MainCtrl as mc">  <input type="text" placeholder="Enter a Word:” name="name"  ng-model="mc.word" required />  <input type="submit" name="submit" value="Save”  ng-click='mc.saveItem()')  </div>  <script>  var app = angular.module("app", []);  app.controller("MainCtrl", function(db) {  var mc = this;  mc.word = "";  mc.saveItem = function() {  db.addItem(mc.word);  mc.word = "";  };
  • 13. Angular Factory (part 2)  app.factory('db', function() {  var items = [];  var dao = {};  dao.addItem = function(item) {  items.push(item);  return 'added item';  };  dao.getItems = function() {  return items;  }  // a factory must return an object:  return dao;  });
  • 14. Angular $http Service $http.get('https://api.github.com/users/johndoe') .success(function(data) {  $scope.gists = data; }) .error(function(data, status) {  console.error('Repos error', status, data); }) .finally(function() {  console.log("finally finished repos"); });
  • 15. Custom Directive in Angular 1.x  <!DOCTYPE html>  <html ng-app=“app”>  <head><script …></script></head>  <body>  <hello-world></hello-world>  <script>  var app = angular.module(”app", []);  app.directive('helloWorld', function() {  return {  //restrict: 'AE', // A, E, C, or M  template: '<h3>Hello World from SVCC</h3>’  };  });  </script>  </body></html>
  • 16. D3 Directive in Angular 1.x (outline)  <body>  <my-cube></my-cube>  <script>  var app = angular.module(”app", []);  app.directive('myCube', function() {  function link(scope, el, attr) {  // ADD YOUR CUSTOM D3 CODE HERE  }  // return an object to modify the DOM  return {  link: link,  restrict: 'E'  }  });  </script></body></html>
  • 17. D3 Code for a Cube (part 1)  // ADD YOUR CUSTOM D3 CODE HERE  var width = 300, height = 300, fillColors = ["red", "yellow", "blue"];  var points1 = "50,50 200,50 240,30 90,30";  var points2 = "200,50 200,200 240,180 240,30";  // “outer” SVG element (contains the cube):  var svg = d3.select(el)  .append("svg")  .attr("width", width)  .attr("height", height);  // top face (parallelogram):  var polygon = svg.append("polygon")  .attr("points", points1)  .attr("fill", fillColors[1])  .attr("stroke", "blue")  .attr("stroke-width", 1);
  • 18. D3 Code for a Cube (part 2)  // front face (rectangle)  svg.append("rect")  .attr("x", 50)  .attr("y", 50)  .attr("width", 150)  .attr("height", 150)  .attr("fill", fillColors[0]);  // right face (parallelogram)  var polygon = svg.append("polygon")  .attr("points", points2)  .attr("fill", fillColors[2])  .attr("stroke", "blue")  .attr("stroke-width", 1);
  • 19. Custom Directive Options in Angular 1.x  app.directive('helloWorld', function() {  return {  //omitting “restrict” and “template”  templateUrl: 'SomeMarkup.html',  controller: MyControllerFunction,  controllerAs: ctrl,  bindToController: true,  transclude: true, // overwrite versus include  compile: compileFunction, // before DOM insertion  link: linkFunction, // after DOM insertion  scope: {  oneWay: ‘@’, twoWay: ‘=‘, expr: ‘&’  }  };  });
  • 20. Two-way Data Binding  Model update causes view update  View update causes model update  Angular checks what has changed  Angular also checks what might have changed  Synchronizing view+model an be inefficient  Can lead to “infinite” loops ;(
  • 21. Best Practice: “One-time” Checking  A feature of Angular 1.3 (or higher): {{::firstname}} is Angular 1.3+ syntax  forAngular 1.2: use the bindonce module  Eliminates redundant checks (better performance)
  • 22. What about BackboneJS?  BackboneJS provides built-in objects:  A View object  A Model object  A Collection object  A Collections object
  • 23. Backbone and Angular 1.x (part 1)  <body ng-controller="MyController as ab">  <ul><li ng-repeat="item in ab.collection.models">  {{ item.name }}  <input type="number" ng-model="item.attributes.cost">  </li></ul>  <p>Total Cost: {{ ab.collection.totalCost() | currency }}</p>  <script>  var app = angular.module('app', []);  app.controller('MyController', function() {  var ab = this;   var data = [  { id: 1, name: 'Beer', cost: 10, quantity: 3 },  { id: 2, name: 'Pizza', cost: 20, quantity: 5 },  { id: 3, name: 'Chips', cost: 15, quantity: 2 }  ];
  • 24. Backbone and Angular 1.x (part 2)  var FoodCollection = Backbone.Collection.extend({  totalCost: function() {  var total = 0;  this.forEach(function(model) {  total += model.get('cost')*model.get('quantity');  });  return total;  }  });  ab.collection = new FoodCollection(data);  ab.items = ab.collection.toJSON();  });  </script>
  • 25. AngularJS + Other Technologies AngularJS + Backbone AngularJS + ReactJS AngularJS + Firebase AngularJS + Parse AngularJS + Pubnub AngularJS + Material Design UP NEXT: DELVING INTO ANGULAR 2…..
  • 26. Features of Angular 2 (part 1) ETA: Q1/Q2 of 2015 + component-based architecture + loosely coupled components + less code more application focus + "Mobile First" approach Angular 2 Github repository: https://github.com/angular/angular
  • 27. Features of Angular 2 (part 2) Angular 2 can be 5x faster than Angular 1.x One-way data binding (by default) Two-way data binding (optional) Dependency injection Support for ES6 and TypeScript Performance comparable to React(?)
  • 28. Ang1.x features dropped from Ang 2 + $scope + factories + controllers + providers + $apply + $digest + many built-in directives
  • 29. Angular 2 Template Syntax  [attribute] syntax: <input [value]="name”>  (method) syntax: <input #myname (keyup)=”vm.myCtrlMethod()">  ^ symbol handles bubble up events: <div (^click)=”handleClick()"> <div></div> </div>  [(method)] syntax for two-way binding: <input [(ng-model)]=”vm.foo”> <p>Hello {{vm.foo}}</p>
  • 30. Ang 1.x ng-repeat vs *ng-for  Angular 1.x “ng-repeat”: <ul> <li ng-repeat="user in users"> <h2>{{user.name}}</h2> </li> </ul>  Angular 2 “*ng-for”: <ul> <li *ng-for="#user in users"> <h2>{{user.name}}</h2> </li> </ul>
  • 31. The APIs of a DOM Element  Attributes: hold values in elements (always strings)  Properties: properties of a DOM object  Methods: the functions on a DOM object  Events: click, focus, input, etc  Attributes and properties sometimes match: The ‘src’ attribute of an <img> element  Attributes and properties sometimes do not match: <input value="pizza"> input.value = "beer"; input.getAttribute('value'); // "pizza”  NB: Ang 2 binds to properties; Ang 1.x binds to attributes
  • 32. What are Transpilers?  They convert code from one language to another  Babel (formerly 6to5): +converts ES6 (some ES7) to ECMA5 + appears to be the de facto standard  Traceur (Google): + converts ES6 to ECMA5 + used by Angular 2 TypeScript (MicroSoft): http://www.TypeScriptlang.org
  • 33. Angular 2 and ES6 ES6 classes (transpiled to ES5) @ symbol for annotations @Template @Component
  • 34. Angular 2 + ES6 Example import {Component, Template, bootstrap} from 'angular2/angular2'; @Component({ selector: 'my-app' }) @Template({ inline: '<h1>Hello {{ name }}</h1>' }) class MyAppComponent { // component controller constructor() { this.name = 'World!'; } } bootstrap(MyAppComponent);
  • 35. Angular 2 and Event Objects  <button (click)="clicked($event)"></button> @Component(...) @View(...) class MyComponent { clicked(event) { event.preventDefault(); // do stuff here } } bootstrap(MyComponent);
  • 36. Angular 2 and Forms (part 1)  import {Component, Template, Parent} from 'angular2/angular2'  import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms’;  @Component({  selector: 'login-page'  })  @Template({  url: 'pages/login.html',  directives: [View, FormDirectives]  })
  • 37. Angular 2 and Forms (part 2)  export class LoginPage {  constructor() {  var fb = new FormBuilder()  this.loginForm = fb.group({  email: ['', Validators.required],  password: ['', Validators.required],  });  }  doLogin(event) {  // Show the value of the form  console.log(this.loginForm.value);  event.preventDefault();  }  }
  • 38. Angular 2 and Forms (part 3)  <form (^submit)="doLogin($event)" [control-group]="loginForm">  <div>  <input control="email" type="email” placeholder="Your email">  </div>  <div>  <input control="password" type="email" placeholder="Your email">  </div>  <button type="submit">Log in</button>  </form>
  • 39. Angular2/Webpack Starter https://github.com/angular-class/angular2-webpack-starter  1) download zip file (or clone repo)  2) npm start (= "npm run server")  3) go to http://localhost:3000  Check out these files:  src/app/app.ts  src/app/bootstrap.ts
  • 40. More Useful Links  Change detection in Angular 2: https://github.com/angular/watchtower.js http://zone.js/ http://victorsavkin.com/post/110170125256/change- detection-in-angular-2  Angular scaffolding: https://github.com/DaftMonk/generator-angular-fullstack https://github.com/yeoman/generator-angular http://lauterry.github.io/ngTailor/  Touch animations: https://docs.google.com/document/d/16Z6Lun15DoWNr E2imk7N-2WiRAaqc954LOfU2- 2JSoI/edit#heading=h.rcjxs836qiki
  • 41. Angular Tutorials  Getting started with Angular 2: https://docs.google.com/document/d/1MkpvTNfmxHwd Sv9rQyQIvjRLnoGk4rvkNMkOEWTPkCw/edit#heading=h.6 z1yv9f94fuv  Building Angular Apps using Flux: https://docs.google.com/document/d/16axBamHEZORS_ KJZDjahLuhkhUuNVt77ZcGRoRiyjfQ/edit New features in Angular 1.4:  https://docs.google.com/document/d/1BkDxdkzB5Jm QBgpLKEkGY92pWF9Xr89cSLltPJVdHC0/edit
  • 42. Future Work in Angular 2 Server-side rendering Web Workers smooth and responsive UI Native mobile UI (see Ionic for mobile) Compile as build step
  • 43. What about ES6? Arrow functions and let keyword Block scopes Classes and inheritance Default parameters Destructured assignment Generators, Iterators, Maps, and Sets Promises and Rest parameters Spread operator Template Literals
  • 44. ES6 let and Arrow Functions let square = x => x * x; let add = (x, y) => x + y; let pi = () => 3.1415; console.log(square(8)); // 64 console.log(add(5, 9)); // 14 console.log(pi()); // 3.1415
  • 45. ES6 Class Definition (part 1) class Rectangle { constructor(height, width) { this.height = height; this.width = width; } calcArea() { return this.height * this.width; } }  var r1 = new Rectangle(5,10);  var r2 = new Rectangle(25,15);
  • 46. ES6 Class Definition (part 2)  console.log(“r1 area = ”+r1.calcArea());  console.log(“r2 area = ”+r2.calcArea());  Test this code here: http://babeljs.io/repl/  More Examples: https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Classes
  • 47. What is TypeScript?  A superset of JavaScript (ES6): 10/01/2012  A compiled language (tsc compiler)  strong typing and also type inferencing  Type checking during compile time  “minimal” extra compile time overhead  “.ts” files are transpiled into “.js” files (via tsc)  “lib.d.ts” contains TypeScript definitions  TypeScript type definitions (update via “nuget”): https://github.com/borisyankov/DefinitelyTyped
  • 48. TypeScript Variables  var isDone: boolean = false;  var height: number = 6;  var name: string = "dave";  var myList:number[] = [1, 2, 3]; // option #1  var myList:Array<number> = [1, 2, 3]; // option #2  var changeMe: any = 4;  changeMe = ”I’m a string now";  var myList:any[] = [1, true, ”pizza"];
  • 49. TypeScript Functions  void return type: function myLogger(msg?:string): void { console.log("My custom logger: “+msg); }  Generics: function identity<T>(arg: T): T { return arg; } // output has 'string' type (explicit/inferred): var output = identity<string>("Dave"); var output = identity("Dave");
  • 50. TypeScript ‘any’ Type  any return type:  function selectSomething(x): any {  if (typeof x == "object") {  return 10;  } else {  return "abc";  }  } NB: “any” type disables type checking NB: you can disallow implicit “any” in Visual Studio
  • 51. Functions versus Lambda Expressions  JavaScript Function: var doubleJS = function(x) { return 2*x; }  TypeScript Function: var doubleTS = function(x:number) {return 2*x;}  Lambda versions of the TypeScript function: var lambdaTS = (x:number) => 2*x; var lambdaTS = x => 2*x; Another Lambda function: var x = function(delay:number, () =>void) { // timer code });
  • 52. TypeScript Interfaces interface User { name: string; weight?: number; // optional } function displayUser(user: User) { console.log(user.name); }  This works even without ‘weight’ in the interface: var aUser = {name: "John Smith", weight:200}; displayUser(aUser);
  • 53. TypeScript Class (part 1) class User { fname: string; lname: string; constructor(fname:string, lname:string) { this.fname = fname; this.lname = lname; } fullname():string { return this.fname+" "+this.lname; } }
  • 54. TypeScript Class (part 2)  var u1:User, u2:User;  u1 = new User("Jane", "Smith");  u2 = new User("John", "Jones");  console.log("user1 = "+u1.fullname());  console.log("user2 = "+u2.fullname());  Exercise: use an interface in class User  Aside: use interfaces as arguments of public methods (whenever possible) instead of using standard JS/TS types or class instances
  • 55. Convert JSON Data to TS Class (1) Consider the following array of data: var people = [ {fname:"Jane",lname:"Smith",zip:"94043"}, {fname:"John",lname:"Jones",zip:"94539"}, {fname:"Dave",lname:"Starr",zip:"67800"} ]
  • 56. Convert JSON Data to TS Class (2) class People {  public fname:string;  public lname:string;  public zip:string;  constructor(public fname:string,  public lname:string,  public zip:string) {  this.fname = fname;  this.lname = lname;  this.zip = zip;  } }
  • 57. Convert JSON Data to TS Class (3) Array of TypeScript objects: var TSPeople = [ new People("Jane","Smith","94043"), new People("John","Jones","94539"), new People("Dave","Starr","67800") ];
  • 58. TypeScript and the this keyword  The this keyword is contextually bound in the same fashion as standard JS functions  The this keyword is lexically bound in Lamba functions so it’s automatically captured (emitted JS uses _this)  Typically based on how the function is called  More information about the this keyword: https://tinyurl.com/MDNthis
  • 59. Migrating JS ‘classes’ to TypeScript  Option #1: Annotate with an interface: +Interface and impl are synchronized manually +Faster initially and lower risk  Option #2: Refactor as a class: +More initial code changes +More maintainable and semantic http://www.typescriptlang.org/Handbook
  • 60. What about Aurelia?  Similar to Angular 2 and created by Rob Eisenberg: http://aurelia.io/  Blog post: http://www.syntaxsuccess.com/viewarticle/angular- 2.0-vs-aurelia  Code sample: http://www.syntaxsuccess.com/articleList/aurelia
  • 61. What Should I Learn???  Main features of ES6 and TypeScript 1.5+  “basic” Angular 1.4 and 2 (best practices)  Practice converting code from ANG 1.x to 2  Select an IDE: +WebStorm 10: free 30-day trial ($49/year) +Visual Studio Code (free) + Atom (free) with atom-TypeScript extension  Command Line Tools: + npm, npmjs, gulp, grunt (older), broccoli, + webpack, browserify (older), jspm+systemjs https://github.com/addyosmani/es6-tools
  • 62. Other Technologies to Learn  Sass/Bootstrap 4 (previous: less)  HandleBars/Nunjucks (previous: Jade/EJS)  Material Design (and MDL)  Firebase/AngularFire  D3.js for Data Visualization  Ionic (=Angular for Mobile)
  • 63. Browser Status for ES6  Modern IE: https://goo.gl/56n7IL  Mozilla: https://goo.gl/iSNDf9  Chrome: https://www.chromestatus.com/features#ES6
  • 65. What about ReactJS? Provides “V” in MVC One-way data binding JSX (optional) Hierarchical set of components “React” = top-level namespace Maintains a “virtual DOM” Only updates the “delta” Hence it’s very efficient
  • 66. What about EmberJS 2.0? Learning curve Two-way data binding MVC pattern Involves accessors (“get”) involves mutators (“set”)
  • 67. People to follow  Addy Osmani: http://www.super-script.us/2015/es6-tools.html  Nicolas Bevacqua: http://ponyfoo.com/  Dr. Axel Rauschmeyer: http://www.2ality.com/  Mike North: https://frontendmasters.com/
  • 68. Web Components Meetup  This meetup is currently at HackerDojo in MTV: http://www.meetup.com/Web-Components-Silicon- Valley-Meetup/
  • 69. Github + Graphics Samples  https://github.com/ocampesato/reactjs-graphics  https://github.com/ocampesato/angular-graphics  https://github.com/ocampesato/web-animations  https://github.com/ocampesato/polymer-svg-css3
  • 70. Recent/Upcoming Books and Training 1) HTML5 Canvas and CSS3 Graphics (2013) 2) jQuery, CSS3, and HTML5 for Mobile (2013) 3) HTML5 Pocket Primer (2013) 4) jQuery Pocket Primer (2013) 5) HTML5 Mobile Pocket Primer (2014) 6) D3 Pocket Primer (2015) 7) Python Pocket Primer (2015) 8) AngularJS Pocket Primer (2016)