chore: Angular 1 -> AngularJS / Angular 2 -> Angular (#3143)

* chore: Angular 1 -> AngularJS / Angular 2 -> Angular

* Jesus' tweaks
This commit is contained in:
Ward Bell 2017-01-26 03:26:11 -08:00 committed by Jesús Rodríguez
parent 969f169eb1
commit de4903be56
81 changed files with 575 additions and 560 deletions

View File

@ -4,7 +4,7 @@
Angular.io is site for Angular **documentation** . Angular.io is site for Angular **documentation** .
This site also includes links to other helpful angular resources including This site also includes links to other helpful angular resources including
Angular 2, Angular 1, Angular Material, and AngularFire. AngularJS, Angular Material, and AngularFire.
## Issues ## Issues
@ -140,7 +140,8 @@ gulp install-example-angular
## Technology Used ## Technology Used
- Angular 1.x: The production ready version of Angular - Angular: Current Angular
- AngularJS: A v.1.x version of Angular
- Angular Material: An implementation of Material Design in Angular.js - Angular Material: An implementation of Material Design in Angular.js
- Gulp: node-based tooling - Gulp: node-based tooling
- Harp: The static web server with built-in preprocessing. - Harp: The static web server with built-in preprocessing.

View File

@ -57,6 +57,10 @@
"source": "/docs/js/latest/tutorial", "source": "/docs/js/latest/tutorial",
"destination": "/docs/js/latest/index.html" "destination": "/docs/js/latest/index.html"
}, },
{
"source": "/docs/ts/latest/cookbook/a1-a2-quick-reference.html",
"destination": "/docs/ts/latest/cookbook/ajs-quick-reference.html"
},
{ {
"source": "/docs/ts/latest/guide/setup.html", "source": "/docs/ts/latest/guide/setup.html",
"destination": "/docs/ts/latest/index.html" "destination": "/docs/ts/latest/index.html"
@ -109,4 +113,4 @@
"docs/dart/**" "docs/dart/**"
] ]
} }
} }

View File

@ -56,7 +56,7 @@
"picture": "/resources/images/bios/jelbourn.jpg", "picture": "/resources/images/bios/jelbourn.jpg",
"twitter": "jelbourn", "twitter": "jelbourn",
"website": "https://plus.google.com/+JeremyElbourn/", "website": "https://plus.google.com/+JeremyElbourn/",
"bio": "Angular Material 2 Team Lead. FE Engineer @ Google specializing in AngularJS, component design, and the cleanest of code.", "bio": "Angular Material Team Lead. FE Engineer @ Google specializing in AngularJS, component design, and the cleanest of code.",
"type": "Lead" "type": "Lead"
}, },
@ -65,7 +65,7 @@
"picture": "/resources/images/bios/pete.jpg", "picture": "/resources/images/bios/pete.jpg",
"twitter": "petebd", "twitter": "petebd",
"website": "http://www.bacondarwin.com", "website": "http://www.bacondarwin.com",
"bio": "Angular 1 for JS Team Lead. Pete has been working on the core team since 2012 and became the team lead for the Angular 1 for JS branch in November 2014. He has co-authored a book on AngularJS and regularly talks about and teaches Angular.", "bio": "AngularJS for JS Team Lead. Pete has been working on the core team since 2012 and became the team lead for the AngularJS for JS branch in November 2014. He has co-authored a book on AngularJS and regularly talks about and teaches Angular.",
"type": "Lead" "type": "Lead"
}, },
@ -74,7 +74,7 @@
"picture": "/resources/images/bios/thomas.jpg", "picture": "/resources/images/bios/thomas.jpg",
"twitter": "ThomasBurleson", "twitter": "ThomasBurleson",
"website": "http://www.solutionOptimist.com", "website": "http://www.solutionOptimist.com",
"bio": "Angular Material 1.x and @angular/flex-layout Team Lead. Thomas joined the core team in 2014. He leads a team of developers working on UX components for Angular 1.x.", "bio": "AngularJS Material and @angular/flex-layout Team Lead. Thomas joined the core team in 2014. He leads a team of developers working on UX components for AngularJS.",
"type": "Lead" "type": "Lead"
}, },
"stephenfluin": { "stephenfluin": {
@ -98,7 +98,7 @@
"picture": "/resources/images/bios/xiaofei.jpg", "picture": "/resources/images/bios/xiaofei.jpg",
"twitter": "", "twitter": "",
"website": "http://github.com/damoqiongqiu", "website": "http://github.com/damoqiongqiu",
"bio": "Aaron is Angular's developer PM in China. He is the lead for angular.cn and social channels in China, and helps developers in China's enterprise and open source communities to be successful with Angular. One of the earliest Angular developers in China since 2012, he translated the first books on Angular into Chinese. Aaron joined the Google team in 2016.", "bio": "Aaron is Angular's developer PM in China. He is the lead for angular.cn and social channels in China, and helps developers in China's enterprise and open source communities to be successful with Angular. One of the earliest Angular developers in China since Angular 2012, he translated the first books on Angular into Chinese. Aaron joined the Google team in 2016.",
"type": "Google" "type": "Google"
}, },
"tobias": { "tobias": {
@ -159,7 +159,7 @@
"picture": "/resources/images/bios/alex-rickabaugh.jpg", "picture": "/resources/images/bios/alex-rickabaugh.jpg",
"twitter": "synalx", "twitter": "synalx",
"website": "https://plus.google.com/+AlexRickabaugh/about", "website": "https://plus.google.com/+AlexRickabaugh/about",
"bio": "Core team member working to optimize the Angular platform for the next generation of applications, including mobile. Before joining the Angular team, Alex worked in the Google sales organization where he helped build the first large Angular2 application within Google.", "bio": "Core team member working to optimize the Angular platform for the next generation of applications, including mobile. Before joining the Angular team, Alex worked in the Google sales organization where he helped build the first large Angular application within Google.",
"type": "Google" "type": "Google"
}, },
@ -195,7 +195,7 @@
"picture": "/resources/images/bios/victor.jpg", "picture": "/resources/images/bios/victor.jpg",
"twitter": "victorsavkin", "twitter": "victorsavkin",
"website": "http://victorsavkin.com/", "website": "http://victorsavkin.com/",
"bio": "Victor has been on the Angular team since the inception of Angular 2. While at Google, Victor developed dependency injection, change detection, forms, and the router. Today he is a co-founder at nrwl.io.", "bio": "Victor has been on the Angular team since the inception of Angular. While at Google, Victor developed dependency injection, change detection, forms, and the router. Today he is a co-founder at nrwl.io.",
"type": "Community" "type": "Community"
}, },
"jeffcross": { "jeffcross": {
@ -203,7 +203,7 @@
"picture": "/resources/images/bios/jeff-cross.jpg", "picture": "/resources/images/bios/jeff-cross.jpg",
"twitter": "jeffbcross", "twitter": "jeffbcross",
"website": "https://twitter.com/jeffbcross", "website": "https://twitter.com/jeffbcross",
"bio": "Jeff was one of the earliest core team members on Angular 1. He developed the Angular 2 http and AngularFire2 modules, contributed to RxJS 5, and was most recently the Tech Lead of the Angular Mobile team at Google. Jeff is a former Googler and co-founder at nrwl.io.", "bio": "Jeff was one of the earliest core team members on AngularJS. He developed the Angular http and AngularFire modules, contributed to RxJS 5, and was most recently the Tech Lead of the Angular Mobile team at Google. Jeff is a former Googler and co-founder at nrwl.io.",
"type": "Community" "type": "Community"
}, },
"alexwolfe": { "alexwolfe": {
@ -220,7 +220,7 @@
"picture": "/resources/images/bios/marcy.jpg", "picture": "/resources/images/bios/marcy.jpg",
"twitter": "marcysutton", "twitter": "marcysutton",
"website": "http://marcysutton.com", "website": "http://marcysutton.com",
"bio": "Marcy Sutton is a senior front-end engineer at Deque Systems, where she works on the axe-core team focusing on accessibility test integrations. Marcy is passionate about making the web accessible for everyone. She is a core team member to ngMaterial 1 and 2, where she regularly brings her accessibility expertise to the tableshe is also a primary contributor to the ngAria module as well as an accessibility plugin for Protractor. She's in love with riding bicycles and snowboards and can often be found outside.", "bio": "Marcy Sutton is a senior front-end engineer at Deque Systems, where she works on the axe-core team focusing on accessibility test integrations. Marcy is passionate about making the web accessible for everyone. She is a core team member to Angular Material, where she regularly brings her accessibility expertise to the tableshe is also a primary contributor to the ngAria module as well as an accessibility plugin for Protractor. She's in love with riding bicycles and snowboards and can often be found outside.",
"type": "Community" "type": "Community"
}, },
@ -303,7 +303,7 @@
"picture": "/resources/images/bios/michal.jpg", "picture": "/resources/images/bios/michal.jpg",
"twitter": "m_gol", "twitter": "m_gol",
"website": "https://plus.google.com/u/0/103101124310040612163/", "website": "https://plus.google.com/u/0/103101124310040612163/",
"bio": "Front-end developer at Laboratorium EE, core contributor to Angular & jQuery. Makes sure Angular 1 & jQuery work fine together. Interested in new JavaScript standards.", "bio": "Front-end developer at Laboratorium EE, core contributor to Angular & jQuery. Makes sure AngularJS & jQuery work fine together. Interested in new JavaScript standards.",
"type": "Community" "type": "Community"
}, },
@ -345,7 +345,7 @@
"picture": "/resources/images/bios/patrick-stapleton.jpg", "picture": "/resources/images/bios/patrick-stapleton.jpg",
"twitter": "gdi2290", "twitter": "gdi2290",
"website": "https://angularclass.com", "website": "https://angularclass.com",
"bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular2, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular server-side rendering as Universal Angular and teaching Modern Web Development at AngularClass. He was previously the CTO of Keychain Logistics, a HackReactor Instructor and Alum.", "bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular server-side rendering as Universal Angular and teaching Modern Web Development at AngularClass. He was previously the CTO of Keychain Logistics, a HackReactor Instructor and Alum.",
"type": "Community" "type": "Community"
}, },
@ -378,7 +378,7 @@
"name": "Martin Staffa", "name": "Martin Staffa",
"picture": "/resources/images/bios/martinstaffa.jpg", "picture": "/resources/images/bios/martinstaffa.jpg",
"twitter": "Narretz", "twitter": "Narretz",
"bio": "Martin is an English major turned web developer who loves frontend stuff. He's been part of the Angular 1 team since 2014. If you can't find him roaming the Github issue queues, he's probably out with his camera somewhere.", "bio": "Martin is an English major turned web developer who loves frontend stuff. He's been part of the AngularJS team since 2014. If you can't find him roaming the Github issue queues, he's probably out with his camera somewhere.",
"type": "Community" "type": "Community"
}, },
@ -414,7 +414,7 @@
"picture": "/resources/images/bios/deborah.jpg", "picture": "/resources/images/bios/deborah.jpg",
"twitter": "deborahkurata", "twitter": "deborahkurata",
"website": "http://blogs.msmvps.com/deborahk/", "website": "http://blogs.msmvps.com/deborahk/",
"bio": "Deborah is an independent software developer and author. She is author of several Pluralsight courses including: 'Angular 2: Getting Started'", "bio": "Deborah is an independent software developer and author. She is author of several Pluralsight courses including: 'Angular: Getting Started'",
"type": "Community" "type": "Community"
}, },
@ -516,7 +516,7 @@
"picture": "/resources/images/bios/devversion.jpg", "picture": "/resources/images/bios/devversion.jpg",
"website": "http://github.com/DevVersion/", "website": "http://github.com/DevVersion/",
"twitter": "DevVersion", "twitter": "DevVersion",
"bio": "Paul is an aspiring 16-year-old developer living in Germany. While attending school, Paul works as a core team member on the Angular Material projects. He is a prolific contributor to all aspects of Angular 1 and Angular 2 and hopes to work at Google during his college studies!", "bio": "Paul is an aspiring 16-year-old developer living in Germany. While attending school, Paul works as a core team member on the Angular Material projects. He is a prolific contributor to all aspects of AngularJS and Angular and hopes to work at Google during his college studies!",
"type": "Community" "type": "Community"
}, },

View File

@ -30,7 +30,7 @@ style(rel='stylesheet').
li. li.
Best Technology Demonstration Best Technology Demonstration
<br> <br>
<small>Huge hint: Angular 2 scores points</small> <small>Huge hint: Angular scores points</small>
p Dont have Cardboard and want one? Check out: p Dont have Cardboard and want one? Check out:
p.text-center p.text-center

View File

@ -1,9 +0,0 @@
{
"description": "Angular 1 to Angular 2 Quick Reference",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
],
"tags":["cookbook"]
}

View File

@ -1,8 +1,8 @@
'use strict'; // necessary for es6 output in node 'use strict'; // necessary for es6 output in node
import { browser, element, by } from 'protractor'; import { browser, element, by } from 'protractor';
describe('Angular 1 to 2 Quick Reference Tests', function () { describe('AngularJS to Angular Quick Reference Tests', function () {
beforeAll(function () { beforeAll(function () {
browser.get(''); browser.get('');

View File

@ -20,7 +20,7 @@ export class AppComponent {
movie: IMovie = null; movie: IMovie = null;
movies: IMovie[] = []; movies: IMovie[] = [];
showImage = true; showImage = true;
title: string = 'A1-A2 Quick Ref Cookbook'; title: string = 'AngularJS to Angular Quick Ref Cookbook';
toggleImage(event: UIEvent) { toggleImage(event: UIEvent) {
this.showImage = !this.showImage; this.showImage = !this.showImage;
this.eventType = (event && event.type) || 'not provided'; this.eventType = (event && event.type) || 'not provided';

View File

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -3,7 +3,7 @@
<head> <head>
<base href="/"> <base href="/">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Angular 1 to Angular 2 Quick Reference</title> <title>AngularJS to Angular Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- #docregion style --> <!-- #docregion style -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -0,0 +1,9 @@
{
"description": "AngularJS to Angular Quick Reference",
"files":[
"!**/*.d.ts",
"!**/*.js",
"!**/*.[1].*"
],
"tags":["cookbook", "angularjs"]
}

View File

@ -19,7 +19,7 @@ describe('i18n E2E Tests', () => {
it('should display the translated title attribute', function () { it('should display the translated title attribute', function () {
const title = element(by.css('img')).getAttribute('title'); const title = element(by.css('img')).getAttribute('title');
expect(title).toBe('Logo de Angular 2'); expect(title).toBe('Logo de Angular');
}); });
it('should display the plural of: a horde of wolves', function () { it('should display the plural of: a horde of wolves', function () {

View File

@ -11,5 +11,5 @@
<!--#enddocregion i18n-attribute-desc--> <!--#enddocregion i18n-attribute-desc-->
<!--#docregion i18n-title--> <!--#docregion i18n-title-->
<img [src]="logo" title="Angular 2 logo"> <img [src]="logo" title="Angular logo">
<!--#enddocregion i18n-title--> <!--#enddocregion i18n-title-->

View File

@ -18,7 +18,7 @@ I don't output any element either
<br /> <br />
<!--#docregion i18n-title-translate--> <!--#docregion i18n-title-translate-->
<img [src]="logo" i18n-title title="Angular 2 logo" /> <img [src]="logo" i18n-title title="Angular logo" />
<!--#enddocregion i18n-title-translate--> <!--#enddocregion i18n-title-translate-->
<br> <br>
<button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button> <button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button>

View File

@ -20,9 +20,9 @@ I don&apos;t output any element either
<note priority="1" from="description">optional description</note> <note priority="1" from="description">optional description</note>
<note priority="1" from="meaning">optional meaning</note> <note priority="1" from="meaning">optional meaning</note>
</trans-unit> </trans-unit>
<trans-unit id="35ab5d6121ecbe0decdda638571a5a55ac77d5c4" datatype="html"> <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
<source>Angular 2 logo</source> <source>Angular logo</source>
<target>Logo de Angular 2</target> <target>Logo de Angular</target>
</trans-unit> </trans-unit>
<trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html"> <trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">
<source/> <source/>

View File

@ -23,9 +23,9 @@
<note priority="1" from="description">optional description</note> <note priority="1" from="description">optional description</note>
<note priority="1" from="meaning">optional meaning</note> <note priority="1" from="meaning">optional meaning</note>
</trans-unit> </trans-unit>
<trans-unit id="35ab5d6121ecbe0decdda638571a5a55ac77d5c4" datatype="html"> <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
<source>Angular 2 logo</source> <source>Angular logo</source>
<target>Logo de Angular 2</target> <target>Logo de Angular</target>
</trans-unit> </trans-unit>
<!-- #enddocregion translated-other-nodes --> <!-- #enddocregion translated-other-nodes -->
<!-- #docregion translated-plural --> <!-- #docregion translated-plural -->

View File

@ -20,8 +20,14 @@ I don&apos;t output any element either
<note priority="1" from="description">optional description</note> <note priority="1" from="description">optional description</note>
<note priority="1" from="meaning">optional meaning</note> <note priority="1" from="meaning">optional meaning</note>
</trans-unit> </trans-unit>
<trans-unit id="35ab5d6121ecbe0decdda638571a5a55ac77d5c4" datatype="html"> <trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
<source>Angular 2 logo</source> <source>Angular logo</source>
<target/>
</trans-unit>
<trans-unit id="2579611bfcccd75bcd41fac90150d27d6ebb30b8" datatype="html">
<source>
<x id="START_TAG_SPAN" ctype="x-span"/><x id="ICU"/><x id="CLOSE_TAG_SPAN" ctype="x-span"/>
</source>
<target/> <target/>
</trans-unit> </trans-unit>
<trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html"> <trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Angular 2 Upgrade</title> <title>Angular Upgrade</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -6,9 +6,9 @@ The following changes from vanilla Phonecat are applied:
* The TypeScript config file shown in the guide is `tsconfig.ng1.json` instead * The TypeScript config file shown in the guide is `tsconfig.ng1.json` instead
of the default, because we don't want to enable `noImplicitAny` for migration. of the default, because we don't want to enable `noImplicitAny` for migration.
* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate * Karma config for unit tests is in karma.conf.ng1.js because the boilerplate
Karma config is not compatible with the way Angular 1 tests need to be run. Karma config is not compatible with the way AngularJS tests need to be run.
The shell script run-unit-tests.sh can be used to run the unit tests. The shell script run-unit-tests.sh can be used to run the unit tests.
* Instead of using Bower, Angular 1 and its dependencies are fetched from a CDN * Instead of using Bower, AngularJS and its dependencies are fetched from a CDN
in index.html and karma.conf.ng1.js. in index.html and karma.conf.ng1.js.
* E2E tests have been moved to the parent directory, where `gulp run-e2e-tests` can * E2E tests have been moved to the parent directory, where `gulp run-e2e-tests` can
discover and run them along with all the other examples. discover and run them along with all the other examples.

View File

@ -1,5 +1,4 @@
// #docregion // #docregion
angular. angular.
module('core'). module('core').
filter('checkmark', function() { filter('checkmark', function() {

View File

@ -1,4 +1,4 @@
## The boilerplate Karma configuration won't work with Angular 1 tests since ## The boilerplate Karma configuration won't work with AngularJS tests since
## a specific loading configuration is needed for them. ## a specific loading configuration is needed for them.
## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with
## that config. ## that config.

View File

@ -4,13 +4,13 @@ structure.
The following changes from vanilla Phonecat are applied: The following changes from vanilla Phonecat are applied:
* Karma config for unit tests is in karma.conf.ng1.js because the boilerplate * Karma config for unit tests is in karma.conf.ng1.js because the boilerplate
Karma config is not compatible with the way Angular 1 tests need to be run. Karma config is not compatible with the way AngularJS tests need to be run.
The shell script run-unit-tests.sh can be used to run the unit tests. The shell script run-unit-tests.sh can be used to run the unit tests.
* There's a `package.ng1.json`, which is not used to run anything but only to * There's a `package.ng1.json`, which is not used to run anything but only to
show an example of changing the PhoneCat http-server root path. show an example of changing the PhoneCat http-server root path.
* Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't * Also for the Karma shim, there is a `karma-test-shim.1.js` file which isn't
used but is shown in the test appendix. used but is shown in the test appendix.
* Instead of using Bower, Angular 1 and its dependencies are fetched from a CDN * Instead of using Bower, AngularJS and its dependencies are fetched from a CDN
in index.html and karma.conf.ng1.js. in index.html and karma.conf.ng1.js.
* E2E tests have been moved to the parent directory, where `run-e2e-tests` can * E2E tests have been moved to the parent directory, where `run-e2e-tests` can
discover and run them along with all the other examples. discover and run them along with all the other examples.

View File

@ -1,7 +1,7 @@
// #docregion // #docregion
'use strict'; 'use strict';
// Define the `phonecatApp` Angular 1 module // Define the `phonecatApp` AngularJS module
angular.module('phonecatApp', [ angular.module('phonecatApp', [
'ngAnimate', 'ngAnimate',
'ngRoute', 'ngRoute',

View File

@ -33,7 +33,7 @@ module.exports = function(config) {
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Angular 2 itself and the testing library // Angular itself and the testing library
{pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
{pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},

View File

@ -1,4 +1,4 @@
## The boilerplate Karma configuration won't work with Angular 1 tests since ## The boilerplate Karma configuration won't work with AngularJS tests since
## a specific loading configuration is needed for them. ## a specific loading configuration is needed for them.
## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with
## that config. ## that config.

View File

@ -33,7 +33,7 @@ module.exports = function(config) {
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Angular 2 itself and the testing library // Angular itself and the testing library
{pattern: 'node_modules/@angular/**/*.js', included: false, watched: false}, {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
{pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false}, {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},

View File

@ -1,4 +1,4 @@
## The boilerplate Karma configuration won't work with Angular 1 tests since ## The boilerplate Karma configuration won't work with AngularJS tests since
## a specific loading configuration is needed for them. ## a specific loading configuration is needed for them.
## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with
## that config. ## that config.

View File

@ -15,15 +15,15 @@
th Task th Task
th Speed th Speed
tr tr
td Angular 1.3 td AngularJS v.1.3
td Routing td Routing
td fast td fast
tr tr
td Angular 1.4 td AngularJS v.1.4
td Routing td Routing
td faster td faster
tr tr
td Angular 2 td Angular
td Routing td Routing
td fastest :) td fastest :)
@ -35,6 +35,6 @@
th Task th Task
th Speed th Speed
tr tr
td Angular 1.3 td AngularJS v.1.3
td Routing td Routing
td fast td fast

View File

@ -5,10 +5,10 @@
"intro": "A collection of recipes for common Angular application scenarios" "intro": "A collection of recipes for common Angular application scenarios"
}, },
"a1-a2-quick-reference": { "ajs-quick-reference": {
"title": "Angular 1 to 2 Quick Reference", "title": "AngularJS to Angular Quick Reference",
"navTitle": "Angular 1 to 2 Quick Ref", "navTitle": "AngularJS to Angular Quick Ref",
"intro": "Learn how Angular 1 concepts and techniques map to Angular 2" "intro": "Learn how AngularJS concepts and techniques map to Angular"
}, },
"ngmodule-faq": { "ngmodule-faq": {

View File

@ -144,8 +144,8 @@
}, },
"upgrade": { "upgrade": {
"title": "Upgrading from 1.x", "title": "Upgrading to Angular",
"intro": "Angular 1 applications can be incrementally upgraded to Angular 2." "intro": "AngularJS applications can be incrementally upgraded to Angular."
}, },
"webpack": { "webpack": {

View File

@ -311,7 +311,7 @@ figure.image-display
:marked :marked
### Make some changes ### Make some changes
Try changing the message to "Hello Angular 2!". Try changing the message to "Hello Angular!".
`lite-server` is watching, so it should detect the change, `lite-server` is watching, so it should detect the change,
refresh the browser, and display the revised message. refresh the browser, and display the revised message.

View File

@ -10,10 +10,10 @@
"intro": "Learn how to use Ahead-of-time compilation" "intro": "Learn how to use Ahead-of-time compilation"
}, },
"a1-a2-quick-reference": { "ajs-quick-reference": {
"title": "Angular 1 to 2 Quick Reference", "title": "AngularJS to Angular Quick Reference",
"navTitle": "Angular 1 to 2 Quick Ref", "navTitle": "AngularJS to Angular",
"intro": "Learn how Angular 1 concepts and techniques map to Angular 2" "intro": "Learn how AngularJS concepts and techniques map to Angular"
}, },
"ngmodule-faq": { "ngmodule-faq": {

View File

@ -1,12 +1,14 @@
include ../_util-fns include ../_util-fns
a(id="top") a(id="top")
:marked :marked
There are many conceptual and syntactical differences between Angular&nbsp;1 and Angular&nbsp;2. _Angular_ is the name for the Angular of today and tomorrow.
This page provides a quick guide to some common Angular&nbsp;1 _AngularJS_ is the name for all v1.x versions of Angular.
syntax and its equivalent in Angular&nbsp;2.
This guide helps you transition from AngularJS to Angular
by mapping AngularJS syntax to the equivalent Angular syntax.
:marked :marked
**See the Angular 2 syntax in this <live-example name="cb-a1-a2-quick-reference"></live-example>**. **See the Angular syntax in this <live-example name="cb-ajs-quick-reference"></live-example>**.
## Contents ## Contents
This page covers: This page covers:
@ -14,25 +16,25 @@ a(id="top")
* [Template directives](#template-directives) - built-in directives `ngIf` and `ngClass`. * [Template directives](#template-directives) - built-in directives `ngIf` and `ngClass`.
* [Filters/pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular&nbsp;2. * [Filters/pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular.
* [Modules/controllers/components](#controllers-components) - *modules* in Angular&nbsp;2 are slightly different from *modules* in Angular&nbsp;1, and *controllers* are *components* in Angular&nbsp;2. * [Modules/controllers/components](#controllers-components) - *modules* in Angular are slightly different from *modules* in AngularJS, and *controllers* are *components* in Angular.
* [Style sheets](#style-sheets) - more options for CSS than in Angular&nbsp;1. * [Style sheets](#style-sheets) - more options for CSS than in AngularJS.
.l-main-section .l-main-section
:marked :marked
## Template basics ## Template basics
Templates are the user-facing part of an Angular application and are written in HTML. Templates are the user-facing part of an Angular application and are written in HTML.
The following table lists some of the key Angular&nbsp;1 template features with their equivalent Angular&nbsp;2 template syntax. The following table lists some of the key AngularJS template features with their equivalent Angular template syntax.
- var top="vertical-align:top" - var top="vertical-align:top"
table(width="100%") table(width="100%")
col(width="50%") col(width="50%")
col(width="50%") col(width="50%")
tr tr
th Angular&nbsp;1 th AngularJS
th Angular&nbsp;2 th Angular
tr(style=top) tr(style=top)
td td
:marked :marked
@ -40,7 +42,7 @@ table(width="100%")
code-example. code-example.
Your favorite hero is: {{vm.favoriteHero}} Your favorite hero is: {{vm.favoriteHero}}
:marked :marked
In Angular&nbsp;1, an expression in curly braces denotes one-way binding. In AngularJS, an expression in curly braces denotes one-way binding.
This binds the value of the element to a property in the controller This binds the value of the element to a property in the controller
associated with this template. associated with this template.
@ -50,9 +52,9 @@ table(width="100%")
td td
:marked :marked
### Bindings/interpolation ### Bindings/interpolation
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'interpolation')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.html', 'interpolation')(format="." )
:marked :marked
In Angular&nbsp;2, a template expression in curly braces still denotes one-way binding. In Angular, a template expression in curly braces still denotes one-way binding.
This binds the value of the element to a property of the component. This binds the value of the element to a property of the component.
The context of the binding is implied and is always the The context of the binding is implied and is always the
associated component, so it needs no reference variable. associated component, so it needs no reference variable.
@ -65,17 +67,17 @@ table(width="100%")
code-example. code-example.
&lt;td>{{movie.title | uppercase}}&lt;/td> &lt;td>{{movie.title | uppercase}}&lt;/td>
:marked :marked
To filter output in Angular&nbsp;1 templates, use the pipe character (|) and one or more filters. To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
This example filters the `title` property to uppercase. This example filters the `title` property to uppercase.
td td
:marked :marked
### Pipes ### Pipes
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'uppercase')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'uppercase')(format="." )
:marked :marked
In Angular&nbsp;2 you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**. In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**.
Many (but not all) of the built-in filters from Angular&nbsp;1 are Many (but not all) of the built-in filters from AngularJS are
built-in pipes in Angular&nbsp;2. built-in pipes in Angular.
For more information, see the heading [Filters/pipes](#filters-pipes) below. For more information, see the heading [Filters/pipes](#filters-pipes) below.
tr(style=top) tr(style=top)
@ -91,9 +93,9 @@ table(width="100%")
td td
:marked :marked
### Input variables ### Input variables
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'local')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'local')(format="." )
:marked :marked
Angular&nbsp;2 has true template input variables that are explicitly defined using the `let` keyword. Angular has true template input variables that are explicitly defined using the `let` keyword.
For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax) section of the Template Syntax page. For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax) section of the Template Syntax page.
:marked :marked
@ -102,16 +104,16 @@ table(width="100%")
.l-main-section .l-main-section
:marked :marked
## Template directives ## Template directives
Angular&nbsp;1 provides more than seventy built-in directives for templates. AngularJS provides more than seventy built-in directives for templates.
Many of them aren't needed in Angular&nbsp;2 because of its more capable and expressive binding system. Many of them aren't needed in Angular because of its more capable and expressive binding system.
The following are some of the key Angular&nbsp;1 built-in directives and their equivalents in Angular&nbsp;2. The following are some of the key AngularJS built-in directives and their equivalents in Angular.
table(width="100%") table(width="100%")
col(width="50%") col(width="50%")
col(width="50%") col(width="50%")
tr tr
th Angular&nbsp;1 th AngularJS
th Angular&nbsp;2 th Angular
tr(style=top) tr(style=top)
td td
:marked :marked
@ -121,18 +123,18 @@ table(width="100%")
:marked :marked
The application startup process is called **bootstrapping**. The application startup process is called **bootstrapping**.
Although you can bootstrap an Angular&nbsp;1 app in code, Although you can bootstrap an AngularJS app in code,
many applications bootstrap declaratively with the `ng-app` directive, many applications bootstrap declaratively with the `ng-app` directive,
giving it the name of the application's module (`movieHunter`). giving it the name of the application's module (`movieHunter`).
td td
:marked :marked
### Bootstrapping ### Bootstrapping
+makeExample('cb-a1-a2-quick-reference/ts/app/main.ts','','main.ts')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/main.ts','','main.ts')(format="." )
<br> <br>
+makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." )
:marked :marked
Angular&nbsp;2 doesn't have a bootstrap directive. Angular doesn't have a bootstrap directive.
To launch the app in code, explicitly bootstrap the application's root module (`AppModule`) To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
in `main.ts` in `main.ts`
and the application's root component (`AppComponent`) in `app.module.ts`. and the application's root component (`AppComponent`) in `app.module.ts`.
@ -147,7 +149,7 @@ table(width="100%")
&lt;div ng-class="{active: isActive, &lt;div ng-class="{active: isActive,
shazam: isImportant}"> shazam: isImportant}">
:marked :marked
In Angular&nbsp;1, the `ng-class` directive includes/excludes CSS classes In AngularJS, the `ng-class` directive includes/excludes CSS classes
based on an expression. That expression is often a key-value control object with each based on an expression. That expression is often a key-value control object with each
key of the object defined as a CSS class name, and each value defined as a template expression key of the object defined as a CSS class name, and each value defined as a template expression
that evaluates to a Boolean value. that evaluates to a Boolean value.
@ -158,16 +160,16 @@ table(width="100%")
td td
:marked :marked
### ngClass ### ngClass
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'ngClass')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'ngClass')(format="." )
:marked :marked
In Angular&nbsp;2, the `ngClass` directive works similarly. In Angular, the `ngClass` directive works similarly.
It includes/excludes CSS classes based on an expression. It includes/excludes CSS classes based on an expression.
In the first example, the `active` class is applied to the element if `isActive` is true. In the first example, the `active` class is applied to the element if `isActive` is true.
You can specify multiple classes, as shown in the second example. You can specify multiple classes, as shown in the second example.
Angular&nbsp;2 also has **class binding**, which is a good way to add or remove a single class, Angular also has **class binding**, which is a good way to add or remove a single class,
as shown in the third example. as shown in the third example.
For more information see the [Attribute, Class, and Style Bindings](../guide/template-syntax.html#other-bindings) section of the Template Syntax page. For more information see the [Attribute, Class, and Style Bindings](../guide/template-syntax.html#other-bindings) section of the Template Syntax page.
@ -180,7 +182,7 @@ table(width="100%")
&lt;button ng-click="vm.toggleImage()"> &lt;button ng-click="vm.toggleImage()">
&lt;button ng-click="vm.toggleImage($event)"> &lt;button ng-click="vm.toggleImage($event)">
:marked :marked
In Angular&nbsp;1, the `ng-click` directive allows you to specify custom behavior when an element is clicked. In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed. In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.
@ -189,13 +191,13 @@ table(width="100%")
td td
:marked :marked
### bind to the `click` event ### bind to the `click` event
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'event-binding')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'event-binding')(format="." )
:marked :marked
Angular&nbsp;1 event-based directives do not exist in Angular&nbsp;2. AngularJS event-based directives do not exist in Angular.
Rather, define one-way binding from the template view to the component using **event binding**. Rather, define one-way binding from the template view to the component using **event binding**.
For event binding, define the name of the target event within parenthesis and For event binding, define the name of the target event within parenthesis and
specify a template statement, in quotes, to the right of the equals. Angular&nbsp;2 then specify a template statement, in quotes, to the right of the equals. Angular then
sets up an event handler for the target event. When the event is raised, the handler sets up an event handler for the target event. When the event is raised, the handler
executes the template statement. executes the template statement.
@ -215,15 +217,15 @@ table(width="100%")
code-example(format=""). code-example(format="").
&lt;div ng-controller="MovieListCtrl as vm"> &lt;div ng-controller="MovieListCtrl as vm">
:marked :marked
In Angular&nbsp;1, the `ng-controller` directive attaches a controller to the view. In AngularJS, the `ng-controller` directive attaches a controller to the view.
Using the `ng-controller` (or defining the controller as part of the routing) ties the Using the `ng-controller` (or defining the controller as part of the routing) ties the
view to the controller code associated with that view. view to the controller code associated with that view.
td td
:marked :marked
### Component decorator ### Component decorator
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'component')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.ts', 'component')(format="." )
:marked :marked
In Angular&nbsp;2, the template no longer specifies its associated controller. In Angular, the template no longer specifies its associated controller.
Rather, the component specifies its associated template as part of the component class decorator. Rather, the component specifies its associated template as part of the component class decorator.
For more information, see [Architecture Overview](../guide/architecture.html#component). For more information, see [Architecture Overview](../guide/architecture.html#component).
@ -232,12 +234,12 @@ table(width="100%")
td td
:marked :marked
### ng-hide ### ng-hide
In Angular&nbsp;1, the `ng-hide` directive shows or hides the associated HTML element based on In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on
an expression. For more information, see [ng-show](#ng-show). an expression. For more information, see [ng-show](#ng-show).
td td
:marked :marked
### bind to the `hidden` property ### bind to the `hidden` property
In Angular&nbsp;2, you use property binding; there is no built-in *hide* directive. In Angular, you use property binding; there is no built-in *hide* directive.
For more information, see [ng-show](#ng-show). For more information, see [ng-show](#ng-show).
tr(style=top) tr(style=top)
td td
@ -246,27 +248,27 @@ table(width="100%")
code-example(format=""). code-example(format="").
&lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a> &lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a>
:marked :marked
The `ng-href` directive allows Angular&nbsp;1 to preprocess the `href` property so that it The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
can replace the binding expression with the appropriate URL before the browser can replace the binding expression with the appropriate URL before the browser
fetches from that URL. fetches from that URL.
In Angular&nbsp;1, the `ng-href` is often used to activate a route as part of navigation. In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
code-example(format=""). code-example(format="").
&lt;a ng-href="#movies">Movies&lt;/a> &lt;a ng-href="#movies">Movies&lt;/a>
:marked :marked
Routing is handled differently in Angular&nbsp;2. Routing is handled differently in Angular.
td td
:marked :marked
### bind to the `href` property ### bind to the `href` property
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'href')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'href')(format="." )
:marked :marked
Angular&nbsp;2, uses property binding; there is no built-in *href* directive. Angular, uses property binding; there is no built-in *href* directive.
Place the element's `href` property in square brackets and set it to a quoted template expression. Place the element's `href` property in square brackets and set it to a quoted template expression.
For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding). For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
In Angular&nbsp;2, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the third example. In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the third example.
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'router-link')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'router-link')(format="." )
:marked :marked
For more information on routing, see [Routing & Navigation](../guide/router.html#router-link). For more information on routing, see [Routing & Navigation](../guide/router.html#router-link).
@ -277,16 +279,16 @@ table(width="100%")
code-example(format=""). code-example(format="").
&lt;table ng-if="movies.length"> &lt;table ng-if="movies.length">
:marked :marked
In Angular&nbsp;1, the `ng-if` directive removes or recreates a portion of the DOM, In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
based on an expression. If the expression is false, the element is removed from the DOM. based on an expression. If the expression is false, the element is removed from the DOM.
In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero. In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero.
td td
:marked :marked
### *ngIf ### *ngIf
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngIf')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.html', 'ngIf')(format="." )
:marked :marked
The `*ngIf` directive in Angular&nbsp;2 works the same as the `ng-if` directive in Angular&nbsp;1. It removes or recreates a portion of the DOM based on an expression. The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes or recreates a portion of the DOM based on an expression.
In this example, the `table` element is removed from the DOM unless the `movies` array has a length. In this example, the `table` element is removed from the DOM unless the `movies` array has a length.
@ -299,14 +301,14 @@ table(width="100%")
code-example(format=""). code-example(format="").
&lt;input ng-model="vm.favoriteHero"/> &lt;input ng-model="vm.favoriteHero"/>
:marked :marked
In Angular&nbsp;1, the `ng-model` directive binds a form control to a property in the controller associated with the template. In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view. This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
td td
:marked :marked
### ngModel ### ngModel
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngModel')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.html', 'ngModel')(format="." )
:marked :marked
In Angular&nbsp;2, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view) In Angular, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view)
and event binding (from the view to the component), thereby providing two-way binding. and event binding (from the view to the component), thereby providing two-way binding.
For more information on two-way binding with ngModel, see [Template Syntax](../guide/template-syntax.html#ngModel). For more information on two-way binding with ngModel, see [Template Syntax](../guide/template-syntax.html#ngModel).
@ -317,16 +319,16 @@ table(width="100%")
code-example(format=""). code-example(format="").
&lt;tr ng-repeat="movie in vm.movies"> &lt;tr ng-repeat="movie in vm.movies">
:marked :marked
In Angular&nbsp;1, the `ng-repeat` directive repeats the associated DOM element In AngularJS, the `ng-repeat` directive repeats the associated DOM element
for each item in the specified collection. for each item in the specified collection.
In this example, the table row (`tr`) element repeats for each movie object in the collection of movies. In this example, the table row (`tr`) element repeats for each movie object in the collection of movies.
td td
:marked :marked
### *ngFor ### *ngFor
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngFor')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.html', 'ngFor')(format="." )
:marked :marked
The `*ngFor` directive in Angular&nbsp;2 is similar to the `ng-repeat` directive in Angular&nbsp;1. It repeats the associated DOM element for each item in the specified collection. The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats the associated DOM element for each item in the specified collection.
More accurately, it turns the defined element (`tr` in this example) and its contents into a template and More accurately, it turns the defined element (`tr` in this example) and its contents into a template and
uses that template to instantiate a view for each item in the list. uses that template to instantiate a view for each item in the list.
@ -345,16 +347,16 @@ table(width="100%")
Your favorite hero is: {{vm.favoriteHero}} Your favorite hero is: {{vm.favoriteHero}}
&lt;/h3> &lt;/h3>
:marked :marked
In Angular&nbsp;1, the `ng-show` directive shows or hides the associated DOM element, based on In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
an expression. an expression.
In this example, the `div` element is shown if the `favoriteHero` variable is truthy. In this example, the `div` element is shown if the `favoriteHero` variable is truthy.
td td
:marked :marked
### bind to the `hidden` property ### bind to the `hidden` property
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'hidden')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.html', 'hidden')(format="." )
:marked :marked
Angular&nbsp;2, uses property binding; there is no built-in *show* directive. Angular, uses property binding; there is no built-in *show* directive.
For hiding and showing elements, bind to the HTML `hidden` property. For hiding and showing elements, bind to the HTML `hidden` property.
To conditionally display an element, place the element's `hidden` property in square brackets and To conditionally display an element, place the element's `hidden` property in square brackets and
@ -370,15 +372,15 @@ table(width="100%")
code-example(format=""). code-example(format="").
&lt;img ng-src="{{movie.imageurl}}"> &lt;img ng-src="{{movie.imageurl}}">
:marked :marked
The `ng-src` directive allows Angular&nbsp;1 to preprocess the `src` property so that it The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
can replace the binding expression with the appropriate URL before the browser can replace the binding expression with the appropriate URL before the browser
fetches from that URL. fetches from that URL.
td td
:marked :marked
### bind to the `src` property ### bind to the `src` property
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'src')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'src')(format="." )
:marked :marked
Angular&nbsp;2, uses property binding; there is no built-in *src* directive. Angular, uses property binding; there is no built-in *src* directive.
Place the `src` property in square brackets and set it to a quoted template expression. Place the `src` property in square brackets and set it to a quoted template expression.
For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding). For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
@ -389,7 +391,7 @@ table(width="100%")
code-example(format=""). code-example(format="").
&lt;div ng-style="{color: colorPreference}"> &lt;div ng-style="{color: colorPreference}">
:marked :marked
In Angular&nbsp;1, the `ng-style` directive sets a CSS style on an HTML element In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
based on an expression. That expression is often a key-value control object with each based on an expression. That expression is often a key-value control object with each
key of the object defined as a CSS style name, and each value defined as an expression key of the object defined as a CSS style name, and each value defined as an expression
that evaluates to a value appropriate for the style. that evaluates to a value appropriate for the style.
@ -398,13 +400,13 @@ table(width="100%")
td td
:marked :marked
### ngStyle ### ngStyle
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'ngStyle')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'ngStyle')(format="." )
:marked :marked
In Angular&nbsp;2, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression. In Angular, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.
In the first example, the `color` style is set to the current value of the `colorPreference` variable. In the first example, the `color` style is set to the current value of the `colorPreference` variable.
Angular&nbsp;2 also has **style binding**, which is good way to set a single style. This is shown in the second example. Angular also has **style binding**, which is good way to set a single style. This is shown in the second example.
For more information on style binding, see [Template Syntax](../guide/template-syntax.html#style-binding). For more information on style binding, see [Template Syntax](../guide/template-syntax.html#style-binding).
@ -427,7 +429,7 @@ table(width="100%")
&lt;/div> &lt;/div>
&lt;/div> &lt;/div>
:marked :marked
In Angular&nbsp;1, the `ng-switch` directive swaps the contents of In AngularJS, the `ng-switch` directive swaps the contents of
an element by selecting one of the templates based on the current value of an expression. an element by selecting one of the templates based on the current value of an expression.
In this example, if `favoriteHero` is not set, the template displays "Please enter ...". In this example, if `favoriteHero` is not set, the template displays "Please enter ...".
@ -437,9 +439,9 @@ table(width="100%")
td td
:marked :marked
### ngSwitch ### ngSwitch
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
:marked :marked
In Angular&nbsp;2, the `ngSwitch` directive works similarly. In Angular, the `ngSwitch` directive works similarly.
It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value. It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.
In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null` In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
@ -458,16 +460,16 @@ a(id="filters-pipes")
.l-main-section .l-main-section
:marked :marked
## Filters/pipes ## Filters/pipes
Angular&nbsp;2 **pipes** provide formatting and transformation for data in our template, similar to Angular&nbsp;1 **filters**. Angular **pipes** provide formatting and transformation for data in our template, similar to AngularJS **filters**.
Many of the built-in filters in Angular&nbsp;1 have corresponding pipes in Angular&nbsp;2. Many of the built-in filters in AngularJS have corresponding pipes in Angular.
For more information on pipes, see [Pipes](../guide/pipes.html). For more information on pipes, see [Pipes](../guide/pipes.html).
table(width="100%") table(width="100%")
col(width="50%") col(width="50%")
col(width="50%") col(width="50%")
tr tr
th Angular&nbsp;1 th AngularJS
th Angular&nbsp;2 th Angular
tr(style=top) tr(style=top)
td td
:marked :marked
@ -479,9 +481,9 @@ table(width="100%")
td td
:marked :marked
### currency ### currency
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'currency')(format="." ) +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'currency')(format="." )
:marked :marked
The Angular&nbsp;2 `currency` pipe is similar although some of the parameters have changed. The Angular `currency` pipe is similar although some of the parameters have changed.
tr(style=top) tr(style=top)
td td
:marked :marked
@ -493,9 +495,9 @@ table(width="100%")
td td
:marked :marked
### date ### date
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'date')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'date')(format=".")
:marked :marked
The Angular&nbsp;2 `date` pipe is similar. The Angular `date` pipe is similar.
tr(style=top) tr(style=top)
td td
@ -508,7 +510,7 @@ table(width="100%")
td td
:marked :marked
### none ### none
For performance reasons, no comparable pipe exists in Angular&nbsp;2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe. For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
tr(style=top) tr(style=top)
td td
@ -521,9 +523,9 @@ table(width="100%")
td td
:marked :marked
### json ### json
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'json')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'json')(format=".")
:marked :marked
The Angular&nbsp;2 `json` pipe does the same thing. The Angular `json` pipe does the same thing.
tr(style=top) tr(style=top)
td td
:marked :marked
@ -536,12 +538,12 @@ table(width="100%")
td td
:marked :marked
### slice ### slice
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'slice')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'slice')(format=".")
:marked :marked
The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping
with the JavaScript `Slice` method. with the JavaScript `Slice` method.
The first parameter is the starting index; the second is the limit. The first parameter is the starting index; the second is the limit.
As in Angular 1, coding this operation within the component instead could improve performance. As in AngularJS, coding this operation within the component instead could improve performance.
tr(style=top) tr(style=top)
td td
:marked :marked
@ -553,9 +555,9 @@ table(width="100%")
td td
:marked :marked
### lowercase ### lowercase
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'lowercase')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'lowercase')(format=".")
:marked :marked
The Angular&nbsp;2 `lowercase` pipe does the same thing. The Angular `lowercase` pipe does the same thing.
tr(style=top) tr(style=top)
td td
:marked :marked
@ -567,13 +569,13 @@ table(width="100%")
td td
:marked :marked
### number ### number
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'number')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'number')(format=".")
:marked :marked
The Angular&nbsp;2 `number` pipe is similar. The Angular `number` pipe is similar.
It provides more functionality when defining It provides more functionality when defining
the decimal places, as shown in the second example above. the decimal places, as shown in the second example above.
Angular 2 also has a `percent` pipe, which formats a number as a local percentage Angular also has a `percent` pipe, which formats a number as a local percentage
as shown in the third example. as shown in the third example.
tr(style=top) tr(style=top)
td td
@ -587,7 +589,7 @@ table(width="100%")
td td
:marked :marked
### none ### none
For performance reasons, no comparable pipe exists in Angular&nbsp;2. For performance reasons, no comparable pipe exists in Angular.
Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe. Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.
:marked :marked
@ -597,20 +599,20 @@ a(id="controllers-components")
.l-main-section .l-main-section
:marked :marked
## Modules/controllers/components ## Modules/controllers/components
In both Angular&nbsp;1 and Angular&nbsp;2, Angular modules help you organize your application into cohesive blocks of functionality. In both AngularJS and Angular, Angular modules help you organize your application into cohesive blocks of functionality.
In Angular&nbsp;1, you write the code that provides the model and the methods for the view in a **controller**. In AngularJS, you write the code that provides the model and the methods for the view in a **controller**.
In Angular&nbsp;2, you build a **component**. In Angular, you build a **component**.
Because much Angular&nbsp;1 code is in JavaScript, JavaScript code is shown in the Angular&nbsp;1 column. Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column.
The Angular&nbsp;2 code is shown using TypeScript. The Angular code is shown using TypeScript.
table(width="100%") table(width="100%")
col(width="50%") col(width="50%")
col(width="50%") col(width="50%")
tr tr
th Angular&nbsp;1 th AngularJS
th Angular&nbsp;2 th Angular
tr(style=top) tr(style=top)
td td
:marked :marked
@ -620,12 +622,12 @@ table(width="100%")
... ...
}()); }());
:marked :marked
In Angular&nbsp;1, you often defined an immediately invoked function expression (or IIFE) around your controller code. In AngularJS, you often defined an immediately invoked function expression (or IIFE) around your controller code.
This kept your controller code out of the global namespace. This kept your controller code out of the global namespace.
td td
:marked :marked
### none ### none
You don't need to worry about this in Angular&nbsp;2 because you use ES 2015 modules You don't need to worry about this in Angular because you use ES 2015 modules
and modules handle the namespacing for you. and modules handle the namespacing for you.
For more information on modules, see [Architecture Overview](../guide/architecture.html#module). For more information on modules, see [Architecture Overview](../guide/architecture.html#module).
@ -636,13 +638,13 @@ table(width="100%")
code-example. code-example.
angular.module("movieHunter", ["ngRoute"]); angular.module("movieHunter", ["ngRoute"]);
:marked :marked
In Angular&nbsp;1, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon. In AngularJS, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon.
td td
:marked :marked
### Angular modules ### Angular modules
+makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/app.module.1.ts')(format=".")
:marked :marked
Angular&nbsp;2 modules, defined with the `NgModule` decorator, serve the same purpose: Angular modules, defined with the `NgModule` decorator, serve the same purpose:
- `imports`: specifies the list of other modules that this module depends upon - `imports`: specifies the list of other modules that this module depends upon
- `declaration`: keeps track of your components, pipes, and directives. - `declaration`: keeps track of your components, pipes, and directives.
@ -658,7 +660,7 @@ table(width="100%")
["movieService", ["movieService",
MovieListCtrl]); MovieListCtrl]);
:marked :marked
Angular&nbsp;1, has code in each controller that looks up an appropriate Angular module AngularJS, has code in each controller that looks up an appropriate Angular module
and registers the controller with that module. and registers the controller with that module.
The first argument is the controller name. The second argument defines the string names of The first argument is the controller name. The second argument defines the string names of
@ -666,9 +668,9 @@ table(width="100%")
td td
:marked :marked
### Component Decorator ### Component Decorator
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'component')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.ts', 'component')(format=".")
:marked :marked
Angular&nbsp;2, adds a decorator to the component class to provide any required metadata. Angular, adds a decorator to the component class to provide any required metadata.
The Component decorator declares that the class is a component and provides metadata about The Component decorator declares that the class is a component and provides metadata about
that component such as its selector (or tag) and its template. that component such as its selector (or tag) and its template.
@ -683,15 +685,15 @@ table(width="100%")
function MovieListCtrl(movieService) { function MovieListCtrl(movieService) {
} }
:marked :marked
In Angular&nbsp;1, you write the code for the model and methods in a controller function. In AngularJS, you write the code for the model and methods in a controller function.
td td
:marked :marked
### Component class ### Component class
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'class')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.ts', 'class')(format=".")
:marked :marked
In Angular&nbsp;2, you create a component class. In Angular, you create a component class.
NOTE: If you are using TypeScript with Angular&nbsp;1, you must use the `export` keyword to export the component class. NOTE: If you are using TypeScript with AngularJS, you must use the `export` keyword to export the component class.
For more information, see the [Components](../guide/architecture.html#components) section of the Architecture Overview page. For more information, see the [Components](../guide/architecture.html#components) section of the Architecture Overview page.
tr(style=top) tr(style=top)
@ -703,7 +705,7 @@ table(width="100%")
function MovieListCtrl(movieService) { function MovieListCtrl(movieService) {
} }
:marked :marked
In Angular&nbsp;1, you pass in any dependencies as controller function arguments. In AngularJS, you pass in any dependencies as controller function arguments.
This example injects a `MovieService`. This example injects a `MovieService`.
To guard against minification problems, tell Angular explicitly To guard against minification problems, tell Angular explicitly
@ -711,9 +713,9 @@ table(width="100%")
td td
:marked :marked
### Dependency injection ### Dependency injection
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'di')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.ts', 'di')(format=".")
:marked :marked
In Angular&nbsp;2, you pass in dependencies as arguments to the component class constructor. In Angular, you pass in dependencies as arguments to the component class constructor.
This example injects a `MovieService`. This example injects a `MovieService`.
The first parameter's TypeScript type tells Angular what to inject, even after minification. The first parameter's TypeScript type tells Angular what to inject, even after minification.
@ -726,17 +728,17 @@ a(id="style-sheets")
:marked :marked
## Style sheets ## Style sheets
Style sheets give your application a nice look. Style sheets give your application a nice look.
In Angular&nbsp;1, you specify the style sheets for your entire application. In AngularJS, you specify the style sheets for your entire application.
As the application grows over time, the styles for the many parts of the application As the application grows over time, the styles for the many parts of the application
merge, which can cause unexpected results. merge, which can cause unexpected results.
In Angular&nbsp;2, you can still define style sheets for your entire application. But now you can In Angular, you can still define style sheets for your entire application. But now you can
also encapsulate a style sheet within a specific component. also encapsulate a style sheet within a specific component.
table(width="100%") table(width="100%")
col(width="50%") col(width="50%")
col(width="50%") col(width="50%")
tr tr
th Angular&nbsp;1 th AngularJS
th Angular&nbsp;2 th Angular
tr(style=top) tr(style=top)
td td
:marked :marked
@ -744,20 +746,20 @@ table(width="100%")
code-example. code-example.
&lt;link href="styles.css" rel="stylesheet" /> &lt;link href="styles.css" rel="stylesheet" />
:marked :marked
Angular&nbsp;1, uses a `link` tag in the head section of the `index.html` file AngularJS, uses a `link` tag in the head section of the `index.html` file
to define the styles for the application. to define the styles for the application.
td td
:marked :marked
### Link tag ### Link tag
+makeExample('cb-a1-a2-quick-reference/ts/index.html', 'style')(format=".") +makeExample('cb-ajs-quick-reference/ts/index.html', 'style')(format=".")
:marked :marked
In Angular&nbsp;2, you can continue to use the link tag to define the styles for your application in the `index.html` file. In Angular, you can continue to use the link tag to define the styles for your application in the `index.html` file.
But now you can also encapsulate styles for your components. But now you can also encapsulate styles for your components.
:marked :marked
### StyleUrls ### StyleUrls
In Angular&nbsp;2, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
a style sheet for a particular component. a style sheet for a particular component.
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'style-url')(format=".") +makeExample('cb-ajs-quick-reference/ts/app/movie-list.component.ts', 'style-url')(format=".")
:marked :marked
This allows you to set appropriate styles for individual components that wont leak into This allows you to set appropriate styles for individual components that wont leak into
other parts of the application. other parts of the application.

View File

@ -441,7 +441,7 @@ a#io-decorators
When writing with _ES5 DSL_, set the `Class.constructor` property to When writing with _ES5 DSL_, set the `Class.constructor` property to
an array whose first parameters are the injectable constructor functions and whose an array whose first parameters are the injectable constructor functions and whose
last parameter is the class constructor itself. last parameter is the class constructor itself.
This format should be familiar to Angular 1 developers. This format should be familiar to AngularJS developers.
+makeTabs(` +makeTabs(`
cb-ts-to-js/ts/app/hero-di.component.ts, cb-ts-to-js/ts/app/hero-di.component.ts,

View File

@ -21,7 +21,7 @@ include ../_util-fns
:marked :marked
If you prefer a `File | New Project` experience and are using **ASP.NET Core**, If you prefer a `File | New Project` experience and are using **ASP.NET Core**,
then consider the _experimental_ then consider the _experimental_
<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular 2 template for Visual Studio 2015</a>. <a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular template for Visual Studio 2015</a>.
Note that the resulting code does not map to the docs. Adjust accordingly. Note that the resulting code does not map to the docs. Adjust accordingly.
:marked :marked
@ -51,7 +51,7 @@ h2#prereq1 Prerequisite: Node.js
.l-main-section .l-main-section
h2#prereq2 Prerequisite: Visual Studio 2015 Update 3 h2#prereq2 Prerequisite: Visual Studio 2015 Update 3
:marked :marked
The minimum requirement for developing Angular 2 applications with Visual Studio is Update 3. The minimum requirement for developing Angular applications with Visual Studio is Update 3.
Earlier versions do not follow the best practices for developing applications with TypeScript. Earlier versions do not follow the best practices for developing applications with TypeScript.
To view your version of Visual Studio 2015, go to `Help | About Visual Studio`. To view your version of Visual Studio 2015, go to `Help | About Visual Studio`.
@ -78,7 +78,7 @@ h2#prereq3 Prerequisite: Configure External Web tools
h2#prereq4 Prerequisite: Install TypeScript 2 for Visual Studio 2015 h2#prereq4 Prerequisite: Install TypeScript 2 for Visual Studio 2015
:marked :marked
While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesnt ship with TypeScript 2, While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesnt ship with TypeScript 2,
which you need to develop Angular 2 applications. which you need to develop Angular applications.
To install TypeScript 2: To install TypeScript 2:
* Download and install **[TypeScript 2.0 for Visual Studio 2015](http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe)** * Download and install **[TypeScript 2.0 for Visual Studio 2015](http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe)**

View File

@ -184,8 +184,8 @@
}, },
"upgrade": { "upgrade": {
"title": "Upgrading from 1.x", "title": "Upgrading to Angular",
"intro": "Incrementally upgrade an Angular 1 application to Angular 2." "intro": "Incrementally upgrade an AngularJS application to Angular."
}, },
"webpack": { "webpack": {

View File

@ -53,7 +53,7 @@ block includes
The updated [NgUpgrade Guide](upgrade.html) guide covers the The updated [NgUpgrade Guide](upgrade.html) guide covers the
new AOT friendly `upgrade/static` module new AOT friendly `upgrade/static` module
released in v.2.2.0, which is the recommended released in v.2.2.0, which is the recommended
facility for migrating from Angular 1 to Angular 2. facility for migrating from AngularJS to Angular.
The documentation for the version prior to v.2.2.0 has been removed. The documentation for the version prior to v.2.2.0 has been removed.
## ES6 described in "TypeScript to JavaScript" (2016-11-14) ## ES6 described in "TypeScript to JavaScript" (2016-11-14)
@ -70,9 +70,9 @@ block includes
from npm `@types` packages rather than with the _typings_ tooling. from npm `@types` packages rather than with the _typings_ tooling.
The `typings.json` file is gone. The `typings.json` file is gone.
The "[Angular 1 Upgrade](upgrade.html)" guide reflects this change. The "[AngularJS Upgrade](upgrade.html)" guide reflects this change.
The `package.json` installs `@types/angular` and several `@types/angular-...` The `package.json` installs `@types/angular` and several `@types/angular-...`
packages in support of upgrade; these are not needed for pure Angular 2 development. packages in support of upgrade; these are not needed for pure Angular development.
## "Template Syntax" explains two-way data binding syntax (2016-10-20) ## "Template Syntax" explains two-way data binding syntax (2016-10-20)
Demonstrates how to two-way data bind to a custom Angular component and Demonstrates how to two-way data bind to a custom Angular component and

View File

@ -490,7 +490,7 @@ figure.image-display
.l-sub-section .l-sub-section
:marked :marked
Angular 1 developers know this technique as *transclusion*. AngularJS developers know this technique as *transclusion*.
:marked :marked
Consider this variation on the [previous _AfterView_](#afterview) example. Consider this variation on the [previous _AfterView_](#afterview) example.

View File

@ -81,7 +81,7 @@ a(id="dependencies")
***@angular/router*** - Component router. ***@angular/router*** - Component router.
***@angular/upgrade*** - Set of utilities for upgrading Angular 1 applications. ***@angular/upgrade*** - Set of utilities for upgrading AngularJS applications to Angular.
***[system.js](https://github.com/systemjs/systemjs)*** - A dynamic module loader compatible with the ***[system.js](https://github.com/systemjs/systemjs)*** - A dynamic module loader compatible with the
[ES2015 module](http://www.2ality.com/2014/09/es6-modules-final.html) specification. [ES2015 module](http://www.2ality.com/2014/09/es6-modules-final.html) specification.

View File

@ -446,10 +446,10 @@ a(id="no-filter-pipe")
## No *FilterPipe* or *OrderByPipe* ## No *FilterPipe* or *OrderByPipe*
Angular does not ship with pipes for filtering or sorting lists. Angular does not ship with pipes for filtering or sorting lists.
Developers familiar with Angular 1 know these as `filter` and `orderBy`. Developers familiar with AngularJS know these as `filter` and `orderBy`.
There are no equivalents in Angular 2. There are no equivalents in Angular.
This is not an oversight. Angular 2 is unlikely to offer such pipes because This is not an oversight. Angular is unlikely to offer such pipes because
(a) they perform poorly and (b) they prevent aggressive minification. (a) they perform poorly and (b) they prevent aggressive minification.
Both `filter` and `orderBy` require parameters that reference object properties. Both `filter` and `orderBy` require parameters that reference object properties.
We learned earlier that such pipes must be [*impure*](#pure-and-impure-pipes) and that We learned earlier that such pipes must be [*impure*](#pure-and-impure-pipes) and that
@ -457,8 +457,8 @@ a(id="no-filter-pipe")
Filtering and especially sorting are expensive operations. Filtering and especially sorting are expensive operations.
The user experience can degrade severely for even moderate sized lists when Angular calls these pipe methods many times per second. The user experience can degrade severely for even moderate sized lists when Angular calls these pipe methods many times per second.
The `filter` and `orderBy` have often been abused in Angular 1 apps, leading to complaints that Angular itself is slow. The `filter` and `orderBy` have often been abused in AngularJS apps, leading to complaints that Angular itself is slow.
That charge is fair in the indirect sense that Angular 1 prepared this performance trap That charge is fair in the indirect sense that AngularJS prepared this performance trap
by offering `filter` and `orderBy` in the first place. by offering `filter` and `orderBy` in the first place.
The minification hazard is also compelling if less obvious. Imagine a sorting pipe applied to a list of heroes. The minification hazard is also compelling if less obvious. Imagine a sorting pipe applied to a list of heroes.

File diff suppressed because it is too large Load Diff

View File

@ -2,7 +2,7 @@ div(flex)
p. p.
What's your question about? What's your question about?
select#feedback-dropdown(name="Angular Version") select#feedback-dropdown(name="Angular Version")
option(value="Angular2") Angular 2 option(value="Angular") Angular
option(value="Angular1") Angular 1 option(value="AngularJS") AngularJS
button#feedback-btn. button#feedback-btn.
Submit Submit

View File

@ -42,7 +42,7 @@
li li
a(href="/docs/#{lang}/#{vers}/cookbook/aot-compiler.html") Ahead-of-time Compilation a(href="/docs/#{lang}/#{vers}/cookbook/aot-compiler.html") Ahead-of-time Compilation
li li
a(href="/docs/#{lang}/#{vers}/cookbook/a1-a2-quick-reference.html") Angular 1 to Angular 2 a(href="/docs/#{lang}/#{vers}/cookbook/ajs-quick-reference.html") AngularJS to Angular
li li
a(href="/docs/#{lang}/#{vers}/cookbook/ngmodule-faq.html") Angular Module FAQ a(href="/docs/#{lang}/#{vers}/cookbook/ngmodule-faq.html") Angular Module FAQ
li li

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -8,7 +8,7 @@ import {Component, View, bootstrap} from 'angular2/angular2';
selector: 'my-app' selector: 'my-app'
}) })
@View({ @View({
template: '<h1 id="output">My first Angular 2 App</h1>' template: '<h1 id="output">My first Angular App</h1>'
}) })
class AppComponent { class AppComponent {
} }
@ -20,7 +20,7 @@ class AppComponent {
bootstrap(AppComponent); bootstrap(AppComponent);
// #docregion twoparts // #docregion twoparts
// final comment // final comment
// #enddocregion twoparts // #enddocregion twoparts

View File

@ -7,10 +7,10 @@ import {Component, View, bootstrap} from 'angular2/angular2';
selector: 'my-app' selector: 'my-app'
}) })
@View({ @View({
template: '<h1 id="output">My first Angular 2 App</h1>' template: '<h1 id="output">My first Angular App</h1>'
}) })
class AppComponent { class AppComponent {
} }
// #docregion bootstrap // #docregion bootstrap
bootstrap(AppComponent); bootstrap(AppComponent);
// #enddocregion // #enddocregion

View File

@ -8,7 +8,7 @@ import {Component, View, bootstrap} from 'angular2/angular2';
selector: 'my-app' selector: 'my-app'
}) })
@View({ @View({
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular App</h1>'
}) })
// #docregion class // #docregion class
class AppComponent { class AppComponent {
@ -19,4 +19,4 @@ class AppComponent {
// #docregion bootstrap // #docregion bootstrap
bootstrap(AppComponent); bootstrap(AppComponent);
// #enddocregion // #enddocregion
// #enddocregion // #enddocregion