diff --git a/README.md b/README.md index 0f1eee34be..41288b8975 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Angular.io is site for Angular **documentation** . 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 @@ -140,7 +140,8 @@ gulp install-example-angular ## 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 - Gulp: node-based tooling - Harp: The static web server with built-in preprocessing. diff --git a/firebase.json b/firebase.json index 2af13c01ba..9a03643e39 100644 --- a/firebase.json +++ b/firebase.json @@ -57,6 +57,10 @@ "source": "/docs/js/latest/tutorial", "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", "destination": "/docs/ts/latest/index.html" @@ -109,4 +113,4 @@ "docs/dart/**" ] } -} \ No newline at end of file +} diff --git a/harp.json b/harp.json index a42fd27f91..d539ab5c43 100644 --- a/harp.json +++ b/harp.json @@ -56,7 +56,7 @@ "picture": "/resources/images/bios/jelbourn.jpg", "twitter": "jelbourn", "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" }, @@ -65,7 +65,7 @@ "picture": "/resources/images/bios/pete.jpg", "twitter": "petebd", "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" }, @@ -74,7 +74,7 @@ "picture": "/resources/images/bios/thomas.jpg", "twitter": "ThomasBurleson", "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" }, "stephenfluin": { @@ -98,7 +98,7 @@ "picture": "/resources/images/bios/xiaofei.jpg", "twitter": "", "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" }, "tobias": { @@ -159,7 +159,7 @@ "picture": "/resources/images/bios/alex-rickabaugh.jpg", "twitter": "synalx", "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" }, @@ -195,7 +195,7 @@ "picture": "/resources/images/bios/victor.jpg", "twitter": "victorsavkin", "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" }, "jeffcross": { @@ -203,7 +203,7 @@ "picture": "/resources/images/bios/jeff-cross.jpg", "twitter": "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" }, "alexwolfe": { @@ -220,7 +220,7 @@ "picture": "/resources/images/bios/marcy.jpg", "twitter": "marcysutton", "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 table–she 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 table–she 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" }, @@ -303,7 +303,7 @@ "picture": "/resources/images/bios/michal.jpg", "twitter": "m_gol", "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" }, @@ -345,7 +345,7 @@ "picture": "/resources/images/bios/patrick-stapleton.jpg", "twitter": "gdi2290", "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" }, @@ -378,7 +378,7 @@ "name": "Martin Staffa", "picture": "/resources/images/bios/martinstaffa.jpg", "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" }, @@ -414,7 +414,7 @@ "picture": "/resources/images/bios/deborah.jpg", "twitter": "deborahkurata", "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" }, @@ -516,7 +516,7 @@ "picture": "/resources/images/bios/devversion.jpg", "website": "http://github.com/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" }, diff --git a/public/cardboard/index.jade b/public/cardboard/index.jade index 57a8b0bbb6..a0a76d0e80 100644 --- a/public/cardboard/index.jade +++ b/public/cardboard/index.jade @@ -30,7 +30,7 @@ style(rel='stylesheet'). li. Best Technology Demonstration
- Huge hint: Angular 2 scores points + Huge hint: Angular scores points p Don’t have Cardboard and want one? Check out: p.text-center diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json b/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json deleted file mode 100644 index 4f3ebce61d..0000000000 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/plnkr.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "Angular 1 to Angular 2 Quick Reference", - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[1].*" - ], - "tags":["cookbook"] -} diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts b/public/docs/_examples/cb-ajs-quick-reference/e2e-spec.ts similarity index 96% rename from public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts rename to public/docs/_examples/cb-ajs-quick-reference/e2e-spec.ts index 8dac46ddd5..81a5faa5e7 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts +++ b/public/docs/_examples/cb-ajs-quick-reference/e2e-spec.ts @@ -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'; -describe('Angular 1 to 2 Quick Reference Tests', function () { +describe('AngularJS to Angular Quick Reference Tests', function () { beforeAll(function () { browser.get(''); diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/app-routing.module.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/app-routing.module.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css b/public/docs/_examples/cb-ajs-quick-reference/ts/app/app.component.css similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.css rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/app.component.css diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html b/public/docs/_examples/cb-ajs-quick-reference/ts/app/app.component.html similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.html rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/app.component.html diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/app.component.ts similarity index 92% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/app.component.ts index 689e7a22aa..4d708509a1 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.component.ts +++ b/public/docs/_examples/cb-ajs-quick-reference/ts/app/app.component.ts @@ -20,7 +20,7 @@ export class AppComponent { movie: IMovie = null; movies: IMovie[] = []; showImage = true; - title: string = 'A1-A2 Quick Ref Cookbook'; + title: string = 'AngularJS to Angular Quick Ref Cookbook'; toggleImage(event: UIEvent) { this.showImage = !this.showImage; this.eventType = (event && event.type) || 'not provided'; diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/app.module.1.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.1.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/app.module.1.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/app.module.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/app.module.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/date.pipe.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/date.pipe.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/main.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/main.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/main.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css b/public/docs/_examples/cb-ajs-quick-reference/ts/app/movie-list.component.css similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.css rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/movie-list.component.css diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html b/public/docs/_examples/cb-ajs-quick-reference/ts/app/movie-list.component.html similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.html rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/movie-list.component.html diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/movie-list.component.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/movie-list.component.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/movie.service.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.service.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/movie.service.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/app/movie.ts similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie.ts rename to public/docs/_examples/cb-ajs-quick-reference/ts/app/movie.ts diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/example-config.json b/public/docs/_examples/cb-ajs-quick-reference/ts/example-config.json similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/example-config.json rename to public/docs/_examples/cb-ajs-quick-reference/ts/example-config.json diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/hero.png b/public/docs/_examples/cb-ajs-quick-reference/ts/images/hero.png similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/images/hero.png rename to public/docs/_examples/cb-ajs-quick-reference/ts/images/hero.png diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/ng-logo.png b/public/docs/_examples/cb-ajs-quick-reference/ts/images/ng-logo.png similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/images/ng-logo.png rename to public/docs/_examples/cb-ajs-quick-reference/ts/images/ng-logo.png diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/images/villain.png b/public/docs/_examples/cb-ajs-quick-reference/ts/images/villain.png similarity index 100% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/images/villain.png rename to public/docs/_examples/cb-ajs-quick-reference/ts/images/villain.png diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html b/public/docs/_examples/cb-ajs-quick-reference/ts/index.html similarity index 92% rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html rename to public/docs/_examples/cb-ajs-quick-reference/ts/index.html index f17a417c95..846a5793c2 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html +++ b/public/docs/_examples/cb-ajs-quick-reference/ts/index.html @@ -3,7 +3,7 @@ - Angular 1 to Angular 2 Quick Reference + AngularJS to Angular Quick Reference diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/plnkr.json b/public/docs/_examples/cb-ajs-quick-reference/ts/plnkr.json new file mode 100644 index 0000000000..6b91b367d2 --- /dev/null +++ b/public/docs/_examples/cb-ajs-quick-reference/ts/plnkr.json @@ -0,0 +1,9 @@ +{ + "description": "AngularJS to Angular Quick Reference", + "files":[ + "!**/*.d.ts", + "!**/*.js", + "!**/*.[1].*" + ], + "tags":["cookbook", "angularjs"] +} diff --git a/public/docs/_examples/cb-i18n/e2e-spec.ts b/public/docs/_examples/cb-i18n/e2e-spec.ts index ee66ff6683..3dcca5a670 100644 --- a/public/docs/_examples/cb-i18n/e2e-spec.ts +++ b/public/docs/_examples/cb-i18n/e2e-spec.ts @@ -19,7 +19,7 @@ describe('i18n E2E Tests', () => { it('should display the translated title attribute', function () { 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 () { diff --git a/public/docs/_examples/cb-i18n/ts/app/app.component.1.html b/public/docs/_examples/cb-i18n/ts/app/app.component.1.html index cc19182338..cc7d4f1155 100644 --- a/public/docs/_examples/cb-i18n/ts/app/app.component.1.html +++ b/public/docs/_examples/cb-i18n/ts/app/app.component.1.html @@ -11,5 +11,5 @@ - + diff --git a/public/docs/_examples/cb-i18n/ts/app/app.component.html b/public/docs/_examples/cb-i18n/ts/app/app.component.html index 7c5562bece..39ace24f79 100644 --- a/public/docs/_examples/cb-i18n/ts/app/app.component.html +++ b/public/docs/_examples/cb-i18n/ts/app/app.component.html @@ -18,7 +18,7 @@ I don't output any element either
- +
diff --git a/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf b/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf index df053ed9cf..7b813c38dd 100644 --- a/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf +++ b/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf @@ -20,9 +20,9 @@ I don't output any element either optional description optional meaning - - Angular 2 logo - Logo de Angular 2 + + Angular logo + Logo de Angular diff --git a/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf.html b/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf.html index b0584d7f2e..a6cdccc6c1 100644 --- a/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf.html +++ b/public/docs/_examples/cb-i18n/ts/locale/messages.es.xlf.html @@ -23,9 +23,9 @@ optional description optional meaning - - Angular 2 logo - Logo de Angular 2 + + Angular logo + Logo de Angular diff --git a/public/docs/_examples/cb-i18n/ts/messages.xlf b/public/docs/_examples/cb-i18n/ts/messages.xlf index be48f69e2b..dee8b65aca 100644 --- a/public/docs/_examples/cb-i18n/ts/messages.xlf +++ b/public/docs/_examples/cb-i18n/ts/messages.xlf @@ -20,8 +20,14 @@ I don't output any element either optional description optional meaning - - Angular 2 logo + + Angular logo + + + + + + diff --git a/public/docs/_examples/upgrade-module/ts/index-1-2-hybrid-bootstrap.html b/public/docs/_examples/upgrade-module/ts/index-1-2-hybrid-bootstrap.html index 7a2bb5d6ed..2973a092f7 100644 --- a/public/docs/_examples/upgrade-module/ts/index-1-2-hybrid-bootstrap.html +++ b/public/docs/_examples/upgrade-module/ts/index-1-2-hybrid-bootstrap.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-1-to-2-projection.html b/public/docs/_examples/upgrade-module/ts/index-1-to-2-projection.html index 580f524394..a6ea80f004 100644 --- a/public/docs/_examples/upgrade-module/ts/index-1-to-2-projection.html +++ b/public/docs/_examples/upgrade-module/ts/index-1-to-2-projection.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-1-to-2-providers.html b/public/docs/_examples/upgrade-module/ts/index-1-to-2-providers.html index fa3a70d48e..13835851c6 100644 --- a/public/docs/_examples/upgrade-module/ts/index-1-to-2-providers.html +++ b/public/docs/_examples/upgrade-module/ts/index-1-to-2-providers.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-2-to-1-providers.html b/public/docs/_examples/upgrade-module/ts/index-2-to-1-providers.html index b777ce9c9f..c8936d05d2 100644 --- a/public/docs/_examples/upgrade-module/ts/index-2-to-1-providers.html +++ b/public/docs/_examples/upgrade-module/ts/index-2-to-1-providers.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-2-to-1-transclusion.html b/public/docs/_examples/upgrade-module/ts/index-2-to-1-transclusion.html index b0ed53f68b..797e0b7848 100644 --- a/public/docs/_examples/upgrade-module/ts/index-2-to-1-transclusion.html +++ b/public/docs/_examples/upgrade-module/ts/index-2-to-1-transclusion.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-downgrade-io.html b/public/docs/_examples/upgrade-module/ts/index-downgrade-io.html index e0f715a10b..4042303835 100644 --- a/public/docs/_examples/upgrade-module/ts/index-downgrade-io.html +++ b/public/docs/_examples/upgrade-module/ts/index-downgrade-io.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-downgrade-static.html b/public/docs/_examples/upgrade-module/ts/index-downgrade-static.html index c73da599c3..e219014723 100644 --- a/public/docs/_examples/upgrade-module/ts/index-downgrade-static.html +++ b/public/docs/_examples/upgrade-module/ts/index-downgrade-static.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-upgrade-io.html b/public/docs/_examples/upgrade-module/ts/index-upgrade-io.html index f016d0fec9..a5a71ae82c 100644 --- a/public/docs/_examples/upgrade-module/ts/index-upgrade-io.html +++ b/public/docs/_examples/upgrade-module/ts/index-upgrade-io.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-module/ts/index-upgrade-static.html b/public/docs/_examples/upgrade-module/ts/index-upgrade-static.html index 1087ae83d9..419a817f96 100644 --- a/public/docs/_examples/upgrade-module/ts/index-upgrade-static.html +++ b/public/docs/_examples/upgrade-module/ts/index-upgrade-static.html @@ -1,7 +1,7 @@ - Angular 2 Upgrade + Angular Upgrade diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/README.md b/public/docs/_examples/upgrade-phonecat-1-typescript/README.md index 5770656e86..41193bb9bc 100644 --- a/public/docs/_examples/upgrade-phonecat-1-typescript/README.md +++ b/public/docs/_examples/upgrade-phonecat-1-typescript/README.md @@ -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 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 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. -* 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. * 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. diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.ts index b140bd6a84..3114dc9681 100644 --- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.ts +++ b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/app/core/checkmark/checkmark.filter.ts @@ -1,5 +1,4 @@ // #docregion - angular. module('core'). filter('checkmark', function() { diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/run-unit-tests.sh b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/run-unit-tests.sh index 00a5abb7bc..034dfd249b 100755 --- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/run-unit-tests.sh +++ b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/run-unit-tests.sh @@ -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. ## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## that config. diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md b/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md index 4f8e4928af..c1410b19ee 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md @@ -4,13 +4,13 @@ structure. The following changes from vanilla Phonecat are applied: * 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. * 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. * 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. -* 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. * E2E tests have been moved to the parent directory, where `run-e2e-tests` can discover and run them along with all the other examples. diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ng1.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ng1.ts index e493137966..089c3c7d85 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ng1.ts +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/app.module.ng1.ts @@ -1,7 +1,7 @@ // #docregion 'use strict'; -// Define the `phonecatApp` Angular 1 module +// Define the `phonecatApp` AngularJS module angular.module('phonecatApp', [ 'ngAnimate', 'ngRoute', diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js index 7df164da54..a52abf73ce 100644 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js @@ -33,7 +33,7 @@ module.exports = function(config) { { pattern: 'node_modules/rxjs/**/*.js', 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.map', included: false, watched: false}, diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/run-unit-tests.sh b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/run-unit-tests.sh index 00a5abb7bc..034dfd249b 100755 --- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/run-unit-tests.sh +++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/run-unit-tests.sh @@ -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. ## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## that config. diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/karma.conf.ng1.js b/public/docs/_examples/upgrade-phonecat-3-final/ts/karma.conf.ng1.js index 7df164da54..a52abf73ce 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/karma.conf.ng1.js +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/karma.conf.ng1.js @@ -33,7 +33,7 @@ module.exports = function(config) { { pattern: 'node_modules/rxjs/**/*.js', 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.map', included: false, watched: false}, diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/run-unit-tests.sh b/public/docs/_examples/upgrade-phonecat-3-final/ts/run-unit-tests.sh index 00a5abb7bc..034dfd249b 100755 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/run-unit-tests.sh +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/run-unit-tests.sh @@ -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. ## We keep one in karma.conf.ng1.js. This scripts runs the ng1 tests with ## that config. diff --git a/public/docs/_includes/styleguide/_tables.jade b/public/docs/_includes/styleguide/_tables.jade index bc370e5250..738a8dc873 100644 --- a/public/docs/_includes/styleguide/_tables.jade +++ b/public/docs/_includes/styleguide/_tables.jade @@ -15,15 +15,15 @@ th Task th Speed tr - td Angular 1.3 + td AngularJS v.1.3 td Routing td fast tr - td Angular 1.4 + td AngularJS v.1.4 td Routing td faster tr - td Angular 2 + td Angular td Routing td fastest :) @@ -35,6 +35,6 @@ th Task th Speed tr - td Angular 1.3 + td AngularJS v.1.3 td Routing td fast diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json index 74ee2a0be9..166fc94f39 100644 --- a/public/docs/js/latest/cookbook/_data.json +++ b/public/docs/js/latest/cookbook/_data.json @@ -5,10 +5,10 @@ "intro": "A collection of recipes for common Angular application scenarios" }, - "a1-a2-quick-reference": { - "title": "Angular 1 to 2 Quick Reference", - "navTitle": "Angular 1 to 2 Quick Ref", - "intro": "Learn how Angular 1 concepts and techniques map to Angular 2" + "ajs-quick-reference": { + "title": "AngularJS to Angular Quick Reference", + "navTitle": "AngularJS to Angular Quick Ref", + "intro": "Learn how AngularJS concepts and techniques map to Angular" }, "ngmodule-faq": { diff --git a/public/docs/js/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/js/latest/cookbook/ajs-quick-reference.jade similarity index 100% rename from public/docs/js/latest/cookbook/a1-a2-quick-reference.jade rename to public/docs/js/latest/cookbook/ajs-quick-reference.jade diff --git a/public/docs/js/latest/guide/_data.json b/public/docs/js/latest/guide/_data.json index 7bc784f771..f4f95cb12c 100644 --- a/public/docs/js/latest/guide/_data.json +++ b/public/docs/js/latest/guide/_data.json @@ -144,8 +144,8 @@ }, "upgrade": { - "title": "Upgrading from 1.x", - "intro": "Angular 1 applications can be incrementally upgraded to Angular 2." + "title": "Upgrading to Angular", + "intro": "AngularJS applications can be incrementally upgraded to Angular." }, "webpack": { diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 600b9f6b94..88f159ba45 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/public/docs/js/latest/quickstart.jade @@ -311,7 +311,7 @@ figure.image-display :marked ### 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, refresh the browser, and display the revised message. diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index e7ffea0ace..c9d38a5651 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -10,10 +10,10 @@ "intro": "Learn how to use Ahead-of-time compilation" }, - "a1-a2-quick-reference": { - "title": "Angular 1 to 2 Quick Reference", - "navTitle": "Angular 1 to 2 Quick Ref", - "intro": "Learn how Angular 1 concepts and techniques map to Angular 2" + "ajs-quick-reference": { + "title": "AngularJS to Angular Quick Reference", + "navTitle": "AngularJS to Angular", + "intro": "Learn how AngularJS concepts and techniques map to Angular" }, "ngmodule-faq": { diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/ajs-quick-reference.jade similarity index 66% rename from public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade rename to public/docs/ts/latest/cookbook/ajs-quick-reference.jade index 7105fa190b..6f661afac8 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/public/docs/ts/latest/cookbook/ajs-quick-reference.jade @@ -1,12 +1,14 @@ include ../_util-fns a(id="top") :marked - There are many conceptual and syntactical differences between Angular 1 and Angular 2. - This page provides a quick guide to some common Angular 1 - syntax and its equivalent in Angular 2. + _Angular_ is the name for the Angular of today and tomorrow. + _AngularJS_ is the name for all v1.x versions of Angular. + + This guide helps you transition from AngularJS to Angular + by mapping AngularJS syntax to the equivalent Angular syntax. :marked - **See the Angular 2 syntax in this **. + **See the Angular syntax in this **. ## Contents This page covers: @@ -14,25 +16,25 @@ a(id="top") * [Template directives](#template-directives) - built-in directives `ngIf` and `ngClass`. - * [Filters/pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular 2. + * [Filters/pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular. - * [Modules/controllers/components](#controllers-components) - *modules* in Angular 2 are slightly different from *modules* in Angular 1, and *controllers* are *components* in Angular 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 1. + * [Style sheets](#style-sheets) - more options for CSS than in AngularJS. .l-main-section :marked ## Template basics Templates are the user-facing part of an Angular application and are written in HTML. - The following table lists some of the key Angular 1 template features with their equivalent Angular 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" table(width="100%") col(width="50%") col(width="50%") tr - th Angular 1 - th Angular 2 + th AngularJS + th Angular tr(style=top) td :marked @@ -40,7 +42,7 @@ table(width="100%") code-example. Your favorite hero is: {{vm.favoriteHero}} :marked - In Angular 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 associated with this template. @@ -50,9 +52,9 @@ table(width="100%") td :marked ### 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 - In Angular 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. The context of the binding is implied and is always the associated component, so it needs no reference variable. @@ -65,17 +67,17 @@ table(width="100%") code-example. <td>{{movie.title | uppercase}}</td> :marked - To filter output in Angular 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. td :marked ### 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 - In Angular 2 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 1 are - built-in pipes in Angular 2. + 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 AngularJS are + built-in pipes in Angular. For more information, see the heading [Filters/pipes](#filters-pipes) below. tr(style=top) @@ -91,9 +93,9 @@ table(width="100%") td :marked ### 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 - Angular 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. :marked @@ -102,16 +104,16 @@ table(width="100%") .l-main-section :marked ## Template directives - Angular 1 provides more than seventy built-in directives for templates. - Many of them aren't needed in Angular 2 because of its more capable and expressive binding system. - The following are some of the key Angular 1 built-in directives and their equivalents in Angular 2. + AngularJS provides more than seventy built-in directives for templates. + Many of them aren't needed in Angular because of its more capable and expressive binding system. + The following are some of the key AngularJS built-in directives and their equivalents in Angular. table(width="100%") col(width="50%") col(width="50%") tr - th Angular 1 - th Angular 2 + th AngularJS + th Angular tr(style=top) td :marked @@ -121,18 +123,18 @@ table(width="100%") :marked The application startup process is called **bootstrapping**. - Although you can bootstrap an Angular 1 app in code, + Although you can bootstrap an AngularJS app in code, many applications bootstrap declaratively with the `ng-app` directive, giving it the name of the application's module (`movieHunter`). td :marked ### 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="." )
- +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 - Angular 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`) in `main.ts` and the application's root component (`AppComponent`) in `app.module.ts`. @@ -147,7 +149,7 @@ table(width="100%") <div ng-class="{active: isActive, shazam: isImportant}"> :marked - In Angular 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 key of the object defined as a CSS class name, and each value defined as a template expression that evaluates to a Boolean value. @@ -158,16 +160,16 @@ table(width="100%") td :marked ### 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 - In Angular 2, the `ngClass` directive works similarly. + In Angular, the `ngClass` directive works similarly. 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. You can specify multiple classes, as shown in the second example. - Angular 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. 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%") <button ng-click="vm.toggleImage()"> <button ng-click="vm.toggleImage($event)"> :marked - In Angular 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. @@ -189,13 +191,13 @@ table(width="100%") td :marked ### 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 - Angular 1 event-based directives do not exist in Angular 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**. 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 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 executes the template statement. @@ -215,15 +217,15 @@ table(width="100%") code-example(format=""). <div ng-controller="MovieListCtrl as vm"> :marked - In Angular 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 view to the controller code associated with that view. td :marked ### 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 - In Angular 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. For more information, see [Architecture Overview](../guide/architecture.html#component). @@ -232,12 +234,12 @@ table(width="100%") td :marked ### ng-hide - In Angular 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). td :marked ### bind to the `hidden` property - In Angular 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). tr(style=top) td @@ -246,27 +248,27 @@ table(width="100%") code-example(format=""). <a ng-href="angularDocsUrl">Angular Docs</a> :marked - The `ng-href` directive allows Angular 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 fetches from that URL. - In Angular 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=""). <a ng-href="#movies">Movies</a> :marked - Routing is handled differently in Angular 2. + Routing is handled differently in Angular. td :marked ### 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 - Angular 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. For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding). - In Angular 2, `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="." ) + In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the third example. + +makeExample('cb-ajs-quick-reference/ts/app/app.component.html', 'router-link')(format="." ) :marked For more information on routing, see [Routing & Navigation](../guide/router.html#router-link). @@ -277,16 +279,16 @@ table(width="100%") code-example(format=""). <table ng-if="movies.length"> :marked - In Angular 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. In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero. td :marked ### *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 - The `*ngIf` directive in Angular 2 works the same as the `ng-if` directive in Angular 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. @@ -299,14 +301,14 @@ table(width="100%") code-example(format=""). <input ng-model="vm.favoriteHero"/> :marked - In Angular 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. td :marked ### 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 - In Angular 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. 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=""). <tr ng-repeat="movie in vm.movies"> :marked - In Angular 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. In this example, the table row (`tr`) element repeats for each movie object in the collection of movies. td :marked ### *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 - The `*ngFor` directive in Angular 2 is similar to the `ng-repeat` directive in Angular 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 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}} </h3> :marked - In Angular 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. In this example, the `div` element is shown if the `favoriteHero` variable is truthy. td :marked ### 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 - Angular 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. 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=""). <img ng-src="{{movie.imageurl}}"> :marked - The `ng-src` directive allows Angular 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 fetches from that URL. td :marked ### 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 - Angular 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. 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=""). <div ng-style="{color: colorPreference}"> :marked - In Angular 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 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. @@ -398,13 +400,13 @@ table(width="100%") td :marked ### 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 - In Angular 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. - Angular 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). @@ -427,7 +429,7 @@ table(width="100%") </div> </div> :marked - In Angular 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. In this example, if `favoriteHero` is not set, the template displays "Please enter ...". @@ -437,9 +439,9 @@ table(width="100%") td :marked ### 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 - In Angular 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. In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null` @@ -458,16 +460,16 @@ a(id="filters-pipes") .l-main-section :marked ## Filters/pipes - Angular 2 **pipes** provide formatting and transformation for data in our template, similar to Angular 1 **filters**. - Many of the built-in filters in Angular 1 have corresponding pipes in Angular 2. + Angular **pipes** provide formatting and transformation for data in our template, similar to AngularJS **filters**. + Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see [Pipes](../guide/pipes.html). table(width="100%") col(width="50%") col(width="50%") tr - th Angular 1 - th Angular 2 + th AngularJS + th Angular tr(style=top) td :marked @@ -479,9 +481,9 @@ table(width="100%") td :marked ### 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 - The Angular 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) td :marked @@ -493,9 +495,9 @@ table(width="100%") td :marked ### 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 - The Angular 2 `date` pipe is similar. + The Angular `date` pipe is similar. tr(style=top) td @@ -508,7 +510,7 @@ table(width="100%") td :marked ### none - For performance reasons, no comparable pipe exists in Angular 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) td @@ -521,9 +523,9 @@ table(width="100%") td :marked ### 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 - The Angular 2 `json` pipe does the same thing. + The Angular `json` pipe does the same thing. tr(style=top) td :marked @@ -536,12 +538,12 @@ table(width="100%") td :marked ### 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 The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping with the JavaScript `Slice` method. 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) td :marked @@ -553,9 +555,9 @@ table(width="100%") td :marked ### 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 - The Angular 2 `lowercase` pipe does the same thing. + The Angular `lowercase` pipe does the same thing. tr(style=top) td :marked @@ -567,13 +569,13 @@ table(width="100%") td :marked ### 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 - The Angular 2 `number` pipe is similar. + The Angular `number` pipe is similar. It provides more functionality when defining 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. tr(style=top) td @@ -587,7 +589,7 @@ table(width="100%") td :marked ### none - For performance reasons, no comparable pipe exists in Angular 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. :marked @@ -597,20 +599,20 @@ a(id="controllers-components") .l-main-section :marked ## Modules/controllers/components - In both Angular 1 and Angular 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 1, you write the code that provides the model and the methods for the view in a **controller**. - In Angular 2, you build a **component**. + In AngularJS, you write the code that provides the model and the methods for the view in a **controller**. + In Angular, you build a **component**. - Because much Angular 1 code is in JavaScript, JavaScript code is shown in the Angular 1 column. - The Angular 2 code is shown using TypeScript. + Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. + The Angular code is shown using TypeScript. table(width="100%") col(width="50%") col(width="50%") tr - th Angular 1 - th Angular 2 + th AngularJS + th Angular tr(style=top) td :marked @@ -620,12 +622,12 @@ table(width="100%") ... }()); :marked - In Angular 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. td :marked ### none - You don't need to worry about this in Angular 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. For more information on modules, see [Architecture Overview](../guide/architecture.html#module). @@ -636,13 +638,13 @@ table(width="100%") code-example. angular.module("movieHunter", ["ngRoute"]); :marked - In Angular 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 :marked ### 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 - Angular 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 - `declaration`: keeps track of your components, pipes, and directives. @@ -658,7 +660,7 @@ table(width="100%") ["movieService", MovieListCtrl]); :marked - Angular 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. The first argument is the controller name. The second argument defines the string names of @@ -666,9 +668,9 @@ table(width="100%") td :marked ### 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 - Angular 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 that component such as its selector (or tag) and its template. @@ -683,15 +685,15 @@ table(width="100%") function MovieListCtrl(movieService) { } :marked - In Angular 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 :marked ### 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 - In Angular 2, you create a component class. + In Angular, you create a component class. - NOTE: If you are using TypeScript with Angular 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. tr(style=top) @@ -703,7 +705,7 @@ table(width="100%") function MovieListCtrl(movieService) { } :marked - In Angular 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`. To guard against minification problems, tell Angular explicitly @@ -711,9 +713,9 @@ table(width="100%") td :marked ### 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 - In Angular 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`. The first parameter's TypeScript type tells Angular what to inject, even after minification. @@ -726,17 +728,17 @@ a(id="style-sheets") :marked ## Style sheets Style sheets give your application a nice look. - In Angular 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 merge, which can cause unexpected results. - In Angular 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. table(width="100%") col(width="50%") col(width="50%") tr - th Angular 1 - th Angular 2 + th AngularJS + th Angular tr(style=top) td :marked @@ -744,20 +746,20 @@ table(width="100%") code-example. <link href="styles.css" rel="stylesheet" /> :marked - Angular 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. td :marked ### Link tag - +makeExample('cb-a1-a2-quick-reference/ts/index.html', 'style')(format=".") + +makeExample('cb-ajs-quick-reference/ts/index.html', 'style')(format=".") :marked - In Angular 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. :marked ### StyleUrls - In Angular 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. - +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 This allows you to set appropriate styles for individual components that won’t leak into other parts of the application. diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade index a31ec9c837..7f9cf9dac0 100644 --- a/public/docs/ts/latest/cookbook/ts-to-js.jade +++ b/public/docs/ts/latest/cookbook/ts-to-js.jade @@ -441,7 +441,7 @@ a#io-decorators When writing with _ES5 DSL_, set the `Class.constructor` property to an array whose first parameters are the injectable constructor functions and whose 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(` cb-ts-to-js/ts/app/hero-di.component.ts, diff --git a/public/docs/ts/latest/cookbook/visual-studio-2015.jade b/public/docs/ts/latest/cookbook/visual-studio-2015.jade index 0359c626a6..c450e89cc2 100644 --- a/public/docs/ts/latest/cookbook/visual-studio-2015.jade +++ b/public/docs/ts/latest/cookbook/visual-studio-2015.jade @@ -21,7 +21,7 @@ include ../_util-fns :marked If you prefer a `File | New Project` experience and are using **ASP.NET Core**, then consider the _experimental_ - ASP.NET Core + Angular 2 template for Visual Studio 2015. + ASP.NET Core + Angular template for Visual Studio 2015. Note that the resulting code does not map to the docs. Adjust accordingly. :marked @@ -51,7 +51,7 @@ h2#prereq1 Prerequisite: Node.js .l-main-section h2#prereq2 Prerequisite: Visual Studio 2015 Update 3 :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. 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 :marked While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2, - which you need to develop Angular 2 applications. + which you need to develop Angular applications. 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)** diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index 6b9677117a..afa8ff2fb3 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -184,8 +184,8 @@ }, "upgrade": { - "title": "Upgrading from 1.x", - "intro": "Incrementally upgrade an Angular 1 application to Angular 2." + "title": "Upgrading to Angular", + "intro": "Incrementally upgrade an AngularJS application to Angular." }, "webpack": { diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade index 839572a5cd..9bf11d35fb 100644 --- a/public/docs/ts/latest/guide/change-log.jade +++ b/public/docs/ts/latest/guide/change-log.jade @@ -53,7 +53,7 @@ block includes The updated [NgUpgrade Guide](upgrade.html) guide covers the new AOT friendly `upgrade/static` module 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. ## 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. 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-...` - 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) Demonstrates how to two-way data bind to a custom Angular component and diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade index 00283d1b6d..3fe6b411e8 100644 --- a/public/docs/ts/latest/guide/lifecycle-hooks.jade +++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade @@ -490,7 +490,7 @@ figure.image-display .l-sub-section :marked - Angular 1 developers know this technique as *transclusion*. + AngularJS developers know this technique as *transclusion*. :marked Consider this variation on the [previous _AfterView_](#afterview) example. diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade index 8868a24f40..605b878d52 100644 --- a/public/docs/ts/latest/guide/npm-packages.jade +++ b/public/docs/ts/latest/guide/npm-packages.jade @@ -81,7 +81,7 @@ a(id="dependencies") ***@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 [ES2015 module](http://www.2ality.com/2014/09/es6-modules-final.html) specification. diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade index 3cd9d66f9f..f729c010f7 100644 --- a/public/docs/ts/latest/guide/pipes.jade +++ b/public/docs/ts/latest/guide/pipes.jade @@ -446,10 +446,10 @@ a(id="no-filter-pipe") ## No *FilterPipe* or *OrderByPipe* Angular does not ship with pipes for filtering or sorting lists. - Developers familiar with Angular 1 know these as `filter` and `orderBy`. - There are no equivalents in Angular 2. + Developers familiar with AngularJS know these as `filter` and `orderBy`. + 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. 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 @@ -457,8 +457,8 @@ a(id="no-filter-pipe") 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 `filter` and `orderBy` have often been abused in Angular 1 apps, leading to complaints that Angular itself is slow. - That charge is fair in the indirect sense that Angular 1 prepared this performance trap + 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 AngularJS prepared this performance trap 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. diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index e354758d51..cd9339308d 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -1,25 +1,29 @@ include ../_util-fns :marked - Having an existing Angular 1 application doesn't mean that we can't - begin enjoying everything Angular 2 has to offer. That's because Angular 2 - comes with built-in tools for migrating Angular 1 projects over to the - Angular 2 platform. + _Angular_ is the name for the Angular of today and tomorrow. + _AngularJS_ is the name for all v1.x versions of Angular. + + AngularJS apps are great. + Always consider the business case before moving to Angular. + An important part of that case is the time and effort to get there. + This guide describes the built-in tools for efficiently migrating AngularJS projects over to the + Angular platform, a piece at a time. Some applications will be easier to upgrade than others, and there are ways in which we can make it easier for ourselves. It is possible to - prepare and align Angular 1 applications with Angular 2 even before beginning + prepare and align AngularJS applications with Angular even before beginning the upgrade process. These preparation steps are all about making the code more decoupled, more maintainable, and up to speed with modern development tools. That means the preparation work will not only make the eventual upgrade - easier, but will also generally improve our Angular 1 applications. + easier, but will also generally improve our AngularJS applications. One of the keys to a successful upgrade is to do it incrementally, by running the two frameworks side by side in the same application, and - porting Angular 1 components to Angular 2 one by one. This makes it possible + porting AngularJS components to Angular one by one. This makes it possible to upgrade even large and complex applications without disrupting other business, because the work can be done collaboratively and spread over - a period of time. The `upgrade` module in Angular 2 has been designed to + a period of time. The `upgrade` module in Angular has been designed to make incremental upgrading seamless. 1. [Preparation](#preparation) @@ -29,50 +33,50 @@ include ../_util-fns 4. [Using Component Directives](#using-component-directives) 2. [Upgrading with The Upgrade Module](#upgrading-with-the-upgrade-module) 1. [How The Upgrade Module Works](#how-the-upgrade-module-works) - 2. [Bootstrapping hybrid Angular 1+2 Applications](#bootstrapping-hybrid-angular-1-2-applications) - 3. [Using Angular 2 Components from Angular 1 Code](#using-angular-2-components-from-angular-1-code) - 4. [Using Angular 1 Component Directives from Angular 2 Code](#using-angular-1-component-directives-from-angular-2-code) - 5. [Projecting Angular 1 Content into Angular 2 Components](#projecting-angular-1-content-into-angular-2-components) - 6. [Transcluding Angular 2 Content into Angular 1 Component Directives](#transcluding-angular-2-content-into-angular-1-component-directives) - 7. [Making Angular 1 Dependencies Injectable to Angular 2](#making-angular-1-dependencies-injectable-to-angular-2) - 8. [Making Angular 2 Dependencies Injectable to Angular 1](#making-angular-2-dependencies-injectable-to-angular-1) + 2. [Bootstrapping hybrid applications](#bootstrapping-hybrid-applications) + 3. [Using Angular Components from AngularJS Code](#using-angular-components-from-angularjs-code) + 4. [Using AngularJS Component Directives from Angular Code](#using-angularjs-component-directives-from-angular-components-from-angularjs-code) + 5. [Projecting AngularJS Content into Angular Components](#projecting-angularjs-content-into-angular-components) + 6. [Transcluding Angular Content into AngularJS Component Directives](#transcluding-angular-content-into-angularjs-component-directives) + 7. [Making AngularJS Dependencies Injectable to Angular](#making-angularjs-dependencies-injectable-to-angular) + 8. [Making Angular Dependencies Injectable to AngularJS](#making-angular-dependencies-injectable-to-angularjs) 3. [PhoneCat Upgrade Tutorial](#phonecat-upgrade-tutorial) 1. [Switching to TypeScript](#switching-to-typescript) - 2. [Installing Angular 2](#installing-angular-2) - 3. [Bootstrapping a hybrid 1+2 PhoneCat](#bootstrapping-a-hybrid-1-2-phonecat) + 2. [Installing Angular](#installing-angular) + 3. [Bootstrapping a hybrid PhoneCat](#bootstrapping-a-hybrid-phonecat) 4. [Upgrading the Phone service](#upgrading-the-phone-service) 5. [Upgrading Components](#upgrading-components) - 6. [Switching To The Angular 2 Router And Bootstrap](#switching-to-the-angular-2-router-and-bootstrap) - 7. [Saying Goodbye to Angular 1](#saying-goodbye-to-angular-1) + 6. [Switching To The Angular Router And Bootstrap](#switching-to-the-angular-router-and-bootstrap) + 7. [Saying Goodbye to AngularJS](#saying-goodbye-to-angularjs) 3. [Appendix: Upgrading PhoneCat Tests](#appendix-upgrading-phonecat-tests) .l-main-section :marked ## Preparation - There are many ways to structure Angular 1 applications. When we begin - to upgrade these applications to Angular 2, some will turn out to be + There are many ways to structure AngularJS applications. When we begin + to upgrade these applications to Angular, some will turn out to be much more easy to work with than others. There are a few key techniques and patterns that we can apply to future proof our apps even before we begin the migration. ### Follow the Angular Style Guide - The [Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility) + The [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility) collects patterns and practices that have been proven to result in - cleaner and more maintainable Angular 1 applications. It contains a wealth + cleaner and more maintainable AngularJS applications. It contains a wealth of information about how to write and organize Angular code - and equally importantly - how **not** to write and organize Angular code. - Angular 2 is a reimagined version of the best parts of Angular 1. In that + Angular is a reimagined version of the best parts of AngularJS. In that sense, its goals are the same as the Angular Style Guide's: To preserve - the good parts of Angular 1, and to avoid the bad parts. There's a lot - more to Angular 2 than just that of course, but this does mean that - *following the style guide helps make your Angular 1 app more closely - aligned with Angular 2*. + the good parts of AngularJS, and to avoid the bad parts. There's a lot + more to Angular than just that of course, but this does mean that + *following the style guide helps make your AngularJS app more closely + aligned with Angular*. There are a few rules in particular that will make it much easier to do - *an incremental upgrade* using the Angular 2 `upgrade` module: + *an incremental upgrade* using the Angular `upgrade` module: * The [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility) states that there should be one component per file. This not only makes @@ -115,10 +119,10 @@ include ../_util-fns :marked ### Migrating to TypeScript - If part of our Angular 2 upgrade plan is to also take TypeScript into use, it makes + If part of our Angular upgrade plan is to also take TypeScript into use, it makes sense to bring in the TypeScript compiler even before the upgrade itself begins. This means there's one less thing to learn and think about during the actual upgrade. - It also means we can start using TypeScript features in our Angular 1 code. + It also means we can start using TypeScript features in our AngularJS code. Since TypeScript is a superset of ECMAScript 2015, which in turn is a superset of ECMAScript 5, "switching" to TypeScript doesn't necessarily require anything @@ -136,28 +140,28 @@ include ../_util-fns default function parameters, and destructuring assignments can also be gradually added to make the code more expressive. * Services and controllers can be turned into *classes*. That way they'll be a step - closer to becoming Angular 2 service and component classes, which will make our + closer to becoming Angular service and component classes, which will make our life easier once we do the upgrade. ### Using Component Directives - In Angular 2, components are the main primitive from which user interfaces + In Angular, components are the main primitive from which user interfaces are built. We define the different parts of our UIs as components, and then compose the UI by using components in our templates. - You can also do this in Angular 1, using *component directives*. These are + You can also do this in AngularJS, using *component directives*. These are directives that define their own templates, controllers, and input/output bindings - - the same things that Angular 2 components define. Applications built with - component directives are much easier to migrate to Angular 2 than applications + the same things that Angular components define. Applications built with + component directives are much easier to migrate to Angular than applications built with lower-level features like `ng-controller`, `ng-include`, and scope inheritance. - To be Angular 2 compatible, an Angular 1 component directive should configure + To be Angular compatible, an AngularJS component directive should configure these attributes: * `restrict: 'E'`. Components are usually used as elements. - * `scope: {}` - an isolate scope. In Angular 2, components are always isolated - from their surroundings, and we should do this in Angular 1 too. + * `scope: {}` - an isolate scope. In Angular, components are always isolated + from their surroundings, and we should do this in AngularJS too. * `bindToController: {}`. Component inputs and outputs should be bound to the controller instead of using the `$scope`. * `controller` and `controllerAs`. Components have their own controllers. @@ -171,20 +175,20 @@ include ../_util-fns Component directives **may not** use the following attributes: - * `compile`. This will not be supported in Angular 2. - * `replace: true`. Angular 2 never replaces a component element with the - component template. This attribute is also deprecated in Angular 1. - * `priority` and `terminal`. While Angular 1 components may use these, - they are not used in Angular 2 and it is better not to write code + * `compile`. This will not be supported in Angular. + * `replace: true`. Angular never replaces a component element with the + component template. This attribute is also deprecated in AngularJS. + * `priority` and `terminal`. While AngularJS components may use these, + they are not used in Angular and it is better not to write code that relies on them. - An Angular 1 component directive that is fully aligned with the Angular 2 + An AngularJS component directive that is fully aligned with the Angular architecture may look something like this: +makeExample('upgrade-module/ts/app/hero-detail.directive.ts') :marked - Angular 1.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module) + AngularJS.5 introduces the [component API](https://docs.angularjs.org/api/ng/type/angular.Module) that makes it easier to define directives like these. It is a good idea to use this API for component directives for several reasons: @@ -199,17 +203,17 @@ include ../_util-fns :marked Controller lifecycle hook methods `$onInit()`, `$onDestroy()`, and `$onChanges()` - are another convenient feature that Angular 1.5 introduces. They all have nearly - exact [equivalents in Angular 2](lifecycle-hooks.html), so organizing component lifecycle - logic around them will ease the eventual Angular 2 upgrade process. + are another convenient feature that AngularJS.5 introduces. They all have nearly + exact [equivalents in Angular](lifecycle-hooks.html), so organizing component lifecycle + logic around them will ease the eventual Angular upgrade process. .l-main-section :marked ## Upgrading with The Upgrade Module - The `upgrade` module in Angular 2 is a very useful tool for upgrading + The `upgrade` module in Angular is a very useful tool for upgrading anything but the smallest of applications. With it we can mix and match - Angular 1 and 2 components in the same application and have them interoperate + AngularJS and 2 components in the same application and have them interoperate seamlessly. That means we don't have to do the upgrade work all at once, since there's a natural coexistence between the two frameworks during the transition period. @@ -218,11 +222,11 @@ include ../_util-fns The primary tool provided by the upgrade module is called the `UpgradeModule`. This is a service that can bootstrap and manage hybrid applications that support - both Angular 2 and Angular 1 code. + both Angular and AngularJS code. When we use `UpgradeModule`, what we're really doing is *running both versions - of Angular at the same time*. All Angular 2 code is running in the Angular 2 - framework, and Angular 1 code in the Angular 1 framework. Both of these are the + of Angular at the same time*. All Angular code is running in the Angular + framework, and AngularJS code in the AngularJS framework. Both of these are the actual, fully featured versions of the frameworks. There is no emulation going on, so we can expect to have all the features and natural behavior of both frameworks. @@ -232,14 +236,14 @@ include ../_util-fns #### Dependency Injection - Dependency injection is front and center in both Angular 1 and - Angular 2, but there are some key differences between the two + Dependency injection is front and center in both AngularJS and + Angular, but there are some key differences between the two frameworks in how it actually works. table tr - th Angular 1 - th Angular 2 + th AngularJS + th Angular tr td :marked @@ -263,16 +267,16 @@ table interoperability. The `UpgradeModule` resolves the differences and makes everything work seamlessly: - * We can make Angular 1 services available for injection to Angular 2 code + * We can make AngularJS services available for injection to Angular code by *upgrading* them. The same singleton instance of each service is shared - between the frameworks. In Angular 2 these services will always be in the + between the frameworks. In Angular these services will always be in the *root injector* and available to all components. They will always have - *string tokens* - the same tokens that they have in Angular 1. - * We can also make Angular 2 services available for injection to Angular 1 code - by *downgrading* them. Only services from the Angular 2 root injector can + *string tokens* - the same tokens that they have in AngularJS. + * We can also make Angular services available for injection to AngularJS code + by *downgrading* them. Only services from the Angular root injector can be downgraded. Again, the same singleton instances are shared between the frameworks. When we register a downgrade, we explicitly specify a *string token* that we want to - use in Angular 1. + use in AngularJS. figure.image-display img(src="/resources/images/devguide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700") @@ -281,7 +285,7 @@ figure.image-display #### Components and the DOM What we'll find in the DOM of a hybrid application are components and - directives from both Angular 1 and Angular 2. These components + directives from both AngularJS and Angular. These components communicate with each other by using the input and output bindings of their respective frameworks, which the `UpgradeModule` bridges together. They may also communicate through shared injected dependencies, @@ -292,27 +296,27 @@ figure.image-display 1. Every element in the DOM is owned by exactly one of the two frameworks. The other framework ignores it. If an element is - owned by Angular 1, Angular 2 treats it as if it didn't exist, + owned by AngularJS, Angular treats it as if it didn't exist, and vice versa. - 2. The root of the application *is always an Angular 1 template*. + 2. The root of the application *is always an AngularJS template*. - So a hybrid application begins life as an Angular 1 application, - and it is Angular 1 that processes its root template. Angular 2 then steps - into the picture when an Angular 2 component is used somewhere in + So a hybrid application begins life as an AngularJS application, + and it is AngularJS that processes its root template. Angular then steps + into the picture when an Angular component is used somewhere in the application templates. That component's view will then be managed - by Angular 2, and it may use any number of Angular 2 components and + by Angular, and it may use any number of Angular components and directives. Beyond that, we may interleave the two frameworks as much as we need to. We always cross the boundary between the two frameworks by one of two ways: - 1. By using a component from the other framework: An Angular 1 template - using an Angular 2 component, or an Angular 2 template using an - Angular 1 component. + 1. By using a component from the other framework: An AngularJS template + using an Angular component, or an Angular template using an + AngularJS component. 2. By transcluding or projecting content from the other framework. The - `UpgradeModule` bridges the related concepts of Angular 1 transclusion - and Angular 2 content projection together. + `UpgradeModule` bridges the related concepts of AngularJS transclusion + and Angular content projection together. figure.image-display img(src="/resources/images/devguide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500") @@ -321,44 +325,44 @@ figure.image-display Whenever we use a component that belongs to the other framework, a switch between framework boundaries occurs. However, that switch only happens to the *children* of the component element. Consider a situation - where we use an Angular 2 component from Angular 1 like this: + where we use an Angular component from AngularJS like this: - ``` - - ``` +code-example(language="html" escape="html"). + - The DOM element `` will remain to be an Angular 1 managed - element, because it's defined in an Angular 1 template. That also - means you can apply additional Angular 1 directives to it, but *not* - Angular 2 directives. It is only in the template of the `Ng2Component` - component where Angular 2 steps in. This same rule also applies when you - use Angular 1 component directives from Angular 2. +:marked + The DOM element `` will remain to be an AngularJS managed + element, because it's defined in an AngularJS template. That also + means you can apply additional AngularJS directives to it, but *not* + Angular directives. It is only in the template of the `Ng2Component` + component where Angular steps in. This same rule also applies when you + use AngularJS component directives from Angular. :marked #### Change Detection - Change detection in Angular 1 is all about `scope.$apply()`. After every + Change detection in AngularJS is all about `scope.$apply()`. After every event that occurs, `scope.$apply()` gets called. This is done either automatically by the framework, or in some cases manually by our own code. It is the point in time when change detection occurs and data bindings get updated. - In Angular 2 things are different. While change detection still + In Angular things are different. While change detection still occurs after every event, no one needs to call `scope.$apply()` for - that to happen. This is because all Angular 2 code runs inside something + that to happen. This is because all Angular code runs inside something called the [Angular zone](../api/core/index/NgZone-class.html). Angular always knows when the code finishes, so it also knows when it should kick off change detection. The code itself doesn't have to call `scope.$apply()` or anything like it. In the case of hybrid applications, the `UpgradeModule` bridges the - Angular 1 and Angular 2 approaches. Here's what happens: + AngularJS and Angular approaches. Here's what happens: - * Everything that happens in the application runs inside the Angular 2 zone. - This is true whether the event originated in Angular 1 or Angular 2 code. - The zone triggers Angular 2 change detection after every event. - * The `UpgradeModule` will invoke the Angular 1 `$rootScope.$apply()` after - every turn of the Angular zone. This also triggers Angular 1 change + * Everything that happens in the application runs inside the Angular zone. + This is true whether the event originated in AngularJS or Angular code. + The zone triggers Angular change detection after every event. + * The `UpgradeModule` will invoke the AngularJS `$rootScope.$apply()` after + every turn of the Angular zone. This also triggers AngularJS change detection after every event. figure.image-display @@ -366,58 +370,58 @@ figure.image-display :marked What this means in practice is that we do not need to call `$apply()` in - our code, regardless of whether it is in Angular 1 on Angular 2. The + our code, regardless of whether it is in AngularJS on Angular. The `UpgradeModule` does it for us. We *can* still call `$apply()` so there is no need to remove such calls from existing code. Those calls just don't have any effect in a hybrid application. :marked - When we downgrade an Angular 2 component and then use it from Angular 1, - the component's inputs will be watched using Angular 1 change detection. + When we downgrade an Angular component and then use it from AngularJS, + the component's inputs will be watched using AngularJS change detection. When those inputs change, the corresponding properties in the component are set. We can also hook into the changes by implementing the [OnChanges](../api/core/index/OnChanges-class.html) interface in the component, just like we could if it hadn't been downgraded. - Correspondingly, when we upgrade an Angular 1 component and use it from Angular 2, + Correspondingly, when we upgrade an AngularJS component and use it from Angular, all the bindings defined for the component directive's `scope` (or `bindToController`) - will be hooked into Angular 2 change detection. They will be treated - as regular Angular 2 inputs and set onto the scope (or controller) when + will be hooked into Angular change detection. They will be treated + as regular Angular inputs and set onto the scope (or controller) when they change. - ### Using UpgradeModule with Angular 2 _NgModules_ + ### Using UpgradeModule with Angular _NgModules_ - Both Angular 1 and Angular 2 have their own concept of modules + Both AngularJS and Angular have their own concept of modules to help organize an application into cohesive blocks of functionality. Their details are quite different in architecture and implementation. - In Angular 1, you add Angular assets to the `angular.module` property. - In Angular 2, you create one or more classes adorned with an `NgModule` decorator + In AngularJS, you add Angular assets to the `angular.module` property. + In Angular, you create one or more classes adorned with an `NgModule` decorator that describes Angular assets in metadata. The differences blossom from there. In a hybrid application we run both versions of Angular at the same time. - That means that we need at least one module each from both Angular 1 and Angular 2. - We will import `UpgradeModule` inside our Angular 2 module, and then use it for - bootstrapping our Angular 1 module. Let's see how. + That means that we need at least one module each from both AngularJS and Angular. + We will import `UpgradeModule` inside our Angular module, and then use it for + bootstrapping our AngularJS module. Let's see how. .l-sub-section :marked - Learn more about Angular 2 modules at the [NgModule guide](ngmodule.html). + Learn more about Angular modules at the [NgModule guide](ngmodule.html). :marked - ### Bootstrapping Hybrid Angular 1+2 Applications + ### Bootstrapping hybrid applications The first step to upgrading an application using the `UpgradeModule` is - always to bootstrap it as a hybrid that supports both Angular 1 and - Angular 2. + always to bootstrap it as a hybrid that supports both AngularJS and + Angular. - Pure Angular 1 applications can be bootstrapped in two ways: By using an `ng-app` + Pure AngularJS applications can be bootstrapped in two ways: By using an `ng-app` directive somewhere on the HTML page, or by calling [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap) - from JavaScript. In Angular 2, only the second method is possible - there is - no `ng-app` in Angular 2. This is also the case for hybrid applications. - Therefore, it is a good preliminary step to switch Angular 1 applications to use the + from JavaScript. In Angular, only the second method is possible - there is + no `ng-app` in Angular. This is also the case for hybrid applications. + Therefore, it is a good preliminary step to switch AngularJS applications to use the JavaScript bootstrap method even before switching them to hybrid mode. Say we have an `ng-app` driven bootstrap such as this one: @@ -432,7 +436,7 @@ figure.image-display +makeExample('upgrade-module/ts/app/1-bootstrap/app.module.ts', 'bootstrap') :marked - Now introduce Angular 2 to the project. Inspired by instructions in + Now introduce Angular to the project. Inspired by instructions in [the Setup](setup.html), you can selectively copy in material from the QuickStart github repository. @@ -444,76 +448,76 @@ figure.image-display This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have. It also imports `UpgradeModule` from `@angular/upgrade/static`, and adds an override to prevent - Angular 2 from bootstrapping itself in the form of the `ngDoBootstrap` empty class method. + Angular from bootstrapping itself in the form of the `ngDoBootstrap` empty class method. Now we bootstrap `AppModule` using `platformBrowserDynamic`'s `bootstrapModule` method. Then we use dependency injection to get a hold of the `UpgradeModule` instance in `AppModule`, - and use it to bootstrap our Angular 1 app. + and use it to bootstrap our AngularJS app. The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap): +makeExample('upgrade-module/ts/app/1-2-hybrid-bootstrap/app.module.ts', 'bootstrap') :marked - Congratulations! You're running a hybrid Angular 1+2 application! The - existing Angular 1 code works as before _and_ you're ready to run Angular 2 code. + Congratulations! You're running a hybrid application! The + existing AngularJS code works as before _and_ you're ready to run Angular code. :marked - ### Using Angular 2 Components from Angular 1 Code + ### Using Angular Components from AngularJS Code figure - img(src="/resources/images/devguide/upgrade/a1-to-a2.png" alt="Using an Angular 2 component from Angular 1 code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) + img(src="/resources/images/devguide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) :marked Once we're running a hybrid app, we can start the gradual process of upgrading - code. One of the more common patterns for doing that is to use an Angular 2 component - in an Angular 1 context. This could be a completely new component or one that was - previously Angular 1 but has been rewritten for Angular 2. + code. One of the more common patterns for doing that is to use an Angular component + in an AngularJS context. This could be a completely new component or one that was + previously AngularJS but has been rewritten for Angular. - Say we have a simple Angular 2 component that shows information about a hero: + Say we have a simple Angular component that shows information about a hero: +makeExample('upgrade-module/ts/app/downgrade-static/hero-detail.component.ts', null, 'hero-detail.component.ts') :marked - If we want to use this component from Angular 1, we need to *downgrade* it - using the `downgradeComponent()` method. What we get when we do that is an Angular 1 - *directive*, which we can then register into our Angular 1 module: + If we want to use this component from AngularJS, we need to *downgrade* it + using the `downgradeComponent()` method. What we get when we do that is an AngularJS + *directive*, which we can then register into our AngularJS module: +makeExample('upgrade-module/ts/app/downgrade-static/app.module.ts', 'downgradecomponent') :marked - Because `HeroDetailComponent` is an Angular 2 component, we must also add it to the + Because `HeroDetailComponent` is an Angular component, we must also add it to the `declarations` in the `AppModule`. - And because this component is being used from the Angular 1 module, and is an entry point into - our Angular 2 application, we also need to add it to the `entryComponents` for our - Angular 2 module. + And because this component is being used from the AngularJS module, and is an entry point into + our Angular application, we also need to add it to the `entryComponents` for our + Angular module. +makeExample('upgrade-module/ts/app/downgrade-static/app.module.ts', 'ngmodule') .l-sub-section :marked - All Angular 2 components, directives and pipes must be declared in an NgModule. + All Angular components, directives and pipes must be declared in an NgModule. :marked - The net resulit is an Angular 1 directive called `heroDetail`, that we can - use like any other directive in our Angular 1 templates. + The net resulit is an AngularJS directive called `heroDetail`, that we can + use like any other directive in our AngularJS templates. +makeExample('upgrade-module/ts/index-downgrade-static.html', 'usecomponent') .alert.is-helpful :marked - Note that this Angular 1 is an element directive (`restrict: 'E'`) called `heroDetail`. - An Angular 1 element directive is matched based on its _name_. - *The `selector` metadata of the downgraded Angular 2 component is ignored.* + Note that this AngularJS is an element directive (`restrict: 'E'`) called `heroDetail`. + An AngularJS element directive is matched based on its _name_. + *The `selector` metadata of the downgraded Angular component is ignored.* :marked Most components are not quite this simple, of course. Many of them have *inputs and outputs* that connect them to the outside world. An - Angular 2 hero detail component with inputs and outputs might look + Angular hero detail component with inputs and outputs might look like this: +makeExample('upgrade-module/ts/app/downgrade-io/hero-detail.component.ts', null, 'hero-detail.component.ts') :marked - These inputs and outputs can be supplied from the Angular 1 template, and the + These inputs and outputs can be supplied from the AngularJS template, and the `downgradeComponent()` method takes care of bridging them over via the `inputs` and `outputs` arrays: @@ -521,20 +525,20 @@ figure +makeExample('upgrade-module/ts/index-downgrade-io.html', 'usecomponent') :marked - Note that even though we are in an Angular 1 template, **we're using Angular 2 + Note that even though we are in an AngularJS template, **we're using Angular attribute syntax to bind the inputs and outputs**. This is a requirement for downgraded - components. The expressions themselves are still regular Angular 1 expressions. + components. The expressions themselves are still regular AngularJS expressions. .callout.is-important header Use kebab-case for downgraded component attributes :marked - There's one notable exception to the rule of using Angular 2 attribute syntax + There's one notable exception to the rule of using Angular attribute syntax for downgraded components. It has to do with input or output names that consist - of multiple words. In Angular 2 we would bind these attributes using camelCase: + of multiple words. In Angular we would bind these attributes using camelCase: code-example(format=""). [myHero]="hero" :marked - But when using them from Angular 1 templates, we need to use kebab-case: + But when using them from AngularJS templates, we need to use kebab-case: code-example(format=""). [my-hero]="hero" @@ -543,31 +547,31 @@ figure object that was emitted. In this case it will be the `Hero` object, because that is what was passed to `this.deleted.emit()`. - Since this is an Angular 1 template, we can still use other Angular 1 - directives on the element, even though it has Angular 2 binding attributes on it. + Since this is an AngularJS template, we can still use other AngularJS + directives on the element, even though it has Angular binding attributes on it. For example, we can easily make multiple copies of the component using `ng-repeat`: +makeExample('upgrade-module/ts/index-downgrade-io.html', 'userepeatedcomponent') :marked - ### Using Angular 1 Component Directives from Angular 2 Code + ### Using AngularJS Component Directives from Angular Code figure - img(src="/resources/images/devguide/upgrade/a2-to-a1.png" alt="Using an Angular 1 component from Angular 2 code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) + img(src="/resources/images/devguide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) :marked - So, we can write an Angular 2 component and then use it from Angular 1 + So, we can write an Angular component and then use it from AngularJS code. This is very useful when we start our migration from lower-level components and work our way up. But in some cases it is more convenient to do things in the opposite order: To start with higher-level components and work our way down. This too can be done using the `UpgradeModule`. - We can *upgrade* Angular 1 component directives and then use them from - Angular 2. + We can *upgrade* AngularJS component directives and then use them from + Angular. - Not all kinds of Angular 1 directives can be upgraded. The directive + Not all kinds of AngularJS directives can be upgraded. The directive really has to be a *component directive*, with the characteristics [described in the preparation guide above](#using-component-directives). Our safest bet for ensuring compatibility is using the [component API](https://docs.angularjs.org/api/ng/type/angular.Module) - introduced in Angular 1.5. + introduced in AngularJS.5. A simple example of an upgradable component is one that just has a template and a controller: @@ -575,9 +579,9 @@ figure +makeExample('upgrade-module/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail', 'hero-detail.component.ts') :marked - We can *upgrade* this component to Angular 2 using the `UpgradeComponent` class. - By creating a new Angular 2 **directive** that extends `UpgradeComponent` and doing a `super` call - inside it's constructor, we have a fully upgrade Angular 1 component to be used inside Angular 2. + We can *upgrade* this component to Angular using the `UpgradeComponent` class. + By creating a new Angular **directive** that extends `UpgradeComponent` and doing a `super` call + inside it's constructor, we have a fully upgrade AngularJS component to be used inside Angular. All that is left is to add it to `AppModule`'s `declarations` array. +makeExample('upgrade-module/ts/app/upgrade-static/hero-detail.component.ts', 'hero-detail-upgrade', 'hero-detail.component.ts') @@ -585,16 +589,16 @@ figure .alert.is-helpful :marked - Upgraded components are Angular 2 **directives**, instead of **components**, because Angular 2 - is unaware that Angular 1 will create elements under it. As far as Angular 2 knows, the upgraded - component is just a directive - a tag - and Angular 2 doesn't have to concern itself with + Upgraded components are Angular **directives**, instead of **components**, because Angular + is unaware that AngularJS will create elements under it. As far as Angular knows, the upgraded + component is just a directive - a tag - and Angular doesn't have to concern itself with it's children. :marked An upgraded component may also have inputs and outputs, as defined by - the scope/controller bindings of the original Angular 1 component - directive. When we use the component from an Angular 2 template, - we provide the inputs and outputs using **Angular 2 template syntax**, + the scope/controller bindings of the original AngularJS component + directive. When we use the component from an Angular template, + we provide the inputs and outputs using **Angular template syntax**, with the following rules: table @@ -634,61 +638,61 @@ table td :marked As a two-way binding: ``. - Since most Angular 1 two-way bindings actually only need a one-way binding + Since most AngularJS two-way bindings actually only need a one-way binding in practice, `` is often enough. :marked - As an example, say we have a hero detail Angular 1 component directive + As an example, say we have a hero detail AngularJS component directive with one input and one output: +makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io', 'hero-detail.component.ts') :marked - We can upgrade this component to Angular 2, annotate inputs and outputs in the upgrade directive, - and then provide the input and output using Angular 2 template syntax: + We can upgrade this component to Angular, annotate inputs and outputs in the upgrade directive, + and then provide the input and output using Angular template syntax: +makeExample('upgrade-module/ts/app/upgrade-io/hero-detail.component.ts', 'hero-detail-io-upgrade', 'hero-detail.component.ts') +makeExample('upgrade-module/ts/app/upgrade-io/container.component.ts', null, 'container.component.ts') :marked - ### Projecting Angular 1 Content into Angular 2 Components + ### Projecting AngularJS Content into Angular Components figure - img(src="/resources/images/devguide/upgrade/a1-to-a2-with-projection.png" alt="Projecting Angular 1 content into Angular 2" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) + img(src="/resources/images/devguide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) :marked - When we are using a downgraded Angular 2 component from an Angular 1 + When we are using a downgraded Angular component from an AngularJS template, the need may arise to *transclude* some content into it. This - is also possible. While there is no such thing as transclusion in Angular 2, + is also possible. While there is no such thing as transclusion in Angular, there is a very similar concept called *content projection*. The `UpgradeModule` is able to make these two features interoperate. - Angular 2 components that support content projection make use of an `` + Angular components that support content projection make use of an `` tag within them. Here's an example of such a component: +makeExample('upgrade-module/ts/app/1-to-2-projection/hero-detail.component.ts', null, 'hero-detail.component.ts') :marked - When using the component from Angular 1, we can supply contents for it. Just - like they would be transcluded in Angular 1, they get projected to the location - of the `` tag in Angular 2: + When using the component from AngularJS, we can supply contents for it. Just + like they would be transcluded in AngularJS, they get projected to the location + of the `` tag in Angular: +makeExample('upgrade-module/ts/index-1-to-2-projection.html', 'usecomponent') .alert.is-helpful :marked - When Angular 1 content gets projected inside an Angular 2 component, it still - remains in "Angular 1 land" and is managed by the Angular 1 framework. + When AngularJS content gets projected inside an Angular component, it still + remains in "AngularJS land" and is managed by the AngularJS framework. :marked - ### Transcluding Angular 2 Content into Angular 1 Component Directives + ### Transcluding Angular Content into AngularJS Component Directives figure - img(src="/resources/images/devguide/upgrade/a2-to-a1-with-transclusion.png" alt="Projecting Angular 2 content into Angular 1" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) + img(src="/resources/images/devguide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" align="left" style="width:250px; margin-left:-40px;margin-right:10px" ) :marked - Just like we can project Angular 1 content into Angular 2 components, - we can *transclude* Angular 2 content into Angular 1 components, whenever + Just like we can project AngularJS content into Angular components, + we can *transclude* Angular content into AngularJS components, whenever we are using upgraded versions from them. - When an Angular 1 component directive supports transclusion, it may use + When an AngularJS component directive supports transclusion, it may use the `ng-transclude` directive in its template to mark the transclusion point: @@ -701,33 +705,33 @@ figure 1.5 component API. :marked - If we upgrade this component and use it from Angular 2, we can populate + If we upgrade this component and use it from Angular, we can populate the component tag with contents that will then get transcluded: +makeExample('upgrade-module/ts/app/2-to-1-transclusion/container.component.ts', null, 'container.component.ts') :marked - ### Making Angular 1 Dependencies Injectable to Angular 2 + ### Making AngularJS Dependencies Injectable to Angular When running a hybrid app, we may bump into situations where we need to have - some Angular 1 dependencies to be injected to Angular 2 code. This may be - because we have some business logic still in Angular 1 services, or because - we need some of Angular 1's built-in services like `$location` or `$timeout`. + some AngularJS dependencies to be injected to Angular code. This may be + because we have some business logic still in AngularJS services, or because + we need some of AngularJS's built-in services like `$location` or `$timeout`. - In these situations, it is possible to *upgrade* an Angular 1 provider to - Angular 2. This makes it possible to then inject it somewhere in Angular 2 - code. For example, we might have a service called `HeroesService` in Angular 1: + In these situations, it is possible to *upgrade* an AngularJS provider to + Angular. This makes it possible to then inject it somewhere in Angular + code. For example, we might have a service called `HeroesService` in AngularJS: +makeExample('upgrade-module/ts/app/1-to-2-providers/heroes.service.ts', null, 'heroes.service.ts') :marked - We can upgrade the service using a Angular 2 [Factory provider](../guide/dependency-injection.html#factory-providers) - that requests the service from the Angular 1 `$injector`. The name of the Angular 2 dependency is up to you: + We can upgrade the service using a Angular [Factory provider](../guide/dependency-injection.html#factory-providers) + that requests the service from the AngularJS `$injector`. The name of the Angular dependency is up to you: +makeExample('upgrade-module/ts/app/1-to-2-providers/app.module.ts', 'register', 'app.module.ts') :marked - We can then inject it in Angular 2 using a string token: + We can then inject it in Angular using a string token: +makeExample('upgrade-module/ts/app/1-to-2-providers/hero-detail.component.ts', null, 'hero-detail.component.ts') @@ -736,35 +740,35 @@ figure In this example we upgraded a service class, which has the added benefit that we can use a TypeScript type annotation when we inject it. While it doesn't affect how the dependency is handled, it enables the benefits of static type - checking. This is not required though, and any Angular 1 service, factory, or + checking. This is not required though, and any AngularJS service, factory, or provider can be upgraded. :marked - ### Making Angular 2 Dependencies Injectable to Angular 1 + ### Making Angular Dependencies Injectable to AngularJS - In addition to upgrading Angular 1 dependencies, we can also *downgrade* - Angular 2 dependencies, so that we can use them from Angular 1. This can be - useful when we start migrating services to Angular 2 or creating new services - in Angular 2 while we still have components written in Angular 1. + In addition to upgrading AngularJS dependencies, we can also *downgrade* + Angular dependencies, so that we can use them from AngularJS. This can be + useful when we start migrating services to Angular or creating new services + in Angular while we still have components written in AngularJS. - For example, we might have an Angular 2 service called `Heroes`: + For example, we might have an Angular service called `Heroes`: +makeExample('upgrade-module/ts/app/2-to-1-providers/heroes.ts', null, 'heroes.ts') :marked - Again, as with Angular 2 components, register the provider with the `NgModule` by adding it to the module's `providers` list. + Again, as with Angular components, register the provider with the `NgModule` by adding it to the module's `providers` list. +makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'ngmodule', 'app.module.ts') :marked - Now wrap the Angular 2 `Heroes` in an *Angular 1 factory function* using `downgradeInjectable()`. - and plug the factory into an Angular 1 module. - The name of the Angular 1 dependency is up to you: + Now wrap the Angular `Heroes` in an *AngularJS factory function* using `downgradeInjectable()`. + and plug the factory into an AngularJS module. + The name of the AngularJS dependency is up to you: +makeExample('upgrade-module/ts/app/2-to-1-providers/app.module.ts', 'register', 'app.module.ts') :marked - After this, the service is injectable anywhere in our Angular 1 code: + After this, the service is injectable anywhere in our AngularJS code: +makeExample('upgrade-module/ts/app/2-to-1-providers/hero-detail.component.ts', null, 'hero-detail.component.ts') @@ -779,13 +783,13 @@ figure In this section and we will look at a complete example of preparing and upgrading an application using the `upgrade` module. The app we're going to work on is [Angular PhoneCat](https://github.com/angular/angular-phonecat) - from [the original Angular 1 tutorial](https://docs.angularjs.org/tutorial), + from [the original AngularJS tutorial](https://docs.angularjs.org/tutorial), which is where many of us began our Angular adventures. Now we'll see how to - bring that application to the brave new world of Angular 2. + bring that application to the brave new world of Angular. During the process we'll learn how to apply the steps outlined in the [preparation guide](#preparation) in practice: We'll align the application - with Angular 2 and also take TypeScript into use. + with Angular and also take TypeScript into use. To follow along with the tutorial, clone the [angular-phonecat](https://github.com/angular/angular-phonecat) repository @@ -842,9 +846,9 @@ figure .file scenarios.js :marked - This is actually a pretty good starting point. The code uses the Angular 1.5 + This is actually a pretty good starting point. The code uses the AngularJS.5 component API and the organization follows the - [Angular 1 Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md), + [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md), which is an important [preparation step](#following-the-angular-style-guide) before a successful upgrade. @@ -863,7 +867,7 @@ figure :marked ### Switching to TypeScript - Since we're going to be writing our Angular 2 code in TypeScript, it makes sense to + Since we're going to be writing our Angular code in TypeScript, it makes sense to bring in the TypeScript compiler even before we begin upgrading. We will also start to gradually phase out the Bower package manager in favor @@ -883,7 +887,7 @@ code-example(format=""). :marked We can now install type definitions for the existing libraries that - we're using but that don't come with prepackaged types: Angular 1 and the + we're using but that don't come with prepackaged types: AngularJS and the Jasmine unit test framework. code-example(format=""). @@ -920,7 +924,7 @@ code-example(format=""). application in your browser. Now that we have TypeScript though, we can start benefiting from some of its - features. There's a lot of value the language can provide to Angular 1 applications. + features. There's a lot of value the language can provide to AngularJS applications. For one thing, TypeScript is a superset of ES2015. Any app that has previously been written in ES5 - like the PhoneCat example has - can with TypeScript @@ -929,8 +933,8 @@ code-example(format=""). parameters, and destructuring assignments. Another thing we can do is start adding *type safety* to our code. This has - actually partially already happened because of the Angular 1 typings we installed. - TypeScript are checking that we are calling Angular 1 APIs correctly when we do + actually partially already happened because of the AngularJS typings we installed. + TypeScript are checking that we are calling AngularJS APIs correctly when we do things like register components to Angular modules. But we can also start adding *type annotations* for our own code to get even more @@ -942,7 +946,7 @@ code-example(format=""). :marked In the `Phone` service we can explicitly annotate the `$resource` service dependency - as an `angular.resource.IResourceService` - a type defined by the Angular 1 typings. + as an `angular.resource.IResourceService` - a type defined by the AngularJS typings. +makeExample('upgrade-phonecat-1-typescript/ts/app/core/phone/phone.service.ts', null, 'app/core/phone/phone.service.ts') @@ -955,9 +959,9 @@ code-example(format=""). .l-sub-section :marked - The [Angular 1.x type definitions](https://www.npmjs.com/package/@types/angular) + The [AngularJS.x type definitions](https://www.npmjs.com/package/@types/angular) we installed are not officially maintained by the Angular team, - but are quite comprehensive. It is possible to make an Angular 1.x application + but are quite comprehensive. It is possible to make an AngularJS.x application fully type-annotated with the help of these definitions. If this is something we wanted to do, it would be a good idea to enable @@ -969,12 +973,12 @@ code-example(format=""). :marked Another TypeScript feature we can make use of is *classes*. In particular, we can turn our component controllers into classes. That way they'll be a step - closer to becoming Angular 2 component classes, which will make our life + closer to becoming Angular component classes, which will make our life easier once we do the upgrade. - Angular 1 expects controllers to be constructor functions. That's exactly what + AngularJS expects controllers to be constructor functions. That's exactly what ES2015/TypeScript classes are under the hood, so that means we can just plug in a - class as a component controller and Angular 1 will happily use it. + class as a component controller and AngularJS will happily use it. Here's what our new class for the phone list component controller looks like: @@ -999,32 +1003,32 @@ code-example(format=""). +makeExample('upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.ts', null, 'app/phone-detail/phone-detail.component.ts') :marked - This makes our controller code look a lot more like Angular 2 already. We're - all set to actually introduce Angular 2 into the project. + This makes our controller code look a lot more like Angular already. We're + all set to actually introduce Angular into the project. - If we had any Angular 1 services in the project, those would also be + If we had any AngularJS services in the project, those would also be a good candidate for converting to classes, since like controllers, they're also constructor functions. But we only have the `Phone` factory in this project, and that's a bit special since it's an `ngResource` factory. So we won't be doing anything to it in the preparation stage. - We'll instead turn it directly into an Angular 2 service. + We'll instead turn it directly into an Angular service. - ### Installing Angular 2 + ### Installing Angular - Having completed our preparation work, let's get going with the Angular 2 + Having completed our preparation work, let's get going with the Angular upgrade of PhoneCat. We'll do this incrementally with the help of the - [upgrade module](#upgrading-with-the-upgrade-module) that comes with Angular 2. - By the time we're done, we'll be able to remove Angular 1 from the project + [upgrade module](#upgrading-with-the-upgrade-module) that comes with Angular. + By the time we're done, we'll be able to remove AngularJS from the project completely, but the key is to do this piece by piece without breaking the application. .alert.is-important The project also contains some animations, which we are not yet upgrading in this version of the guide. This will change in a later release. :marked - Let's install Angular 2 into the project, along with the SystemJS module loader. + Let's install Angular into the project, along with the SystemJS module loader. Take a look at the results of the [Setup](setup.html) instructions and get the following configurations from there: - * Add Angular 2 and the other new dependencies to `package.json` + * Add Angular and the other new dependencies to `package.json` * The SystemJS configuration file `systemjs.config.js` to the project root directory. Once these are done, run: @@ -1033,7 +1037,7 @@ code-example(format=""). npm install :marked - We can soon load Angular 2 dependencies into the application via `index.html`, + We can soon load Angular dependencies into the application via `index.html`, but first we need to do some directory path adjustments. This is because we're going to need to load files from `node_modules` and the project root, whereas so far in this project everything has been loaded from the `/app` directory. @@ -1053,7 +1057,7 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/index.html', 'base', 'index.html') :marked - Now we can load Angular 2 via SystemJS. We'll add the Angular 2 polyfills and the + Now we can load Angular via SystemJS. We'll add the Angular polyfills and the SystemJS config to the end of the `` section, and then we'll use `System.import` to load the actual application: @@ -1071,7 +1075,7 @@ code-example(format=""). ### Creating the _AppModule_ Now create the root `NgModule` class called `AppModule`. - There is already a file named `app.module.ts` that holds the Angular 1 module. + There is already a file named `app.module.ts` that holds the AngularJS module. Rename it to `app.module.ng1.ts` and update the corresponding script name in the `index.html` as well. The file contents remain: @@ -1083,21 +1087,21 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'bare', 'app.module.ts') :marked - ### Bootstrapping a hybrid 1+2 PhoneCat + ### Bootstrapping a hybrid PhoneCat What we'll do next is bootstrap the application as a *hybrid application* - that supports both Angular 1 and Angular 2 components. Once we've done that - we can start converting the individual pieces to Angular 2. + that supports both AngularJS and Angular components. Once we've done that + we can start converting the individual pieces to Angular. - To [bootstrap a hybrid application](#bootstrapping-hybrid-angular-1-2-applications), + To [bootstrap a hybrid application](#bootstrapping-hybrid-applications), we first need to import `UpgradeModule` in our `AppModule`, and override it's bootstrap method: +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'upgrademodule', 'app/app.module.ts') :marked - Our application is currently bootstrapped using the Angular 1 `ng-app` directive + Our application is currently bootstrapped using the AngularJS `ng-app` directive attached to the `` element of the host page. This will no longer work with - Angular 2. We should switch to a JavaScript-driven bootstrap instead. + Angular. We should switch to a JavaScript-driven bootstrap instead. So, remove the `ng-app` attribute from `index.html`, and instead bootstrap via `app/main.ts`. This file has been configured as the application entrypoint in `systemjs.config.js`, @@ -1107,13 +1111,12 @@ code-example(format=""). :marked The arguments used here are the root element of the application (which is - the same element we had `ng-app` on earlier), and the Angular 1.x modules + the same element we had `ng-app` on earlier), and the AngularJS.x modules that we want to load. Since we're bootstrapping the app through - an `UpgradeModule`, we're actually now running the app as a hybrid Angular 1+2 - app. + an `UpgradeModule`, we're actually now running the app as a **hybrid app**. - This means we are now running both Angular 1 and 2 at the same time. That's pretty - exciting! We're not running any actual Angular 2 components yet though, + This means we are now running both AngularJS and 2 at the same time. That's pretty + exciting! We're not running any actual Angular components yet though, so let's do that next. .l-sub-section @@ -1125,21 +1128,21 @@ code-example(format=""). work, once you have an ES6 `import` statement in a file all UMD typed modules must also be imported via `import` statements instead of being globally available. - Angular 1 is currently loaded by a script tag in `index.html`, which means that the whole app + AngularJS is currently loaded by a script tag in `index.html`, which means that the whole app has access to it as a global and uses the same instance of the `angular` variable. If we used `import * as angular from 'angular'` instead we would also need to overhaul how we - load every file in our Angular 1 app to use ES6 modules in order to ensure Angular 1 was being + load every file in our AngularJS app to use ES6 modules in order to ensure AngularJS was being loaded correctly. This is a considerable effort and it often isn't worth it, especially since we are in the - process of moving our our to Angular 2 already. + process of moving our our to Angular already. Instead we declare `angular` as `angular.IAngularStatic` to indicate it is a global variable and still have full typing support. :marked ### Upgrading the Phone service - The first piece we'll port over to Angular 2 is the `Phone` service, which + The first piece we'll port over to Angular is the `Phone` service, which resides in `app/core/phone/phone.service.ts` and makes it possible for components to load phone information from the server. Right now it's implemented with ngResource and we're using it for two things: @@ -1147,10 +1150,10 @@ code-example(format=""). * For loading the list of all phones into the phone list component * For loading the details of a single phone into the phone detail component. - We can replace this implementation with an Angular 2 service class, while - keeping our controllers in Angular 1 land. + We can replace this implementation with an Angular service class, while + keeping our controllers in AngularJS land. - In the new version, we import the Angular 2 HTTP module and call its `Http` service instead of `ngResource`. + In the new version, we import the Angular HTTP module and call its `Http` service instead of `ngResource`. Re-open the `app.module.ts` file, import and add `HttpModule` to the `imports` array of the `AppModule`: @@ -1164,10 +1167,10 @@ code-example(format=""). :marked The `@Injectable` decorator will attach some dependency injection metadata - to the class, letting Angular 2 know about its dependencies. As described + to the class, letting Angular know about its dependencies. As described by our [Dependency Injection Guide](../guide/dependency-injection.html), this is a marker decorator we need to use for classes that have no other - Angular 2 decorators but still need to have their dependencies injected. + Angular decorators but still need to have their dependencies injected. In its constructor the class expects to get the `Http` service. It will be injected to it and it is stored as a private field. The service is then @@ -1184,7 +1187,7 @@ code-example(format=""). :marked `@angular/upgrade/static` has a `downgradeInjectable` method for the purpose of making - Angular 2 services available to Angular 1 code. Use it to plug in the `Phone` service: + Angular services available to AngularJS code. Use it to plug in the `Phone` service: +makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.ts', 'downgrade-injectable', 'app/core/phone/phone.service.ts (downgrade)')(format='.') @@ -1195,11 +1198,11 @@ code-example(format=""). :marked Notice that we're importing the `map` operator of the RxJS `Observable` separately. - We need to do this for all RxJS operators that we want to use, since Angular 2 + We need to do this for all RxJS operators that we want to use, since Angular does not load all of them by default. The new `Phone` service has the same features as the original, `ngResource`-based service. - Because it's an Angular 2 service, we register it with the `NgModule` providers: + Because it's an Angular service, we register it with the `NgModule` providers: +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'phone', 'app.module.ts') @@ -1207,7 +1210,7 @@ code-example(format=""). Now that we are loading `phone.service.ts` through an import that is resolved by SystemJS, we should **remove the <script> tag** for the service from `index.html`. This is something we'll do to all our components as we upgrade them. Simultaneously - with the Angular 1 to 2 upgrade we're also migrating our code from scripts to modules. + with the AngularJS to 2 upgrade we're also migrating our code from scripts to modules. At this point we can switch our two components to use the new service instead of the old one. We `$inject` it as the downgraded `phone` factory, @@ -1219,10 +1222,10 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ng1.ts', null, 'app/phone-detail/phone-detail.component.ts') :marked - What we have here are two Angular 1 components using an Angular 2 service! + What we have here are two AngularJS components using an Angular service! The components don't need to be aware of this, though the fact that the service returns Observables and not Promises is a bit of a giveaway. - In any case, what we've achieved is a migration of a service to Angular 2 + In any case, what we've achieved is a migration of a service to Angular without having to yet migrate the components that use it. .alert.is-helpful @@ -1234,27 +1237,27 @@ code-example(format=""). :marked ### Upgrading Components - Next, let's upgrade our Angular 1 components to Angular 2 components. We'll + Next, let's upgrade our AngularJS components to Angular components. We'll do it one at a time, while still keeping the application in hybrid mode. - As we make these conversions, we'll also be defining our first Angular 2 *pipes*. + As we make these conversions, we'll also be defining our first Angular *pipes*. Let's look at the phone list component first. Right now it contains a TypeScript controller class and a component definition object. We can morph this into - an Angular 2 component by just renaming the controller class and turning the - Angular 1 component definition object into an Angular 2 `@Component` decorator. + an Angular component by just renaming the controller class and turning the + AngularJS component definition object into an Angular `@Component` decorator. We can then also remove the static `$inject` property from the class: +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts', 'initialclass', 'app/phone-list/phone-list.component.ts') :marked The `selector` attribute is a CSS selector that defines where on the page the component - should go. In Angular 1 we do matching based on component names, but in Angular 2 we + should go. In AngularJS we do matching based on component names, but in Angular we have these explicit selectors. This one will match elements with the name `phone-list`, - just like the Angular 1 version did. + just like the AngularJS version did. - We now also need to convert the template of this component into Angular 2 syntax. - The search controls replace the Angular 1 `$ctrl` expressions - with Angular 2's two-way `[(ngModel)]` binding syntax: + We now also need to convert the template of this component into Angular syntax. + The search controls replace the AngularJS `$ctrl` expressions + with Angular's two-way `[(ngModel)]` binding syntax: +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.template.html', 'controls', 'app/phone-list/phone-list.template.html (search controls)')(format='.') @@ -1266,8 +1269,8 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html (phones)')(format='.') :marked - #### No Angular 2 _filter_ or _orderBy_ filters - The built-in Angular 1 `filter` and `orderBy` filters do not exist in Angular 2, + #### No Angular _filter_ or _orderBy_ filters + The built-in AngularJS `filter` and `orderBy` filters do not exist in Angular, so we need to do the filtering and sorting ourselves. We replaced the `filter` and `orderBy` filters with bindings to the `getPhones()` controller method, @@ -1276,9 +1279,9 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts', 'getphones', 'app/phone-list/phone-list.component.ts') :marked - Now we need to downgrade our Angular 2 component so we can use it in Angular 1. + Now we need to downgrade our Angular component so we can use it in AngularJS. Instead of registering a component, we register a `phoneList` *directive*, - a downgraded version of the Angular 2 component. + a downgraded version of the Angular component. The `as angular.IDirectiveFactory` cast tells the TypeScript compiler that the return value of the `downgradeComponent` method is a directive factory. @@ -1286,7 +1289,7 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts', 'downgrade-component', 'app/phone-list/phone-list.component.ts') :marked - The new `PhoneListComponent` uses the Angular 2 `ngModel` directive, located in the `FormsModule`. + The new `PhoneListComponent` uses the Angular `ngModel` directive, located in the `FormsModule`. Add the `FormsModule` to `NgModule` imports, declare the new `PhoneListComponent` and finally add it to `entryComponents` since we downgraded it: @@ -1303,19 +1306,19 @@ code-example(format=""). This is similar to the phone list component. The new wrinkle is the `@Inject` decorator that identifies the `$routeParams` dependency. - The Angular 1 injector has an Angular 1 router dependency called `$routeParams`. - which was injected into `PhoneDetails` when it was still an Angular 1 controller. + The AngularJS injector has an AngularJS router dependency called `$routeParams`. + which was injected into `PhoneDetails` when it was still an AngularJS controller. We intend to inject it into the new `PhoneDetailsComponent`. - Unfortunately, Angular 1 dependencies are not automatically available to Angular 2 components. - We must use a [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2) - to make `$routeParams` an Angular 2 provider. + Unfortunately, AngularJS dependencies are not automatically available to Angular components. + We must use a [Factory provider](#making-angularjs-dependencies-injectable-to-angular) + to make `$routeParams` an Angular provider. Do that in `app.module.ts`: +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'routeparams', 'app/app.module.ts ($routeParams)')(format='.') :marked - Convert the phone detail component template into Angular 2 syntax as follows: + Convert the phone detail component template into Angular syntax as follows: +makeExample('upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.template.html', null, 'app/phone-detail/phone-detail.template.html') @@ -1325,17 +1328,17 @@ code-example(format=""). * We've removed the `$ctrl.` prefix from all expressions. * Just like we did in the phone list, we've replaced `ng-src` with property bindings for the standard `src` property. - * We're using the property binding syntax around `ng-class`. Though Angular 2 + * We're using the property binding syntax around `ng-class`. Though Angular does have [a very similar `ngClass`](../guide/template-syntax.html#directives) - as Angular 1 does, its value is not magically evaluated as an expression. - In Angular 2 we always specify in the template when an attribute's value is + as AngularJS does, its value is not magically evaluated as an expression. + In Angular we always specify in the template when an attribute's value is a property expression, as opposed to a literal string. * We've replaced `ng-repeat`s with `*ngFor`s. * We've replaced `ng-click` with an event binding for the standard `click`. * We've wrapped the whole template in an `ngIf` that causes it only to be rendered when there is a phone present. We need this because when the component first loads, we don't have `phone` yet and the expressions will refer to a - non-existing value. Unlike in Angular 1, Angular 2 expressions do not fail silently + non-existing value. Unlike in AngularJS, Angular expressions do not fail silently when we try to refer to properties on undefined objects. We need to be explicit about cases where this is expected. @@ -1348,14 +1351,14 @@ code-example(format=""). #### Add the _CheckmarkPipe_ - The Angular 1 directive had a `checkmark` _filter_. - Let's turn that into an Angular 2 **pipe**. + The AngularJS directive had a `checkmark` _filter_. + Let's turn that into an Angular **pipe**. There is no upgrade method to convert filters into pipes. You won't miss it. It's easy to turn the filter function into an equivalent Pipe class. The implementation is the same as before, repackaged in the `transform` method. - Rename the file to `checkmark.pipe.ts` to conform with Angular 2 conventions: + Rename the file to `checkmark.pipe.ts` to conform with Angular conventions: +makeExample('upgrade-phonecat-2-hybrid/ts/app/core/checkmark/checkmark.pipe.ts', null, 'app/core/checkmark/checkmark.pipe.ts')(format='.') @@ -1366,25 +1369,25 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/app/app.module.ts', 'checkmarkpipe', 'app.module.ts') :marked - ### Switching To The Angular 2 Router And Bootstrap + ### Switching To The Angular Router And Bootstrap - At this point we've replaced all Angular 1 application components with - their Angular 2 counterparts. + At this point we've replaced all AngularJS application components with + their Angular counterparts. The application is still bootstrapped as a hybrid app. There's no need for that anymore. - It's time to remove the last remnants of Angular 1 in two final steps: - 1. Switch to the Angular 2 router. - 1. Bootstrap as a pure Angular 2 app. + It's time to remove the last remnants of AngularJS in two final steps: + 1. Switch to the Angular router. + 1. Bootstrap as a pure Angular app. - #### Switch to the Angular 2 router - Angular 2 has an [all-new router](router.html). + #### Switch to the Angular router + Angular has an [all-new router](router.html). Like all routers, it needs a place in the UI to display routed views. - The Angular 2 that's the `` and it belongs in a *root component* + The Angular that's the `` and it belongs in a *root component* at the top of the applications component tree. - We don't yet have such a root component, because the app is still managed as an Angular 1 app. + We don't yet have such a root component, because the app is still managed as an AngularJS app. Create a new `app.component.ts` file with the following `AppComponent` class: +makeExample('upgrade-phonecat-3-final/ts/app/app.component.ts', null, 'app/app.component.ts')(format='.') @@ -1393,19 +1396,19 @@ code-example(format=""). It has a simple template that only includes the ``. This component just renders the contents of the active route and nothing else. - The selector tells Angular 2 to plug this root component into the `` + The selector tells Angular to plug this root component into the `` element on the host web page when the application launches. Add this `` element to the `index.html`. - It replaces the old Angular 1 `ng-view` directive: + It replaces the old AngularJS `ng-view` directive: +makeExample('upgrade-phonecat-3-final/ts/index.html', 'appcomponent', 'index.html (body)')(format='.') :marked #### Create the _Routing Module_ - A router needs configuration whether it's the Angular 1 or Angular 2 or any other router. + A router needs configuration whether it's the AngularJS or Angular or any other router. - The details of Angular 2 router configuration are best left to the [Routing documentation](router.html) + The details of Angular router configuration are best left to the [Routing documentation](router.html) which recommends that you create a `NgModule` dedicated to router configuration (called a _Routing Module_): @@ -1424,7 +1427,7 @@ code-example(format=""). +makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app/app.module.ts') :marked - The Angular 2 router passes route parameters differently. + The Angular router passes route parameters differently. Correct the `PhoneDetail` component constructor to expect an injected `ActivatedRoute` object. Extract the `phoneId` from the `ActivatedRoute.snapshot.params` and fetch the phone data as before: @@ -1442,16 +1445,16 @@ code-example(format=""). See the [Routing](router.html) page for details. :marked - #### Bootstrap as an Angular 2 app + #### Bootstrap as an Angular app You may have noticed one extra `bootstrap` metadata property added to the `AppModule` +makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', 'bootstrap', 'app/app.module.ts (bootstrap)')(format='.') :marked - That tells Angular 2 that it should bootstrap the app with the _root_ `AppComponent` and + That tells Angular that it should bootstrap the app with the _root_ `AppComponent` and insert it's view into the host web page. Now switch the bootstrap method of the application from the `UpgradeAdapter` - to the Angular 2 way. + to the Angular way. Now we can drop `upgrade.bootstrap` from our application bootstrap, and remove the `ngDoBootstrap()` override from `app.module.ts` @@ -1460,22 +1463,22 @@ code-example(format=""). +makeExample('upgrade-phonecat-3-final/ts/app/app.module.ts', null, 'app.module.ts') :marked - You are now running a pure Angular 2 application! + You are now running a pure Angular application! - ### Say Goodbye to Angular 1 + ### Say Goodbye to AngularJS It is time to take off the training wheels and let our application begin - its new life as a pure, shiny Angular 2 app. The remaining tasks all have to + its new life as a pure, shiny Angular app. The remaining tasks all have to do with removing code - which of course is every programmer's favorite task! If you haven't already, remove all references to the `UpgradeModule` from `app.module.ts`, - as well as any [Factory provider](#making-angular-1-dependencies-injectable-to-angular-2) for Angular 1 services. - Also remove any `downgradeComponent()` you find, together with the associated Angular 1 + as well as any [Factory provider](#making-angularjs-dependencies-injectable-to-angular) for AngularJS services. + Also remove any `downgradeComponent()` you find, together with the associated AngularJS directive declarations. :marked - You may also completely remove the following files. They are Angular 1 - module configuration files and not needed in Angular 2: + You may also completely remove the following files. They are AngularJS + module configuration files and not needed in Angular: * `app/app.module.ng1.ts` * `app/app.config.ts` @@ -1484,21 +1487,21 @@ code-example(format=""). * `app/phone-detail/phone-detail.module.ts` * `app/phone-list/phone-list.module.ts` - The external typings for Angular 1 may be uninstalled as well. The only ones - we still need are for Jasmine and Angular 2 polyfills. + The external typings for AngularJS may be uninstalled as well. The only ones + we still need are for Jasmine and Angular polyfills. code-example(format=""). npm uninstall @types/angular @types/angular-animate @types/angular-cookies @types/angular-mocks @types/angular-resource @types/angular-route @types/angular-sanitize --save-dev :marked Finally, from `index.html`, remove all references to - Angular 1 scripts, the Angular 2 upgrade module, and jQuery. When we're done, + AngularJS scripts, the Angular upgrade module, and jQuery. When we're done, this is what it should look like: +makeExample('upgrade-phonecat-3-final/ts/index.html', 'full', 'index.html') :marked - That is the last we'll see of Angular 1! It has served us well but now + That is the last we'll see of AngularJS! It has served us well but now it's time to say goodbye. @@ -1531,9 +1534,9 @@ code-example(format=""). ng12Hybrid: true :marked - The next set of changes is when we start to upgrade components and their template to Angular 2. - This is because the E2E tests have matchers that are specific to Angular 1. - For PhoneCat we need to make the following changes in order to make things work with Angular 2: + The next set of changes is when we start to upgrade components and their template to Angular. + This is because the E2E tests have matchers that are specific to AngularJS. + For PhoneCat we need to make the following changes in order to make things work with Angular: table tr @@ -1549,7 +1552,7 @@ table `by.css('.phones .name')` td :marked - The repeater matcher relies on Angular 1 `ng-repeat` + The repeater matcher relies on AngularJS `ng-repeat` tr td :marked @@ -1559,7 +1562,7 @@ table `by.css('.phones li')` td :marked - The repeater matcher relies on Angular 1 `ng-repeat` + The repeater matcher relies on AngularJS `ng-repeat` tr td :marked @@ -1569,7 +1572,7 @@ table `by.css('input')` td :marked - The model matcher relies on Angular 1 `ng-model` + The model matcher relies on AngularJS `ng-model` tr td :marked @@ -1579,7 +1582,7 @@ table `by.css('select')` td :marked - The model matcher relies on Angular 1 `ng-model` + The model matcher relies on AngularJS `ng-model` tr td :marked @@ -1589,14 +1592,14 @@ table `by.css('h1')` td :marked - The binding matcher relies on Angular 1 data binding + The binding matcher relies on AngularJS data binding :marked When the bootstrap method is switched from that of `UpgradeModule` to - pure Angular 2, Angular 1 ceases to exist on the page completely. + pure Angular, AngularJS ceases to exist on the page completely. At this point we need to tell Protractor that it should not be looking for - an Angular 1 app anymore, but instead it should find *Angular 2 apps* from + an AngularJS app anymore, but instead it should find *Angular apps* from the page. Replace the `ng12Hybrid` previously added with the following in `protractor-conf.js`: @@ -1606,7 +1609,7 @@ code-example(format=""). :marked Also, there are a couple of Protractor API calls in the PhoneCat test code that - are using the Angular 1 `$location` service under the hood. As that + are using the AngularJS `$location` service under the hood. As that service is no longer there after the upgrade, we need to replace those calls with ones that use WebDriver's generic URL APIs instead. The first of these is the redirection spec: @@ -1630,19 +1633,19 @@ code-example(format=""). For instance, in the phone detail component spec we can use not only ES2015 features like arrow functions and block-scoped variables, but also type - definitions for some of the Angular 1 services we're consuming: + definitions for some of the AngularJS services we're consuming: +makeExample('upgrade-phonecat-1-typescript/ts/app/phone-detail/phone-detail.component.spec.ts', null, 'app/phone-detail/phone-detail.component.spec.ts') :marked Once we start the upgrade process and bring in SystemJS, configuration changes - are needed for Karma. We need to let SystemJS load all the new Angular 2 code, + are needed for Karma. We need to let SystemJS load all the new Angular code, which can be done with the following kind of shim file: +makeExample('upgrade-phonecat-2-hybrid/ts/karma-test-shim.1.js', null, 'karma-test-shim.js') :marked - The shim first loads the SystemJS configuration, then Angular 2's test support libraries, + The shim first loads the SystemJS configuration, then Angular's test support libraries, and then the application's spec files themselves. Karma configuration should then be changed so that it uses the application root dir @@ -1658,13 +1661,13 @@ code-example(format=""). +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'files', 'karma.conf.js') :marked - Since the HTML templates of Angular 2 components will be loaded as well, we need to help + Since the HTML templates of Angular components will be loaded as well, we need to help Karma out a bit so that it can route them to the right paths: +makeExample('upgrade-phonecat-2-hybrid/ts/karma.conf.ng1.js', 'html', 'karma.conf.js') :marked - The unit test files themselves also need to be switched to Angular 2 when their production + The unit test files themselves also need to be switched to Angular when their production counterparts are switched. The specs for the checkmark pipe are probably the most straightforward, as the pipe has no dependencies: @@ -1672,7 +1675,7 @@ code-example(format=""). :marked The unit test for the phone service is a bit more involved. We need to switch from the mocked-out - Angular 1 `$httpBackend` to a mocked-out Angular 2 Http backend. + AngularJS `$httpBackend` to a mocked-out Angular Http backend. +makeExample('upgrade-phonecat-2-hybrid/ts/app/core/phone/phone.service.spec.ts', null, 'app/core/phone/phone.service.spec.ts') @@ -1686,9 +1689,9 @@ code-example(format=""). :marked - Finally, we need to revisit both of the component tests when we switch to the Angular 2 - router. For the details component we need to provide a mock of Angular 2 `ActivatedRoute` object - instead of using the Angular 1 `$routeParams`. + Finally, we need to revisit both of the component tests when we switch to the Angular + router. For the details component we need to provide a mock of Angular `ActivatedRoute` object + instead of using the AngularJS `$routeParams`. +makeExample('upgrade-phonecat-3-final/ts/app/phone-detail/phone-detail.component.spec.ts', 'activatedroute', 'app/phone-detail/phone-detail.component.spec.ts') diff --git a/public/docs/ts/latest/help-new.jade b/public/docs/ts/latest/help-new.jade index a786955a9b..d94c15811a 100644 --- a/public/docs/ts/latest/help-new.jade +++ b/public/docs/ts/latest/help-new.jade @@ -2,7 +2,7 @@ div(flex) p. What's your question about? select#feedback-dropdown(name="Angular Version") - option(value="Angular2") Angular 2 - option(value="Angular1") Angular 1 + option(value="Angular") Angular + option(value="AngularJS") AngularJS button#feedback-btn. Submit diff --git a/public/docs/ts/latest/index.jade b/public/docs/ts/latest/index.jade index f8d6236c90..181bd0ce31 100644 --- a/public/docs/ts/latest/index.jade +++ b/public/docs/ts/latest/index.jade @@ -42,7 +42,7 @@ li a(href="/docs/#{lang}/#{vers}/cookbook/aot-compiler.html") Ahead-of-time Compilation 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 a(href="/docs/#{lang}/#{vers}/cookbook/ngmodule-faq.html") Angular Module FAQ li diff --git a/public/resources/images/devguide/upgrade/a-to-ajs-with-transclusion.png b/public/resources/images/devguide/upgrade/a-to-ajs-with-transclusion.png new file mode 100644 index 0000000000..cbff5ad4fb Binary files /dev/null and b/public/resources/images/devguide/upgrade/a-to-ajs-with-transclusion.png differ diff --git a/public/resources/images/devguide/upgrade/a-to-ajs.png b/public/resources/images/devguide/upgrade/a-to-ajs.png new file mode 100644 index 0000000000..6ee416d0bb Binary files /dev/null and b/public/resources/images/devguide/upgrade/a-to-ajs.png differ diff --git a/public/resources/images/devguide/upgrade/a1-to-a2-with-projection.png b/public/resources/images/devguide/upgrade/a1-to-a2-with-projection.png deleted file mode 100644 index 7ae25c3637..0000000000 Binary files a/public/resources/images/devguide/upgrade/a1-to-a2-with-projection.png and /dev/null differ diff --git a/public/resources/images/devguide/upgrade/a1-to-a2.png b/public/resources/images/devguide/upgrade/a1-to-a2.png deleted file mode 100644 index 81398b9caf..0000000000 Binary files a/public/resources/images/devguide/upgrade/a1-to-a2.png and /dev/null differ diff --git a/public/resources/images/devguide/upgrade/a2-to-a1-with-transclusion.png b/public/resources/images/devguide/upgrade/a2-to-a1-with-transclusion.png deleted file mode 100644 index af362a6278..0000000000 Binary files a/public/resources/images/devguide/upgrade/a2-to-a1-with-transclusion.png and /dev/null differ diff --git a/public/resources/images/devguide/upgrade/a2-to-a1.png b/public/resources/images/devguide/upgrade/a2-to-a1.png deleted file mode 100644 index 57350dccff..0000000000 Binary files a/public/resources/images/devguide/upgrade/a2-to-a1.png and /dev/null differ diff --git a/public/resources/images/devguide/upgrade/ajs-to-a-with-projection.png b/public/resources/images/devguide/upgrade/ajs-to-a-with-projection.png new file mode 100644 index 0000000000..42ad5f9a5a Binary files /dev/null and b/public/resources/images/devguide/upgrade/ajs-to-a-with-projection.png differ diff --git a/public/resources/images/devguide/upgrade/ajs-to-a.png b/public/resources/images/devguide/upgrade/ajs-to-a.png new file mode 100644 index 0000000000..98764437fe Binary files /dev/null and b/public/resources/images/devguide/upgrade/ajs-to-a.png differ diff --git a/public/resources/images/devguide/upgrade/change_detection.png b/public/resources/images/devguide/upgrade/change_detection.png index 02d09da731..269118d81a 100644 Binary files a/public/resources/images/devguide/upgrade/change_detection.png and b/public/resources/images/devguide/upgrade/change_detection.png differ diff --git a/public/resources/images/devguide/upgrade/dom.png b/public/resources/images/devguide/upgrade/dom.png index c75f858eed..21d2e8a8ca 100644 Binary files a/public/resources/images/devguide/upgrade/dom.png and b/public/resources/images/devguide/upgrade/dom.png differ diff --git a/public/resources/images/devguide/upgrade/injectors-2.png b/public/resources/images/devguide/upgrade/injectors-2.png new file mode 100644 index 0000000000..f46d54f9c3 Binary files /dev/null and b/public/resources/images/devguide/upgrade/injectors-2.png differ diff --git a/public/resources/images/devguide/upgrade/injectors.png b/public/resources/images/devguide/upgrade/injectors.png index dd6900a2ac..60f491ebef 100644 Binary files a/public/resources/images/devguide/upgrade/injectors.png and b/public/resources/images/devguide/upgrade/injectors.png differ diff --git a/tools/doc-shredder/_test/test_source/multiregion/mainBlankDocPlaster.ts b/tools/doc-shredder/_test/test_source/multiregion/mainBlankDocPlaster.ts index 6d51f851ab..be9dbd5d26 100644 --- a/tools/doc-shredder/_test/test_source/multiregion/mainBlankDocPlaster.ts +++ b/tools/doc-shredder/_test/test_source/multiregion/mainBlankDocPlaster.ts @@ -8,7 +8,7 @@ import {Component, View, bootstrap} from 'angular2/angular2'; selector: 'my-app' }) @View({ - template: '

My first Angular 2 App

' + template: '

My first Angular App

' }) class AppComponent { } @@ -20,7 +20,7 @@ class AppComponent { bootstrap(AppComponent); // #docregion twoparts -// final comment +// final comment // #enddocregion twoparts diff --git a/tools/doc-shredder/_test/test_source/no-multiregion/main.ts b/tools/doc-shredder/_test/test_source/no-multiregion/main.ts index 7a6f15ca43..71ec4f1761 100644 --- a/tools/doc-shredder/_test/test_source/no-multiregion/main.ts +++ b/tools/doc-shredder/_test/test_source/no-multiregion/main.ts @@ -7,10 +7,10 @@ import {Component, View, bootstrap} from 'angular2/angular2'; selector: 'my-app' }) @View({ - template: '

My first Angular 2 App

' + template: '

My first Angular App

' }) class AppComponent { } // #docregion bootstrap bootstrap(AppComponent); -// #enddocregion \ No newline at end of file +// #enddocregion diff --git a/tools/doc-shredder/_test/test_source/no-multiregion/nested-regions.ts b/tools/doc-shredder/_test/test_source/no-multiregion/nested-regions.ts index b8607bf62c..16df86d9d7 100644 --- a/tools/doc-shredder/_test/test_source/no-multiregion/nested-regions.ts +++ b/tools/doc-shredder/_test/test_source/no-multiregion/nested-regions.ts @@ -8,7 +8,7 @@ import {Component, View, bootstrap} from 'angular2/angular2'; selector: 'my-app' }) @View({ - template: '

My First Angular 2 App

' + template: '

My First Angular App

' }) // #docregion class class AppComponent { @@ -19,4 +19,4 @@ class AppComponent { // #docregion bootstrap bootstrap(AppComponent); // #enddocregion -// #enddocregion \ No newline at end of file +// #enddocregion