chore: Angular 1 -> AngularJS / Angular 2 -> Angular (#3143)
* chore: Angular 1 -> AngularJS / Angular 2 -> Angular * Jesus' tweaks
This commit is contained in:
Ward Bell
Jesús Rodríguez
parent
969f169eb1
commit
de4903be56
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
26
harp.json
26
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"
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ style(rel='stylesheet').
|
|||
li.
|
||||
Best Technology Demonstration
|
||||
<br>
|
||||
<small>Huge hint: Angular 2 scores points</small>
|
||||
<small>Huge hint: Angular scores points</small>
|
||||
|
||||
p Don’t have Cardboard and want one? Check out:
|
||||
p.text-center
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"description": "Angular 1 to Angular 2 Quick Reference",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[1].*"
|
||||
],
|
||||
"tags":["cookbook"]
|
||||
}
|
||||
|
|
@ -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('');
|
||||
|
|
@ -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';
|
||||
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<base href="/">
|
||||
<meta charset="UTF-8">
|
||||
<title>Angular 1 to Angular 2 Quick Reference</title>
|
||||
<title>AngularJS to Angular Quick Reference</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- #docregion style -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"description": "AngularJS to Angular Quick Reference",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
"!**/*.[1].*"
|
||||
],
|
||||
"tags":["cookbook", "angularjs"]
|
||||
}
|
||||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@
|
|||
<!--#enddocregion i18n-attribute-desc-->
|
||||
|
||||
<!--#docregion i18n-title-->
|
||||
<img [src]="logo" title="Angular 2 logo">
|
||||
<img [src]="logo" title="Angular logo">
|
||||
<!--#enddocregion i18n-title-->
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ I don't output any element either
|
|||
<br />
|
||||
|
||||
<!--#docregion i18n-title-translate-->
|
||||
<img [src]="logo" i18n-title title="Angular 2 logo" />
|
||||
<img [src]="logo" i18n-title title="Angular logo" />
|
||||
<!--#enddocregion i18n-title-translate-->
|
||||
<br>
|
||||
<button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button>
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ I don't output any element either
|
|||
<note priority="1" from="description">optional description</note>
|
||||
<note priority="1" from="meaning">optional meaning</note>
|
||||
</trans-unit>
|
||||
<trans-unit id="35ab5d6121ecbe0decdda638571a5a55ac77d5c4" datatype="html">
|
||||
<source>Angular 2 logo</source>
|
||||
<target>Logo de Angular 2</target>
|
||||
<trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
|
||||
<source>Angular logo</source>
|
||||
<target>Logo de Angular</target>
|
||||
</trans-unit>
|
||||
<trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">
|
||||
<source/>
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
<note priority="1" from="description">optional description</note>
|
||||
<note priority="1" from="meaning">optional meaning</note>
|
||||
</trans-unit>
|
||||
<trans-unit id="35ab5d6121ecbe0decdda638571a5a55ac77d5c4" datatype="html">
|
||||
<source>Angular 2 logo</source>
|
||||
<target>Logo de Angular 2</target>
|
||||
<trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
|
||||
<source>Angular logo</source>
|
||||
<target>Logo de Angular</target>
|
||||
</trans-unit>
|
||||
<!-- #enddocregion translated-other-nodes -->
|
||||
<!-- #docregion translated-plural -->
|
||||
|
|
|
|||
|
|
@ -20,8 +20,14 @@ I don't output any element either
|
|||
<note priority="1" from="description">optional description</note>
|
||||
<note priority="1" from="meaning">optional meaning</note>
|
||||
</trans-unit>
|
||||
<trans-unit id="35ab5d6121ecbe0decdda638571a5a55ac77d5c4" datatype="html">
|
||||
<source>Angular 2 logo</source>
|
||||
<trans-unit id="701174153757adf13e7c24a248c8a873ac9f5193" datatype="html">
|
||||
<source>Angular logo</source>
|
||||
<target/>
|
||||
</trans-unit>
|
||||
<trans-unit id="2579611bfcccd75bcd41fac90150d27d6ebb30b8" datatype="html">
|
||||
<source>
|
||||
<x id="START_TAG_SPAN" ctype="x-span"/><x id="ICU"/><x id="CLOSE_TAG_SPAN" ctype="x-span"/>
|
||||
</source>
|
||||
<target/>
|
||||
</trans-unit>
|
||||
<trans-unit id="6e22e74e8cbd3095560cfe08993c4fdfa3c50eb0" datatype="html">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Upgrade</title>
|
||||
<title>Angular Upgrade</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
// #docregion
|
||||
|
||||
angular.
|
||||
module('core').
|
||||
filter('checkmark', function() {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// #docregion
|
||||
'use strict';
|
||||
|
||||
// Define the `phonecatApp` Angular 1 module
|
||||
// Define the `phonecatApp` AngularJS module
|
||||
angular.module('phonecatApp', [
|
||||
'ngAnimate',
|
||||
'ngRoute',
|
||||
|
|
|
|||
|
|
@ -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},
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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},
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 <live-example name="cb-a1-a2-quick-reference"></live-example>**.
|
||||
**See the Angular syntax in this <live-example name="cb-ajs-quick-reference"></live-example>**.
|
||||
|
||||
## Contents
|
||||
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="." )
|
||||
<br>
|
||||
+makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." )
|
||||
+makeExample('cb-ajs-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." )
|
||||
|
||||
:marked
|
||||
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.
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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_
|
||||
<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular 2 template for Visual Studio 2015</a>.
|
||||
<a href="http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/" target="_blank">ASP.NET Core + Angular template for Visual Studio 2015</a>.
|
||||
Note that the resulting code does not map to the docs. Adjust accordingly.
|
||||
|
||||
: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)**
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 12 KiB |
|
|
@ -8,7 +8,7 @@ import {Component, View, bootstrap} from 'angular2/angular2';
|
|||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My first Angular App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ class AppComponent {
|
|||
|
||||
bootstrap(AppComponent);
|
||||
// #docregion twoparts
|
||||
// final comment
|
||||
// final comment
|
||||
// #enddocregion twoparts
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ import {Component, View, bootstrap} from 'angular2/angular2';
|
|||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My first Angular App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
// #docregion bootstrap
|
||||
bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {Component, View, bootstrap} from 'angular2/angular2';
|
|||
selector: 'my-app'
|
||||
})
|
||||
@View({
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular App</h1>'
|
||||
})
|
||||
// #docregion class
|
||||
class AppComponent {
|
||||
|
|
@ -19,4 +19,4 @@ class AppComponent {
|
|||
// #docregion bootstrap
|
||||
bootstrap(AppComponent);
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
// #enddocregion
|
||||
|
|
|
|||
Loading…
Reference in New Issue