chore: rename Angular 2 to simply Angular (#2402)

This commit is contained in:
Jesús Rodríguez 2016-09-20 05:24:40 +02:00 committed by Ward Bell
parent 730c93b5bd
commit 693f6ae462
104 changed files with 202 additions and 202 deletions

View File

@ -1,7 +1,7 @@
# Angular.io # Angular.io
[![Build Status][travis-badge]][travis-badge-url] [![Build Status][travis-badge]][travis-badge-url]
Angular.io is site for Angular 2 **documentation** . Angular.io is site for Angular **documentation** .
This site also includes links to other helpful angular resources including This site also includes links to other helpful angular resources including
Angular 2, Angular 1, Angular Material, and AngularFire. Angular 2, Angular 1, Angular Material, and AngularFire.
@ -77,7 +77,7 @@ Such code resides in the `public/docs/_examples` directory, under page-specific
For example, the TypeScript QuickStart sample is in `public/docs/_examples/quickstart/ts`. For example, the TypeScript QuickStart sample is in `public/docs/_examples/quickstart/ts`.
All samples are in a consistent directory structure using the same styles and the same npm packages, including the latest release of Angular 2. All samples are in a consistent directory structure using the same styles and the same npm packages, including the latest release of Angular.
This consistency is possible in part thanks to gulp-driven tooling. This consistency is possible in part thanks to gulp-driven tooling.
To run the samples locally and confirm that they work properly, To run the samples locally and confirm that they work properly,
take the following extra steps to prepare the environment: take the following extra steps to prepare the environment:

View File

@ -461,7 +461,7 @@ gulp.task('_copy-example-boilerplate', function (done) {
return argv.fast ? done() : buildStyles(copyExampleBoilerplate, done); return argv.fast ? done() : buildStyles(copyExampleBoilerplate, done);
}); });
//Builds Angular 2 Docs CSS file from Bootstrap npm LESS source //Builds Angular Docs CSS file from Bootstrap npm LESS source
//and copies the result to the _examples folder to be included as //and copies the result to the _examples folder to be included as
//part of the example boilerplate. //part of the example boilerplate.
function buildStyles(cb, done){ function buildStyles(cb, done){

View File

@ -85,7 +85,7 @@
"picture": "/resources/images/bios/tobias.jpg", "picture": "/resources/images/bios/tobias.jpg",
"twitter": "tbosch1009", "twitter": "tbosch1009",
"website": "https://plus.google.com/+TobiasBosch", "website": "https://plus.google.com/+TobiasBosch",
"bio": "Tobias Bosch is a software engineer at Google. He is part of the Angular core team and works on Angular 2.", "bio": "Tobias Bosch is a software engineer at Google. He is part of the Angular core team and works on Angular.",
"type": "Google" "type": "Google"
}, },
@ -184,7 +184,7 @@
"picture": "/resources/images/bios/hansl.jpg", "picture": "/resources/images/bios/hansl.jpg",
"twitter": "hanslatwork", "twitter": "hanslatwork",
"website": "http://www.codingatwork.com/", "website": "http://www.codingatwork.com/",
"bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular2, using Material Design components and the CLI tool.", "bio": "Hans is a software engineer at Google on the Angular team and was previously at Slack. He works everyday to help make it easier for everyone to create beautiful, consistent web applications using Angular, using Material Design components and the CLI tool.",
"type": "Google" "type": "Google"
}, },
@ -360,7 +360,7 @@
"picture": "/resources/images/bios/marclaval.jpg", "picture": "/resources/images/bios/marclaval.jpg",
"twitter": "marclaval", "twitter": "marclaval",
"website": "https://github.com/mlaval", "website": "https://github.com/mlaval",
"bio": "Marc is a manager at Amadeus where he leads the team in charge of developing and recommending UI frameworks for the company. He is also an open source developer and a contributor to Angular 2.", "bio": "Marc is a manager at Amadeus where he leads the team in charge of developing and recommending UI frameworks for the company. He is also an open source developer and a contributor to Angular.",
"type": "Community" "type": "Community"
}, },
@ -378,7 +378,7 @@
"picture": "/resources/images/bios/patrick-stapleton.jpg", "picture": "/resources/images/bios/patrick-stapleton.jpg",
"twitter": "gdi2290", "twitter": "gdi2290",
"website": "https://angularclass.com", "website": "https://angularclass.com",
"bio": "Also know as PatrickJS where JS stands for his middle and last names. Patrick is very active in Open-Source with over 4,300+ contributions in the last year alone on projects such as Angular2, AngularJS, FalcorJS, Docker, Bootstrap, gulp, and redis to name a few. He is also working on the development of Angular 2 server-side rendering as Universal Angular 2 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 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.",
"type": "Community" "type": "Community"
}, },

View File

@ -2,7 +2,7 @@
"name": "angular.io", "name": "angular.io",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"description": "Angular 2 documentation", "description": "Angular documentation",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",

View File

@ -17,7 +17,7 @@ else
h3.text-headline RESOURCES h3.text-headline RESOURCES
ul.text-body ul.text-body
// TODO: (ericjim) make a libraries page to showcase all angular 2 libraries // TODO: (ericjim) make a libraries page to showcase all angular libraries
//li <a href="/libraries.html">Libraries</a> //li <a href="/libraries.html">Libraries</a>
li <a href="/about/">About</a> li <a href="/about/">About</a>
li <a href="/resources/">Books & Training</a> li <a href="/resources/">Books & Training</a>

View File

@ -12,7 +12,7 @@ if title == "Angular"
else if language else if language
title #{title} - #{language} title #{title} - #{language}
else else
title #{title} - Angular 2 title #{title} - Angular
meta(charset="utf-8") meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge") meta(http-equiv="X-UA-Compatible" content="IE=edge")
@ -22,14 +22,14 @@ meta(name="robots" content="all")
meta(name="referrer" content="origin") meta(name="referrer" content="origin")
meta(name="viewport" id="viewport" content="width=device-width, initial-scale=1") meta(name="viewport" id="viewport" content="width=device-width, initial-scale=1")
meta(property="og:title" content="Angular 2") meta(property="og:title" content="Angular")
meta(property="og:image" content="/resources/images/logos/standard/shield-large.png") meta(property="og:image" content="/resources/images/logos/standard/shield-large.png")
meta(property="og:image:type" content="image/png") meta(property="og:image:type" content="image/png")
meta(property="og:image:width" content="184") meta(property="og:image:width" content="184")
meta(property="og:image:height" content="200") meta(property="og:image:height" content="200")
meta(property="og:description" content="#{description}") meta(property="og:description" content="#{description}")
meta(itemprop="name" content="Angular 2") meta(itemprop="name" content="Angular")
meta(itemprop="description" content="#{description}") meta(itemprop="description" content="#{description}")
meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png") meta(itemprop="image" content="https://angular.io/resources/images/logos/standard/shield-large.png")
@ -57,4 +57,4 @@ link(rel="stylesheet" href="/resources/css/main.css")
<link rel="icon" type="image/png" href="/resources/images/favicons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/resources/images/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/resources/images/favicons/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/resources/images/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/resources/images/favicons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/resources/images/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/resources/images/favicons/manifest.json"> <link rel="manifest" href="/resources/images/favicons/manifest.json">

View File

@ -44,20 +44,20 @@ mixin tree(directory, urlPrefix, name, latest)
//- BUTTON TITLE GENERATION //- BUTTON TITLE GENERATION
if language == 'ts' if language == 'ts'
if version == "latest" if version == "latest"
- var title = 'Angular 2 for TypeScript' - var title = 'Angular for TypeScript'
else else
- var title = 'Angular ' + version + ' for TypeScript' - var title = 'Angular ' + version + ' for TypeScript'
if language == 'js' if language == 'js'
if version == "latest" if version == "latest"
- var title = 'Angular 2 for JavaScript' - var title = 'Angular for JavaScript'
else else
- var title = 'Angular ' + version + ' for JavaScript' - var title = 'Angular ' + version + ' for JavaScript'
if language == 'dart' if language == 'dart'
if version == "latest" if version == "latest"
- var title = 'Angular 2 for Dart' - var title = 'Angular for Dart'
else else
- var title = 'Angular ' + version + ' for Dart' - var title = 'Angular ' + version + ' for Dart'
@ -69,8 +69,8 @@ nav.dropdown
<!-- DROPDOWN MENU --> <!-- DROPDOWN MENU -->
ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''") ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript") mixin tree(public.docs.ts, "/docs/ts", "Angular for TypeScript")
mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript") mixin tree(public.docs.js, "/docs/js", "Angular for JavaScript")
//- Disable cross-language link for API entry pages (but keep for top API search page): //- Disable cross-language link for API entry pages (but keep for top API search page):
if ! (current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]) if ! (current.path[3] === 'api' && public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]])
mixin tree(public.docs.dart, "/docs/dart", "Angular 2 for Dart") mixin tree(public.docs.dart, "/docs/dart", "Angular for Dart")

View File

@ -3,11 +3,11 @@
p We'd love for you to contribute to our source code and to make Angular projects even better. p We'd love for you to contribute to our source code and to make Angular projects even better.
.l-sub-section .l-sub-section
h3 Angular 2 h3 Angular
p Angular 2 is a next generation mobile and desktop application development platform. p Angular is a next generation mobile and desktop application development platform.
a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular 2 a(href="https://github.com/angular/angular/blob/master/CONTRIBUTING.md" class="button" md-button) Contribute to Angular
.l-sub-section .l-sub-section
h3 Angular for JavaScript or Dart h3 Angular for JavaScript or Dart

View File

@ -26,7 +26,7 @@ exports.config = {
// Framework to use. Jasmine is recommended. // Framework to use. Jasmine is recommended.
framework: 'jasmine', framework: 'jasmine',
// For angular2 tests // For angular tests
useAllAngular2AppRoots: true, useAllAngular2AppRoots: true,
// Base URL for application server // Base URL for application server

View File

@ -4,7 +4,7 @@
* The tests here basically just checking that the end styles * The tests here basically just checking that the end styles
* of each animation are in effect. * of each animation are in effect.
* *
* Relies on the Angular 2 testability only becoming stable once * Relies on the Angular testability only becoming stable once
* animation(s) have finished. * animation(s) have finished.
* *
* Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations * Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations

View File

@ -1,5 +1,5 @@
{ {
"description": "Angular 2 Animations", "description": "Angular Animations",
"files":[ "files":[
"!**/*.d.ts", "!**/*.d.ts",
"!**/*.js" "!**/*.js"

View File

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

View File

@ -10,7 +10,7 @@ class Hero {
describe('Architecture', () => { describe('Architecture', () => {
const expectedTitle = 'Architecture of Angular 2'; const expectedTitle = 'Architecture of Angular';
const expectedH2 = ['Hero List', 'Sales Tax Calculator']; const expectedH2 = ['Hero List', 'Sales Tax Calculator'];
beforeAll(() => browser.get('')); beforeAll(() => browser.get(''));

View File

@ -13,7 +13,7 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: 'Welcome to Angular 2' template: 'Welcome to Angular'
}) })
export class AppComponent { export class AppComponent {
constructor(logger: Logger) { constructor(logger: Logger) {

View File

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

View File

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

View File

@ -1,5 +1,5 @@
{ {
"description": "Intro to Angular2", "description": "Intro to Angular",
"files":[ "files":[
"!**/*.d.ts", "!**/*.d.ts",
"!**/*.js", "!**/*.js",

View File

@ -9,7 +9,7 @@ describe('AOT Compilation', function () {
it('should load page and click button', function (done) { it('should load page and click button', function (done) {
let headingSelector = element.all(by.css('h1')).get(0); let headingSelector = element.all(by.css('h1')).get(0);
expect(headingSelector.getText()).toEqual('My First Angular 2 App'); expect(headingSelector.getText()).toEqual('My First Angular App');
expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true); expect(element.all(by.xpath('//div[text()="Magneta"]')).get(0).isPresent()).toBe(true);
expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true); expect(element.all(by.xpath('//div[text()="Bombasto"]')).get(0).isPresent()).toBe(true);

View File

@ -1,6 +1,6 @@
<!-- #docregion --> <!-- #docregion -->
<button (click)="toggleHeading()">Toggle Heading</button> <button (click)="toggleHeading()">Toggle Heading</button>
<h1 *ngIf="showHeading">My First Angular 2 App</h1> <h1 *ngIf="showHeading">My First Angular App</h1>
<h3>List of Heroes</h3> <h3>List of Heroes</h3>
<div *ngFor="let hero of heroes">{{hero}}</div> <div *ngFor="let hero of heroes">{{hero}}</div>

View File

@ -1,5 +1,5 @@
{ {
"description": "Set The Document Title In Angular 2", "description": "Set The Document Title In Angular",
"files": [ "files": [
"!**/*.d.ts", "!**/*.d.ts",
"!**/*.js", "!**/*.js",

View File

@ -7,6 +7,6 @@ describe('cli-quickstart App', () => {
it('should display message saying app works', () => { it('should display message saying app works', () => {
let pageTitle = element(by.css('cli-quickstart-app h1')).getText(); let pageTitle = element(by.css('cli-quickstart-app h1')).getText();
expect(pageTitle).toEqual('My First Angular 2 App'); expect(pageTitle).toEqual('My First Angular App');
}); });
}); });

View File

@ -12,6 +12,6 @@ import { Component } from '@angular/core';
// #enddocregion metadata // #enddocregion metadata
// #docregion title, class // #docregion title, class
export class CliQuickstartAppComponent { export class CliQuickstartAppComponent {
title = 'My First Angular 2 App'; title = 'My First Angular App';
} }
// #enddocregion title, class // #enddocregion title, class

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,2 +1,2 @@
### Angular 2 Documentation Example ### Angular Documentation Example

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
describe('QuickStart E2E Tests', function () { describe('QuickStart E2E Tests', function () {
let expectedMsg = 'My First Angular 2 App'; let expectedMsg = 'My First Angular App';
beforeEach(function () { beforeEach(function () {
browser.get(''); browser.get('');

View File

@ -10,7 +10,7 @@
ng.core.Component({ ng.core.Component({
// #enddocregion ng-namespace-funcs // #enddocregion ng-namespace-funcs
selector: 'my-app', selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>' template: '<h1>My First Angular App</h1>'
// #docregion ng-namespace-funcs // #docregion ng-namespace-funcs
}) })
// #enddocregion component // #enddocregion component

View File

@ -2,7 +2,7 @@
<!-- #docregion --> <!-- #docregion -->
<html> <html>
<head> <head>
<title>Angular 2 QuickStart JS</title> <title>Angular QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -6,7 +6,7 @@ import { Component } from '@angular/core';
// #docregion metadata // #docregion metadata
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>' template: '<h1>My First Angular App</h1>'
}) })
// #enddocregion metadata // #enddocregion metadata
// #docregion class // #docregion class

View File

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

View File

@ -1,5 +1,5 @@
{ {
"name": "angular2-quickstart", "name": "angular-quickstart",
"version": "1.0.0", "version": "1.0.0",
"scripts": { "scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

View File

@ -1,6 +1,6 @@
// #docregion // #docregion
/** /**
* System configuration for Angular 2 samples * System configuration for Angular samples
* Adjust as necessary for your application needs. * Adjust as necessary for your application needs.
*/ */
(function (global) { (function (global) {

View File

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

View File

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

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
describe('Documentation StyleGuide E2E Tests', function() { describe('Documentation StyleGuide E2E Tests', function() {
let expectedMsg = 'My First Angular 2 App'; let expectedMsg = 'My First Angular App';
beforeEach(function () { beforeEach(function () {
browser.get(''); browser.get('');

View File

@ -8,7 +8,7 @@ app.AppComponent =
selector: 'my-app', selector: 'my-app',
// #enddocregion // #enddocregion
// #docregion view // #docregion view
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular App</h1>'
}) })
// #enddocregion // #enddocregion
// #docregion class // #docregion class
@ -48,7 +48,7 @@ app.AppComponent = function AppComponent () {}
app.AppComponent.annotations = [ app.AppComponent.annotations = [
new ng.core.Component({ new ng.core.Component({
selector: 'my-app', selector: 'my-app',
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular App</h1>'
}) })
]; ];
// #enddocregion // #enddocregion

View File

@ -1,7 +1,7 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular App</h1>'
}) })
export class AppComponent { } export class AppComponent { }

View File

@ -1,5 +1,5 @@
/** /**
* System configuration for Angular 2 samples * System configuration for Angular samples
* Adjust as necessary for your application needs. * Adjust as necessary for your application needs.
*/ */
(function (global) { (function (global) {

View File

@ -1,7 +1,7 @@
/** /**
* PLUNKER VERSION FOR CURRENT ANGULAR BUILD * PLUNKER VERSION FOR CURRENT ANGULAR BUILD
* (based on systemjs.config.js in angular.io) * (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples * System configuration for Angular samples
* Adjust as necessary for your application needs. * Adjust as necessary for your application needs.
* *
* UNTESTED ! * UNTESTED !

View File

@ -1,7 +1,7 @@
/** /**
* PLUNKER VERSION * PLUNKER VERSION
* (based on systemjs.config.js in angular.io) * (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples * System configuration for Angular samples
* Adjust as necessary for your application needs. * Adjust as necessary for your application needs.
*/ */
(function (global) { (function (global) {

View File

@ -4,7 +4,7 @@
type WPromise<T> = webdriver.promise.Promise<T>; type WPromise<T> = webdriver.promise.Promise<T>;
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular 2 ${expectedH1}`; const expectedTitle = `Angular ${expectedH1}`;
class Hero { class Hero {
id: number; id: number;

View File

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

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular 2 ${expectedH1}`; const expectedTitle = `Angular ${expectedH1}`;
const expectedH2 = 'My Heroes'; const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' }; const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X'; const nameSuffix = 'X';

View File

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

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular 2 ${expectedH1}`; const expectedTitle = `Angular ${expectedH1}`;
const expectedH2 = 'My Heroes'; const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' }; const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X'; const nameSuffix = 'X';

View File

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

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular 2 ${expectedH1}`; const expectedTitle = `Angular ${expectedH1}`;
const expectedH2 = 'My Heroes'; const expectedH2 = 'My Heroes';
const targetHero = { id: 16, name: 'RubberMan' }; const targetHero = { id: 16, name: 'RubberMan' };
const nameSuffix = 'X'; const nameSuffix = 'X';

View File

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

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular 2 ${expectedH1}`; const expectedTitle = `Angular ${expectedH1}`;
const targetHero = { id: 15, name: 'Magneta' }; const targetHero = { id: 15, name: 'Magneta' };
const targetHeroDashboardIndex = 3; const targetHeroDashboardIndex = 3;
const nameSuffix = 'X'; const nameSuffix = 'X';

View File

@ -5,7 +5,7 @@
<head> <head>
<base href="/"> <base href="/">
<!-- #enddocregion base-href --> <!-- #enddocregion base-href -->
<title>Angular 2 Tour of Heroes</title> <title>Angular Tour of Heroes</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
const expectedH1 = 'Tour of Heroes'; const expectedH1 = 'Tour of Heroes';
const expectedTitle = `Angular 2 ${expectedH1}`; const expectedTitle = `Angular ${expectedH1}`;
const targetHero = { id: 15, name: 'Magneta' }; const targetHero = { id: 15, name: 'Magneta' };
const targetHeroDashboardIndex = 3; const targetHeroDashboardIndex = 3;
const nameSuffix = 'X'; const nameSuffix = 'X';

View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<base href="/"> <base href="/">
<title>Angular 2 Tour of Heroes</title> <title>Angular Tour of Heroes</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">

View File

@ -2,7 +2,7 @@
'use strict'; 'use strict';
describe('QuickStart E2E Tests', function () { describe('QuickStart E2E Tests', function () {
let expectedMsg = 'Hello from Angular 2 App with Webpack'; let expectedMsg = 'Hello from Angular App with Webpack';
beforeEach(function () { beforeEach(function () {
browser.get(''); browser.get('');

View File

@ -1,7 +1,7 @@
{ {
"name": "angular2-webpack", "name": "angular2-webpack",
"version": "1.0.0", "version": "1.0.0",
"description": "A webpack starter for angular 2", "description": "A webpack starter for Angular",
"scripts": { "scripts": {
"start": "webpack-dev-server --inline --progress --port 8080", "start": "webpack-dev-server --inline --progress --port 8080",
"test": "karma start", "test": "karma start",

View File

@ -1,6 +1,6 @@
<!-- #docregion --> <!-- #docregion -->
<main> <main>
<h1>Hello from Angular 2 App with Webpack</h1> <h1>Hello from Angular App with Webpack</h1>
<img src="../../public/images/angular.png"> <img src="../../public/images/angular.png">
</main> </main>

View File

@ -1,5 +1,5 @@
// #docregion // #docregion
// Angular 2 // Angular
import '@angular/platform-browser'; import '@angular/platform-browser';
import '@angular/platform-browser-dynamic'; import '@angular/platform-browser-dynamic';
import '@angular/core'; import '@angular/core';

View File

@ -116,7 +116,7 @@ include ../../../_includes/_util-fns
selector: 'my-app', selector: 'my-app',
// #enddocregion component // #enddocregion component
// #docregion view // #docregion view
template: '<h1 id="output">My First Angular 2 App</h1>' template: '<h1 id="output">My First Angular App</h1>'
}) })
// #enddocregion view // #enddocregion view
// #docregion class // #docregion class
@ -143,7 +143,7 @@ include ../../../_includes/_util-fns
// #enddocregion twoparts, import // #enddocregion twoparts, import
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
template: '<h1 id="output">My first Angular 2 App</h1>' template: '<h1 id="output">My first Angular App</h1>'
}) })
class AppComponent { class AppComponent {
} }

View File

@ -6,7 +6,7 @@ block includes
- var _at_angular = 'angular2' - var _at_angular = 'angular2'
:marked :marked
Angular 2 is a framework to help us build client applications in HTML and Angular is a framework to help us build client applications in HTML and
either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript. either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.
block angular-parts block angular-parts

View File

@ -89,7 +89,7 @@ figure.image-display
:marked :marked
## Setup ## Setup
Create a new project folder (`angular2_forms`) and create 3 files: Create a new project folder (`angular_forms`) and create 3 files:
`pubspec.yaml`, `web/index.html`, and `web/main.dart`. `pubspec.yaml`, `web/index.html`, and `web/main.dart`.
(These files should be familiar from the (These files should be familiar from the
[QuickStart](../quickstart.html).) Put these contents in the files: [QuickStart](../quickstart.html).) Put these contents in the files:
@ -160,7 +160,7 @@ figure.image-display
Theres nothing special about this component, nothing form-specific, Theres nothing special about this component, nothing form-specific,
nothing to distinguish it from any component we've written before. nothing to distinguish it from any component we've written before.
Understanding this component requires only the Angular 2 concepts covered in previous chapters. Understanding this component requires only the Angular concepts covered in previous chapters.
1. The code imports a standard set of symbols from the Angular library. 1. The code imports a standard set of symbols from the Angular library.
@ -629,7 +629,7 @@ figure.image-display
:marked :marked
## Conclusion ## Conclusion
The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation, and more: The Angular form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation, and more:
- An Angular HTML form template. - An Angular HTML form template.
- A form component class with a `Component` decorator. - A form component class with a `Component` decorator.

View File

@ -17,7 +17,7 @@ block http-providers
Actually, it is unnecessary to include `BrowserClient` in the list of providers. Actually, it is unnecessary to include `BrowserClient` in the list of providers.
***But*** as is mentioned in the *Angular 2 Dart Transformer* [wiki page][ng2dtri], ***But*** as is mentioned in the *Angular 2 Dart Transformer* [wiki page][ng2dtri],
the template compiler _generates_ dependency injection code, hence all the the template compiler _generates_ dependency injection code, hence all the
identifiers used in DI have to be collected by the Angular 2 transformer identifiers used in DI have to be collected by the Angular transformer
so that the libraries containing these identifiers can be transformed. so that the libraries containing these identifiers can be transformed.
Unless special steps are taken, Dart libraries like `http` Unless special steps are taken, Dart libraries like `http`

View File

@ -82,7 +82,7 @@ block dart-no-truthy-falsey
the value `true`; all other values are `false`. the value `true`; all other values are `false`.
TypeScript and JavaScript, on the other hand, treat TypeScript and JavaScript, on the other hand, treat
many values (including non-null objects) as true. many values (including non-null objects) as true.
A TypeScript Angular 2 program, for example, often has code like A TypeScript Angular program, for example, often has code like
`*ngIf="currentHero"` where a Dart program has code like `*ngIf="currentHero"` where a Dart program has code like
`*ngIf="currentHero != null"`. `*ngIf="currentHero != null"`.
@ -109,7 +109,7 @@ block dart-safe-nav-op
:marked :marked
The safe navigation operator (`?.`) is part of the Dart language. The safe navigation operator (`?.`) is part of the Dart language.
It's considered a template expression operator because It's considered a template expression operator because
Angular 2 supports `?.` even in TypeScript and JavaScript apps. Angular supports `?.` even in TypeScript and JavaScript apps.
block json-pipe block json-pipe
//- TODO: explain alternative in Dart //- TODO: explain alternative in Dart

View File

@ -2,11 +2,11 @@
.l-sub-section .l-sub-section
h3 TypeScript h3 TypeScript
p: <a href="/docs/ts/latest">Angular 2 TS - Latest Version</a> p: <a href="/docs/ts/latest">Angular TS - Latest Version</a>
h3 JavaScript h3 JavaScript
p <a href="/docs/js/latest">Angular 2 JS - Latest Version</a> p <a href="/docs/js/latest">Angular JS - Latest Version</a>
h3 Dart h3 Dart

View File

@ -1,15 +1,15 @@
include ../../../../_includes/_util-fns include ../../../../_includes/_util-fns
:marked :marked
Everything that we can do in Angular 2 in TypeScript, we can also do Everything that we can do in Angular in TypeScript, we can also do
in JavaScript. Translating from one language to the other is mostly a in JavaScript. Translating from one language to the other is mostly a
matter of changing the way we organize our code and the way we access matter of changing the way we organize our code and the way we access
Angular 2 APIs. Angular APIs.
Since TypeScript is a popular language option in Angular 2, many of the Since TypeScript is a popular language option in Angular, many of the
code examples you see on the Internet as well as on this site are written code examples you see on the Internet as well as on this site are written
in TypeScript. This cookbook contains recipes for translating these kinds of in TypeScript. This cookbook contains recipes for translating these kinds of
code examples to ES5, so that they can be applied to Angular 2 JavaScript code examples to ES5, so that they can be applied to Angular JavaScript
applications. applications.
<a id="toc"></a> <a id="toc"></a>
@ -44,19 +44,19 @@ table(width="100%")
tr(style=top) tr(style=top)
td td
:marked :marked
### Importing Angular 2 Code ### Importing Angular Code
In TypeScript code, Angular 2 classes, functions, and other members In TypeScript code, Angular classes, functions, and other members
are imported with TypeScript `import` statements: are imported with TypeScript `import` statements:
+makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." ) +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )
td td
:marked :marked
### Accessing Angular 2 Code through the ng global ### Accessing Angular Code through the ng global
In JavaScript code, when using In JavaScript code, when using
[the Angular 2 packages](../glossary.html#!#scoped-package), [the Angular packages](../glossary.html#!#scoped-package),
we can access Angular code through the global `ng` object. In the we can access Angular code through the global `ng` object. In the
nested members of this object we'll find everything we would import nested members of this object we'll find everything we would import
from `@angular` in TypeScript: from `@angular` in TypeScript:
@ -68,7 +68,7 @@ table(width="100%")
:marked :marked
### Importing and Exporting Application Code ### Importing and Exporting Application Code
Each file in an Angular 2 TypeScript application constitutes a Each file in an Angular TypeScript application constitutes a
TypeScript module. When we want to make something from a module available TypeScript module. When we want to make something from a module available
to other modules, we `export` it. to other modules, we `export` it.
@ -84,7 +84,7 @@ table(width="100%")
:marked :marked
### Sharing Application Code ### Sharing Application Code
In an Angular 2 JavaScript application, we load each file to the page In an Angular JavaScript application, we load each file to the page
using a `<script>` tag. Each file can make things available to other using a `<script>` tag. Each file can make things available to other
files via the shared global `window` scope. files via the shared global `window` scope.
@ -112,8 +112,8 @@ table(width="100%")
.alert.is-helpful .alert.is-helpful
:marked :marked
Alternatively, we can use a module loader such as Webpack or Alternatively, we can use a module loader such as Webpack or
Browserify in an Angular 2 JavaScript project. In such a project, we would Browserify in an Angular JavaScript project. In such a project, we would
use CommonJS modules and the `require` function to load Angular 2 framework code. use CommonJS modules and the `require` function to load Angular framework code.
We would then use `module.exports` and `require` to export and import application We would then use `module.exports` and `require` to export and import application
code. code.
@ -135,7 +135,7 @@ table(width="100%")
:marked :marked
### Classes ### Classes
We put most of our Angular 2 TypeScript code into TypeScript classes. We put most of our Angular TypeScript code into TypeScript classes.
+makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'class')(format="." ) +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'class')(format="." )
@ -144,7 +144,7 @@ table(width="100%")
### Constructors and Prototypes ### Constructors and Prototypes
ES5 JavaScript has no classes. We use the constructor ES5 JavaScript has no classes. We use the constructor
pattern instead which works with Angular 2 as well as classes do. pattern instead which works with Angular as well as classes do.
+makeExample('cb-ts-to-js/js/app/hero.component.js', 'constructorproto')(format="." ) +makeExample('cb-ts-to-js/js/app/hero.component.js', 'constructorproto')(format="." )
@ -153,7 +153,7 @@ table(width="100%")
:marked :marked
### Metadata with Decorators ### Metadata with Decorators
Most Angular 2 classes have one or more TypeScript *decorators* Most Angular classes have one or more TypeScript *decorators*
attached to provide configuration and metadata. For example, attached to provide configuration and metadata. For example,
a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator. a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator.
@ -225,7 +225,7 @@ table(width="100%")
### Implementing Methods without Interfaces ### Implementing Methods without Interfaces
TypeScript interfaces are purely for developer convenience TypeScript interfaces are purely for developer convenience
and are not used by Angular 2 at runtime. This means that in JavaScript and are not used by Angular at runtime. This means that in JavaScript
code we don't need to substitute anything for interfaces. We can just code we don't need to substitute anything for interfaces. We can just
implement the methods. implement the methods.
@ -294,7 +294,7 @@ table(width="100%")
:marked :marked
### Injection by Type ### Injection by Type
Angular 2 can often use TypeScript type information to Angular can often use TypeScript type information to
determine what needs to be injected. determine what needs to be injected.
+makeExample('cb-ts-to-js/ts/app/hero-di.component.ts')(format="." ) +makeExample('cb-ts-to-js/ts/app/hero-di.component.ts')(format="." )
@ -418,7 +418,7 @@ table(width="100%")
The `host` value is an object whose properties are host property and listener bindings: The `host` value is an object whose properties are host property and listener bindings:
* Each key follows regular Angular 2 binding syntax: `[property]` for host bindings * Each key follows regular Angular binding syntax: `[property]` for host bindings
or `(event)` for host listeners. or `(event)` for host listeners.
* Each value identifies the corresponding component property or method. * Each value identifies the corresponding component property or method.

View File

@ -101,7 +101,7 @@ figure.image-display
:marked :marked
## Setup ## Setup
Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html). Create a new project folder (`angular-forms`) and follow the steps in the [QuickStart](../quickstart.html).
## Create the Hero Model Class ## Create the Hero Model Class
@ -146,7 +146,7 @@ code-example(format="").
:marked :marked
Theres nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before. Theres nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
Understanding this component requires only the Angular 2 concepts weve learned in previous chapters Understanding this component requires only the Angular concepts weve learned in previous chapters
1. We use the `ng.core` object from the Angular library as we usually do. 1. We use the `ng.core` object from the Angular library as we usually do.
@ -601,7 +601,7 @@ figure.image-display
:marked :marked
## Conclusion ## Conclusion
The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation and more: The Angular form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation and more:
- An Angular HTML form template. - An Angular HTML form template.
- A form component class with a `Component` decorator. - A form component class with a `Component` decorator.
@ -614,7 +614,7 @@ figure.image-display
Our final project folder structure should look like this: Our final project folder structure should look like this:
.filetree .filetree
.file angular2-forms .file angular-forms
.children .children
.file app .file app
.children .children

View File

@ -1,12 +1,12 @@
include _util-fns include _util-fns
:marked :marked
Let's start from zero and build a super simple Angular 2 application in JavaScript. Let's start from zero and build a super simple Angular application in JavaScript.
.callout.is-helpful .callout.is-helpful
header Don't want JavaScript? header Don't want JavaScript?
:marked :marked
Although we're getting started in JavaScript, you can also write Angular 2 apps Although we're getting started in JavaScript, you can also write Angular apps
in TypeScript and Dart by selecting either of those languages from the combo-box in the banner. in TypeScript and Dart by selecting either of those languages from the combo-box in the banner.
.l-main-section .l-main-section
@ -14,7 +14,7 @@ include _util-fns
## See It Run! ## See It Run!
Running the <live-example></live-example> Running the <live-example></live-example>
is the quickest way to see an Angular 2 app come to life. is the quickest way to see an Angular app come to life.
Clicking that link fires up a browser, loads the sample in [plunker](http://plnkr.co/ "Plunker"), Clicking that link fires up a browser, loads the sample in [plunker](http://plnkr.co/ "Plunker"),
and displays a simple message: and displays a simple message:
@ -24,7 +24,7 @@ figure.image-display
:marked :marked
Here is the file structure: Here is the file structure:
.filetree .filetree
.file angular2-quickstart .file angular-quickstart
.children .children
.file app .file app
.children .children
@ -65,8 +65,8 @@ figure.image-display
### Create a new project folder ### Create a new project folder
code-example(format=""). code-example(format="").
mkdir angular2-quickstart mkdir angular-quickstart
cd angular2-quickstart cd angular-quickstart
:marked :marked
### Add the libraries we need ### Add the libraries we need
@ -208,7 +208,7 @@ code-example(format="").
:marked :marked
The `template` property holds the component's companion template. The `template` property holds the component's companion template.
A template is a form of HTML that tells Angular how to render a view. A template is a form of HTML that tells Angular how to render a view.
Our template is a single line of HTML announcing "My First Angular 2 App". Our template is a single line of HTML announcing "My First Angular App".
Now we need something to tell Angular to load this component. Now we need something to tell Angular to load this component.
@ -311,7 +311,7 @@ figure.image-display
:marked :marked
### Make some changes ### Make some changes
Try changing the message to "My SECOND Angular 2 app". Try changing the message to "My SECOND Angular app".
`lite-server` is watching, so it should detect the change, `lite-server` is watching, so it should detect the change,
refresh the browser, and display the revised message. refresh the browser, and display the revised message.
@ -325,7 +325,7 @@ figure.image-display
## Final structure ## Final structure
Our final project folder structure looks like this: Our final project folder structure looks like this:
.filetree .filetree
.file angular2-quickstart .file angular-quickstart
.children .children
.file node_modules .file node_modules
.file app .file app
@ -357,7 +357,7 @@ figure.image-display
.l-main-section .l-main-section
:marked :marked
## Wrap Up ## Wrap Up
Our first application doesn't do much. It's basically "Hello, World" for Angular 2. Our first application doesn't do much. It's basically "Hello, World" for Angular.
We kept it simple in our first pass: we wrote a little Angular component, We kept it simple in our first pass: we wrote a little Angular component,
we added some JavaScript libraries to `index.html`, and launched with a we added some JavaScript libraries to `index.html`, and launched with a
@ -371,7 +371,7 @@ figure.image-display
we'll likely open `index.html` only if we need to add a library or some css stylesheets. we'll likely open `index.html` only if we need to add a library or some css stylesheets.
We're about to take the next step and build a small application that We're about to take the next step and build a small application that
demonstrates the great things we can build with Angular 2. demonstrates the great things we can build with Angular.
Join us on the [Tour of Heroes Tutorial](./tutorial)! Join us on the [Tour of Heroes Tutorial](./tutorial)!
@ -399,7 +399,7 @@ figure.image-display
Most applications need those capabilities and most applications Most applications need those capabilities and most applications
should run in Internet Explorer. should run in Internet Explorer.
Next are the polyfills for Angular2, `zone.js` and `Reflect.js`, Next are the polyfills for Angular, `zone.js` and `Reflect.js`,
followed by the Reactive Extensions RxJS library. followed by the Reactive Extensions RxJS library.
.l-sub-section .l-sub-section
:marked :marked
@ -408,7 +408,7 @@ figure.image-display
when working with observables. when working with observables.
We added the library here in QuickStart so we don't forget later. We added the library here in QuickStart so we don't forget later.
:marked :marked
Finally, we loaded the web development version of Angular 2 itself. Finally, we loaded the web development version of Angular itself.
We'll make different choices as we gain experience and We'll make different choices as we gain experience and
become more concerned about production qualities such as become more concerned about production qualities such as

View File

@ -29,7 +29,7 @@ include ../_util-fns
with a suitable package loader such as `systemjs` or `webpack`. with a suitable package loader such as `systemjs` or `webpack`.
Learn why [below](#why-default). Learn why [below](#why-default).
The Angular 2 CLI uses these technologies and defaults to the The Angular CLI uses these technologies and defaults to the
*component-relative path* approach described here. *component-relative path* approach described here.
CLI users can skip this chapter or read on to understand CLI users can skip this chapter or read on to understand
how it works. how it works.

View File

@ -2,11 +2,11 @@ include ../_util-fns
// #docregion cookbook // #docregion cookbook
:marked :marked
# Angular 2 Cookbook # Angular Cookbook
The *Cookbook* offers answers to common implementation questions. The *Cookbook* offers answers to common implementation questions.
Each cookbook chapter is a collection of recipes focused on a particular Angular 2 feature or application challenge Each cookbook chapter is a collection of recipes focused on a particular Angular feature or application challenge
such as data binding, cross-component interaction, and communicating with a remote server via HTTP. such as data binding, cross-component interaction, and communicating with a remote server via HTTP.
.l-sub-section .l-sub-section
@ -27,5 +27,5 @@ include ../_util-fns
Post *documentation* issues and pull requests on the Post *documentation* issues and pull requests on the
[angular.io](https://github.com/angular/angular.io) github repository. [angular.io](https://github.com/angular/angular.io) github repository.
Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository. Post issues with *Angular itself* to the [angular](https://github.com/angular/angular) github repository.
// #enddocregion cookbook // #enddocregion cookbook

View File

@ -33,7 +33,7 @@ code-example(format='').
:marked :marked
## Use the *Title* service ## Use the *Title* service
Fortunately, Angular 2 bridges the gap by providing a `Title` service as part of the *Browser platform*. Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
The [Title](../api/platform-browser/index/Title-class.html) service is a simple class that provides an API The [Title](../api/platform-browser/index/Title-class.html) service is a simple class that provides an API
for getting and setting the current HTML document title: for getting and setting the current HTML document title:

View File

@ -5,7 +5,7 @@ include ../_util-fns
Some developers prefer Visual Studio as their Interactive Development Environment (IDE). Some developers prefer Visual Studio as their Interactive Development Environment (IDE).
This cookbook describes the steps required to set up and use the This cookbook describes the steps required to set up and use the
Angular 2 QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project. Angular QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project.
.l-sub-section .l-sub-section
:marked :marked

View File

@ -9,10 +9,10 @@ block includes
- var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>' - var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
:marked :marked
# Angular 2 Glossary # Angular Glossary
Angular 2 has a vocabulary of its own. Angular has a vocabulary of its own.
Most Angular 2 terms are everyday English words Most Angular terms are everyday English words
with a specific meaning within the Angular system. with a specific meaning within the Angular system.
This glossary lists the most prominent terms This glossary lists the most prominent terms
@ -327,7 +327,7 @@ block includes
The latest approved version of JavaScript is The latest approved version of JavaScript is
[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/) [ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)
(AKA "ES2016" or "ES7") and many Angular 2 developers write their applications (AKA "ES2016" or "ES7") and many Angular developers write their applications
either in this version of the language or a dialect that strives to be either in this version of the language or a dialect that strives to be
compatible with it, such as [TypeScript](#typescript). compatible with it, such as [TypeScript](#typescript).
@ -335,7 +335,7 @@ block includes
Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)" Applications written in ES2016, ES2015 or one of their dialects must be "[transpiled](#transpile)"
to ES5 JavaScript. to ES5 JavaScript.
Angular 2 developers may choose to write in ES5 directly. Angular developers may choose to write in ES5 directly.
:marked :marked
## ES2015 ## ES2015
@ -712,7 +712,7 @@ a#snake-case
code completion, refactoring, and intelligent search). Many code editors code completion, refactoring, and intelligent search). Many code editors
and IDEs support TypeScript either natively or with plugins. and IDEs support TypeScript either natively or with plugins.
TypeScript is the preferred language for Angular 2 development although TypeScript is the preferred language for Angular development although
you can use other JavaScript dialects such as [ES5](#es5). you can use other JavaScript dialects such as [ES5](#es5).
Read more about TypeScript at [typescript.org](http://www.typescriptlang.org/). Read more about TypeScript at [typescript.org](http://www.typescriptlang.org/).

View File

@ -4,7 +4,7 @@ block includes
- var _at_angular = '@angular' - var _at_angular = '@angular'
:marked :marked
Angular 2 is a framework for building client applications in HTML and Angular is a framework for building client applications in HTML and
either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript. either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.
block angular-parts block angular-parts
@ -27,7 +27,7 @@ figure
img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700") img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
:marked :marked
The architecture diagram identifies the eight main building blocks of an Angular 2 application: The architecture diagram identifies the eight main building blocks of an Angular application:
* [Modules](#modules) * [Modules](#modules)
* [Components](#components) * [Components](#components)

View File

@ -2,7 +2,7 @@ block includes
include ../_util-fns include ../_util-fns
:marked :marked
Angular 2 applications are styled with regular CSS. That means we can apply Angular applications are styled with regular CSS. That means we can apply
everything we know about CSS stylesheets, selectors, rules, and media queries everything we know about CSS stylesheets, selectors, rules, and media queries
to our Angular applications directly. to our Angular applications directly.
@ -26,7 +26,7 @@ block includes
:marked :marked
## Using Component Styles ## Using Component Styles
For every Angular 2 component we write, we may define not only an HTML template, For every Angular component we write, we may define not only an HTML template,
but also the CSS styles that go with that template, but also the CSS styles that go with that template,
specifying any selectors, rules, and media queries that we need. specifying any selectors, rules, and media queries that we need.

View File

@ -237,7 +237,7 @@ block ctor-syntax
This is important in general, but not to our current story. This is important in general, but not to our current story.
:marked :marked
A service is nothing more than a class in Angular 2. A service is nothing more than a class in Angular.
It remains nothing more than a class until we register it with an Angular injector. It remains nothing more than a class until we register it with an Angular injector.
#bootstrap #bootstrap

View File

@ -85,7 +85,7 @@ figure.image-display
:marked :marked
## Setup ## Setup
Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html). Create a new project folder (`angular-forms`) and follow the steps in the [QuickStart](../quickstart.html).
include ../_quickstart_repo include ../_quickstart_repo
:marked :marked
@ -693,7 +693,7 @@ figure.image-display
Our final project folder structure should look like this: Our final project folder structure should look like this:
.filetree .filetree
.file angular2-forms .file angular-forms
.children .children
.file app .file app
.children .children

View File

@ -153,7 +153,7 @@ figure.image-display
By configuring a provider for the `RestoreService` on the `HeroEditComponent`, we get exactly one new instance of the `RestoreService`per `HeroEditComponent`. By configuring a provider for the `RestoreService` on the `HeroEditComponent`, we get exactly one new instance of the `RestoreService`per `HeroEditComponent`.
Does that mean that services arent singletons anymore in Angular 2? Yes and no. Does that mean that services arent singletons anymore in Angular? Yes and no.
There can be only one instance of a service type in a particular injector. There can be only one instance of a service type in a particular injector.
But we've learned that we can have multiple injectors operating at different levels of the application's component tree. But we've learned that we can have multiple injectors operating at different levels of the application's component tree.
Any of those injectors could have its own instance of the service. Any of those injectors could have its own instance of the service.
@ -166,7 +166,7 @@ figure.image-display
of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`, of that component. We've made the `RestoreService` a kind of "private" singleton for each `HeroEditComponent`,
scoped to that component instance and its child components. scoped to that component instance and its child components.
//- ## Advanced Dependency Injection in Angular 2 //- ## Advanced Dependency Injection in Angular
//- Restrict Dependency Lookups //- Restrict Dependency Lookups
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case //- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
//- .l-main-section //- .l-main-section

View File

@ -64,7 +64,7 @@ table(width="100%")
1. For the big picture, read the [Architecture](architecture.html) overview. 1. For the big picture, read the [Architecture](architecture.html) overview.
1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular 2. 1. Try [QuickStart](../quickstart.html). QuickStart is the "Hello, World" of Angular.
It shows you how to set up the libraries and tools you'll need to write *any* Angular app. It shows you how to set up the libraries and tools you'll need to write *any* Angular app.
1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off, 1. Take the *Tour of Heroes* [tutorial](../tutorial), which picks up where QuickStart leaves off,
@ -118,5 +118,5 @@ block example-links
Use the [angular.io Github repo](https://github.com/angular/angular.io) for **documentation** issues and pull requests. Use the [angular.io Github repo](https://github.com/angular/angular.io) for **documentation** issues and pull requests.
Use the [Angular Github repo](https://github.com/angular/angular) to report issues with **Angular 2** itself. Use the [Angular Github repo](https://github.com/angular/angular) to report issues with **Angular** itself.
// #enddocregion the-rest // #enddocregion the-rest

View File

@ -5,7 +5,7 @@ include ../_util-fns
These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>). These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>).
.l-sub-section .l-sub-section
:marked :marked
Node.js and npm are essential to Angular 2 development. Node.js and npm are essential to Angular development.
<a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm"> <a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
Get them now</a> if they're not already installed on your machine. Get them now</a> if they're not already installed on your machine.

View File

@ -59,7 +59,7 @@ block includes
Learn more about these and many other built-in pipes in the [API Reference](../api/#!?apiFilter=pipe); Learn more about these and many other built-in pipes in the [API Reference](../api/#!?apiFilter=pipe);
filter for entries that include the word "pipe". filter for entries that include the word "pipe".
Angular 2 doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe). Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in an [appendix below](#no-filter-pipe).
.l-main-section .l-main-section
:marked :marked

View File

@ -84,7 +84,7 @@ include ../_util-fns
:marked :marked
### Router imports ### Router imports
The Angular Router is an optional service that presents a particular component view for a given URL. The Angular Router is an optional service that presents a particular component view for a given URL.
It is not part of the Angular 2 core. It is in its own library package, `@angular/router`. It is not part of the Angular core. It is in its own library package, `@angular/router`.
We import what we need from it as we would from any other Angular package. We import what we need from it as we would from any other Angular package.
+makeExcerpt('app/app.routing.ts (import)', 'import-router') +makeExcerpt('app/app.routing.ts (import)', 'import-router')
@ -409,7 +409,7 @@ a#base-href
We begin by importing some symbols from the router library. We begin by importing some symbols from the router library.
The Router is in its own `@angular/router` package. The Router is in its own `@angular/router` package.
It's not part of the Angular 2 core. The router is an optional service because not all applications It's not part of the Angular core. The router is an optional service because not all applications
need routing and, depending on your requirements, you may need a different routing library. need routing and, depending on your requirements, you may need a different routing library.
We teach our router how to navigate by configuring it with routes. We teach our router how to navigate by configuring it with routes.
@ -2275,7 +2275,7 @@ code-example(format=".", language="bash").
It won't be easy to change later once the application is in production It won't be easy to change later once the application is in production
and there are lots of application URL references in the wild. and there are lots of application URL references in the wild.
Almost all Angular 2 projects should use the default HTML 5 style. Almost all Angular projects should use the default HTML 5 style.
It produces URLs that are easier for users to understand. It produces URLs that are easier for users to understand.
And it preserves the option to do **server-side rendering** later. And it preserves the option to do **server-side rendering** later.

View File

@ -6,7 +6,7 @@ include ../_util-fns
introduced in RC5 and will add it to the style guide soon. introduced in RC5 and will add it to the style guide soon.
:marked :marked
Welcome to the Angular 2 Style Guide Welcome to the Angular Style Guide
## Purpose ## Purpose
@ -411,7 +411,7 @@ a(href="#toc") Back to top
.s-why.s-why-last .s-why.s-why-last
:marked :marked
**Why?** The Angular 2 HTML parser is case sensitive and will recognize lower camel case. **Why?** The Angular HTML parser is case sensitive and will recognize lower camel case.
a(href="#toc") Back to top a(href="#toc") Back to top
@ -1696,11 +1696,11 @@ a(href="#toc") Back to top
.s-rule.do .s-rule.do
:marked :marked
**Do** provide services to the Angular 2 injector at the top-most component where they will be shared. **Do** provide services to the Angular injector at the top-most component where they will be shared.
.s-why .s-why
:marked :marked
**Why?** The Angular 2 injector is hierarchical. **Why?** The Angular injector is hierarchical.
.s-why .s-why
:marked :marked
@ -1812,7 +1812,7 @@ a(href="#toc") Back to top
:marked :marked
## Appendix ## Appendix
Useful tools and tips for Angular 2. Useful tools and tips for Angular.
a(href="#toc") Back to top a(href="#toc") Back to top

View File

@ -44,7 +44,7 @@ block includes
HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML: HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
code-example(language="html" escape="html"). code-example(language="html" escape="html").
<h1>My First Angular 2 App</h1> <h1>My First Angular App</h1>
:marked :marked
Almost all HTML syntax is valid template syntax. The `<script>` element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. (In practice, `<script>` is simply ignored.) Almost all HTML syntax is valid template syntax. The `<script>` element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. (In practice, `<script>` is simply ignored.)
@ -387,7 +387,7 @@ table
.callout.is-helpful .callout.is-helpful
header A world without attributes header A world without attributes
:marked :marked
In the world of Angular 2, the only role of attributes is to initialize element and directive state. In the world of Angular, the only role of attributes is to initialize element and directive state.
When we data bind, we're dealing exclusively with element and directive properties and events. When we data bind, we're dealing exclusively with element and directive properties and events.
Attributes effectively disappear. Attributes effectively disappear.
:marked :marked
@ -929,8 +929,8 @@ figure.image-display
The community contributed many more, and countless private directives The community contributed many more, and countless private directives
have been created for internal applications. have been created for internal applications.
We dont need many of those directives in Angular 2. We dont need many of those directives in Angular.
Quite often we can achieve the same results with the more capable and expressive Angular 2 binding system. Quite often we can achieve the same results with the more capable and expressive Angular binding system.
Why create a directive to handle a click when we can write a simple binding such as this? Why create a directive to handle a click when we can write a simple binding such as this?
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
:marked :marked
@ -1239,7 +1239,7 @@ figure.image-display
A **template reference variable** is a reference to a DOM element or directive within a template. A **template reference variable** is a reference to a DOM element or directive within a template.
It can be used with native DOM elements but also with Angular 2 components &mdash; in fact, it will work with any custom web component. It can be used with native DOM elements but also with Angular components &mdash; in fact, it will work with any custom web component.
:marked :marked
### Referencing a template reference variable ### Referencing a template reference variable

View File

@ -26,7 +26,7 @@ a(id="tsconfig")
We created the following `tsconfig.json` for [QuickStart](../quickstart.html): We created the following `tsconfig.json` for [QuickStart](../quickstart.html):
+makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".") +makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
:marked :marked
This file contains options and flags that are essential for Angular 2 applications. This file contains options and flags that are essential for Angular applications.
<a id="noImplicitAny"></a> <a id="noImplicitAny"></a>
### *noImplicitAny* and *suppressImplicitAnyIndexErrors* ### *noImplicitAny* and *suppressImplicitAnyIndexErrors*

View File

@ -6,7 +6,7 @@ include ../_util-fns
and for loading that code from a server into a browser. and for loading that code from a server into a browser.
It's an excellent alternative to the *SystemJS* approach we use throughout the documentation. It's an excellent alternative to the *SystemJS* approach we use throughout the documentation.
In this guide we get a taste of Webpack and how to use it with Angular 2 applications. In this guide we get a taste of Webpack and how to use it with Angular applications.
<a id="top"></a> <a id="top"></a>
## Table of contents ## Table of contents
@ -138,14 +138,14 @@ a(id="configure-webpack")
:marked :marked
## Configure Webpack ## Configure Webpack
After that brief orientation, we are ready to build our own Webpack configuration for Angular 2 apps. After that brief orientation, we are ready to build our own Webpack configuration for Angular apps.
Begin by setting up the development environment. Begin by setting up the development environment.
Create a **new project folder** Create a **new project folder**
code-example(format=""). code-example(format="").
mkdir angular2-webpack mkdir angular-webpack
cd angular2-webpack cd angular-webpack
:marked :marked
Add these files to the root directory: Add these files to the root directory:
@ -167,7 +167,7 @@ code-example(format="").
) )
.l-sub-section .l-sub-section
:marked :marked
Many of these files and much of their content should be familiar from other Angular 2 documentation chapters. Many of these files and much of their content should be familiar from other Angular documentation chapters.
Learn about the `package.json` in the [npm packages](../guide/npm-packages.html) chapter. Learn about the `package.json` in the [npm packages](../guide/npm-packages.html) chapter.
We require packages for Webpack use in addition to the ones listed in that chapter. We require packages for Webpack use in addition to the ones listed in that chapter.
@ -200,8 +200,8 @@ a(id="common-configuration")
:marked :marked
We are splitting our application into three bundles: We are splitting our application into three bundles:
* polyfills - the standard polyfills we require to run Angular 2 applications in most modern browsers. * polyfills - the standard polyfills we require to run Angular applications in most modern browsers.
* vendor - the vendor files we need: Angular 2, lodash, bootstrap.css... * vendor - the vendor files we need: Angular, lodash, bootstrap.css...
* app - our application code. * app - our application code.
.callout.is-critical .callout.is-critical
@ -343,7 +343,7 @@ a(id="production-configuration")
* **ExtractTextPlugin** - extracts embedded css as external files, adding cache-busting hash to the filename. * **ExtractTextPlugin** - extracts embedded css as external files, adding cache-busting hash to the filename.
* **DefinePlugin** - use to define environment variables that we can reference within our application. * **DefinePlugin** - use to define environment variables that we can reference within our application.
Thanks to the *DefinePlugin* and the `ENV` variable defined at top, we can enable Angular 2 production mode like this: Thanks to the *DefinePlugin* and the `ENV` variable defined at top, we can enable Angular production mode like this:
+makeExample('webpack/ts/src/main.ts', 'enable-prod')(format=".") +makeExample('webpack/ts/src/main.ts', 'enable-prod')(format=".")

View File

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

View File

@ -13,7 +13,7 @@ block includes
.callout.is-helpful .callout.is-helpful
header Don't want #{_Lang}? header Don't want #{_Lang}?
p. p.
Although you're getting started in #{_Lang}, you can also write Angular 2 applications Although you're getting started in #{_Lang}, you can also write Angular applications
in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the
left nav to switch development languages for this guide. left nav to switch development languages for this guide.
.l-main-section .l-main-section
@ -81,8 +81,8 @@ h2 Create the project folder
- var _ = _docsFor == 'dart' ? '_' : '-'; - var _ = _docsFor == 'dart' ? '_' : '-';
code-example(language="sh" class="code-shell"). code-example(language="sh" class="code-shell").
mkdir angular2!{_}quickstart mkdir angular!{_}quickstart
cd angular2!{_}quickstart cd angular!{_}quickstart
h2#add-config-files Create #{_package_and_config_files} h2#add-config-files Create #{_package_and_config_files}
block package-and-config-files block package-and-config-files
@ -150,7 +150,7 @@ block install-packages
You should now have the following structure: You should now have the following structure:
.filetree .filetree
.file angular2-quickstart .file angular-quickstart
.children .children
.file node_modules ... .file node_modules ...
.file typings ... .file typings ...
@ -348,7 +348,7 @@ block build-app
.l-main-section#make-changes .l-main-section#make-changes
h1 Step !{step++}: Make some live changes h1 Step !{step++}: Make some live changes
:marked :marked
Try changing the message in `app/app.component.ts` to "My SECOND Angular 2 App". Try changing the message in `app/app.component.ts` to "My SECOND Angular App".
block server-watching block server-watching
:marked :marked
The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript, The TypeScript compiler and `lite-server` will detect your change, recompile the TypeScript into JavaScript,
@ -363,7 +363,7 @@ h1#wrap-up Wrap up and next steps
The final project folder structure looks like this: The final project folder structure looks like this:
block project-file-structure block project-file-structure
.filetree .filetree
.file angular2-quickstart .file angular-quickstart
.children .children
.file app .file app
.children .children
@ -384,7 +384,7 @@ block project-file-structure
.l-main-section .l-main-section
:marked :marked
## What next? ## What next?
This first application doesn't do much. It's basically "Hello, World" for Angular 2. This first application doesn't do much. It's basically "Hello, World" for Angular.
You wrote a little Angular component, created a simple `index.html`, and launched with a You wrote a little Angular component, created a simple `index.html`, and launched with a
static file server. static file server.

View File

@ -7,7 +7,7 @@ include ../_util-fns
Run the <live-example></live-example> for this part. Run the <live-example></live-example> for this part.
Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps Create a folder called `angular-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps
which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes. which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes.
include ../_quickstart_repo include ../_quickstart_repo
@ -15,7 +15,7 @@ include ../_quickstart_repo
We should have the following structure: We should have the following structure:
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children

View File

@ -20,7 +20,7 @@ include ../_util-fns
If not, well need to go back to Part 1 and figure out what we missed. If not, well need to go back to Part 1 and figure out what we missed.
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children

View File

@ -12,7 +12,7 @@ include ../_util-fns
Before we continue with our Tour of Heroes, lets verify we have the following structure. If not, well need to go back and follow the previous chapters. Before we continue with our Tour of Heroes, lets verify we have the following structure. If not, well need to go back and follow the previous chapters.
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children
@ -203,7 +203,7 @@ code-example(format=".")
Lets verify that we have the following structure after all of our good refactoring in this chapter: Lets verify that we have the following structure after all of our good refactoring in this chapter:
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children

View File

@ -24,7 +24,7 @@ include ../_util-fns
If not, well need to go back and follow the previous chapters. If not, well need to go back and follow the previous chapters.
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children
@ -304,7 +304,7 @@ a#child-component
Lets verify that we have the following structure after all of our good refactoring in this chapter: Lets verify that we have the following structure after all of our good refactoring in this chapter:
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children

View File

@ -52,7 +52,7 @@ figure.image-display
block intro-file-tree block intro-file-tree
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children
@ -863,7 +863,7 @@ figure.image-display
block file-tree-end block file-tree-end
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children

View File

@ -536,7 +536,7 @@ figure.image-display
block filetree block filetree
.filetree .filetree
.file angular2-tour-of-heroes .file angular-tour-of-heroes
.children .children
.file app .file app
.children .children

View File

@ -12,7 +12,7 @@
target="_blank" target="_blank"
href="http://angularjs.blogspot.com/2016/09/angular2-final.html" href="http://angularjs.blogspot.com/2016/09/angular2-final.html"
) Angular, version 2: proprioception-reinforcement ) Angular, version 2: proprioception-reinforcement
p Today, at a special meetup at Google HQ, we announced the final release version of Angular 2, the full-platform successor to Angular 1... p Today, at a special meetup at Google HQ, we announced the final release version of Angular, the full-platform successor to Angular 1...
.author .author
img(src="/resources/images/bios/juleskremer.jpg") img(src="/resources/images/bios/juleskremer.jpg")
.posted Posted by <b>Jules Kremer</b> .posted Posted by <b>Jules Kremer</b>

View File

@ -33,7 +33,7 @@
figure figure
img(src="/resources/images/support/github-logo.png" alt="Us" style="width:240px;" ) img(src="/resources/images/support/github-logo.png" alt="Us" style="width:240px;" )
.c8 .c8
p File Angular 2 issues at our <a href="https://github.com/angular/angular/issues" target="_blank">GitHub Repository</a> p File Angular issues at our <a href="https://github.com/angular/angular/issues" target="_blank">GitHub Repository</a>
hr hr

View File

@ -5,10 +5,10 @@ set -e -o pipefail
[[ -z "$NGIO_ENV_DEFS" ]] && . ./scripts/env-set.sh [[ -z "$NGIO_ENV_DEFS" ]] && . ./scripts/env-set.sh
if [[ -e "$NG2_REPO" ]]; then if [[ -e "$NG2_REPO" ]]; then
echo Angular2 repo is already present at: $NG2_REPO echo Angular repo is already present at: $NG2_REPO
else else
travis_fold start install.ng2 travis_fold start install.ng2
echo GETTING Angular2 from GitHub ... echo GETTING Angular from GitHub ...
set -x set -x
git clone https://github.com/angular/angular.git $NG2_REPO git clone https://github.com/angular/angular.git $NG2_REPO
git -C $NG2_REPO checkout $LATEST_RELEASE git -C $NG2_REPO checkout $LATEST_RELEASE

View File

@ -42,7 +42,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
var angular_repo_path = path.resolve(__dirname, '../../../../angular'); var angular_repo_path = path.resolve(__dirname, '../../../../angular');
// confirm that the angular repo is actually there. // confirm that the angular repo is actually there.
if (!fs.existsSync(angular_repo_path)) { if (!fs.existsSync(angular_repo_path)) {
throw new Error('build-api-docs task requires the angular2 repo to be at ' + angular_repo_path); throw new Error('build-api-docs task requires the angular repo to be at ' + angular_repo_path);
} }
readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'modules'); readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'modules');
readTypeScriptModules.ignoreExportsMatching = [/^_/]; readTypeScriptModules.ignoreExportsMatching = [/^_/];

Some files were not shown because too many files have changed in this diff Show More