chore: rename Angular 2 to simply Angular (#2402)
This commit is contained in:
Jesús Rodríguez
Ward Bell
parent
730c93b5bd
commit
693f6ae462
|
|
@ -1,7 +1,7 @@
|
|||
# Angular.io
|
||||
[![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
|
||||
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`.
|
||||
|
||||
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.
|
||||
To run the samples locally and confirm that they work properly,
|
||||
take the following extra steps to prepare the environment:
|
||||
|
|
|
|||
|
|
@ -461,7 +461,7 @@ gulp.task('_copy-example-boilerplate', function (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
|
||||
//part of the example boilerplate.
|
||||
function buildStyles(cb, done){
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
"picture": "/resources/images/bios/tobias.jpg",
|
||||
"twitter": "tbosch1009",
|
||||
"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"
|
||||
},
|
||||
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
"picture": "/resources/images/bios/hansl.jpg",
|
||||
"twitter": "hanslatwork",
|
||||
"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"
|
||||
},
|
||||
|
||||
|
|
@ -360,7 +360,7 @@
|
|||
"picture": "/resources/images/bios/marclaval.jpg",
|
||||
"twitter": "marclaval",
|
||||
"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"
|
||||
},
|
||||
|
||||
|
|
@ -378,7 +378,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 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"
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "angular.io",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"description": "Angular 2 documentation",
|
||||
"description": "Angular documentation",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ else
|
|||
h3.text-headline RESOURCES
|
||||
|
||||
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="/about/">About</a>
|
||||
li <a href="/resources/">Books & Training</a>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ if title == "Angular"
|
|||
else if language
|
||||
title #{title} - #{language}
|
||||
else
|
||||
title #{title} - Angular 2
|
||||
title #{title} - Angular
|
||||
|
||||
meta(charset="utf-8")
|
||||
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="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:type" content="image/png")
|
||||
meta(property="og:image:width" content="184")
|
||||
meta(property="og:image:height" content="200")
|
||||
meta(property="og:description" content="#{description}")
|
||||
|
||||
meta(itemprop="name" content="Angular 2")
|
||||
meta(itemprop="name" content="Angular")
|
||||
meta(itemprop="description" content="#{description}")
|
||||
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/android-chrome-192x192.png" sizes="192x192">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -44,20 +44,20 @@ mixin tree(directory, urlPrefix, name, latest)
|
|||
//- BUTTON TITLE GENERATION
|
||||
if language == 'ts'
|
||||
if version == "latest"
|
||||
- var title = 'Angular 2 for TypeScript'
|
||||
- var title = 'Angular for TypeScript'
|
||||
else
|
||||
- var title = 'Angular ' + version + ' for TypeScript'
|
||||
|
||||
if language == 'js'
|
||||
if version == "latest"
|
||||
- var title = 'Angular 2 for JavaScript'
|
||||
- var title = 'Angular for JavaScript'
|
||||
else
|
||||
- var title = 'Angular ' + version + ' for JavaScript'
|
||||
|
||||
|
||||
if language == 'dart'
|
||||
if version == "latest"
|
||||
- var title = 'Angular 2 for Dart'
|
||||
- var title = 'Angular for Dart'
|
||||
else
|
||||
- var title = 'Angular ' + version + ' for Dart'
|
||||
|
||||
|
|
@ -69,8 +69,8 @@ nav.dropdown
|
|||
|
||||
<!-- DROPDOWN MENU -->
|
||||
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.js, "/docs/js", "Angular 2 for JavaScript")
|
||||
mixin tree(public.docs.ts, "/docs/ts", "Angular for TypeScript")
|
||||
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):
|
||||
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")
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
p We'd love for you to contribute to our source code and to make Angular projects even better.
|
||||
|
||||
.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
|
||||
h3 Angular for JavaScript or Dart
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ exports.config = {
|
|||
// Framework to use. Jasmine is recommended.
|
||||
framework: 'jasmine',
|
||||
|
||||
// For angular2 tests
|
||||
// For angular tests
|
||||
useAllAngular2AppRoots: true,
|
||||
|
||||
// Base URL for application server
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* The tests here basically just checking that the end styles
|
||||
* 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.
|
||||
*
|
||||
* Ideally we'd use https://developer.mozilla.org/en-US/docs/Web/API/Document/getAnimations
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"description": "Angular 2 Animations",
|
||||
"description": "Angular Animations",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Architecture of Angular 2</title>
|
||||
<title>Architecture of Angular</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ class Hero {
|
|||
|
||||
describe('Architecture', () => {
|
||||
|
||||
const expectedTitle = 'Architecture of Angular 2';
|
||||
const expectedTitle = 'Architecture of Angular';
|
||||
const expectedH2 = ['Hero List', 'Sales Tax Calculator'];
|
||||
|
||||
beforeAll(() => browser.get(''));
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { Component } from '@angular/core';
|
|||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: 'Welcome to Angular 2'
|
||||
template: 'Welcome to Angular'
|
||||
})
|
||||
export class AppComponent {
|
||||
constructor(logger: Logger) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Architecture of Angular 2</title>
|
||||
<title>Architecture of Angular</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>Architecture of Angular 2</title>
|
||||
<title>Architecture of Angular</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"description": "Intro to Angular2",
|
||||
"description": "Intro to Angular",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ describe('AOT Compilation', function () {
|
|||
|
||||
it('should load page and click button', function (done) {
|
||||
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()="Bombasto"]')).get(0).isPresent()).toBe(true);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- #docregion -->
|
||||
<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>
|
||||
<div *ngFor="let hero of heroes">{{hero}}</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"description": "Set The Document Title In Angular 2",
|
||||
"description": "Set The Document Title In Angular",
|
||||
"files": [
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ describe('cli-quickstart App', () => {
|
|||
|
||||
it('should display message saying app works', () => {
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@ import { Component } from '@angular/core';
|
|||
// #enddocregion metadata
|
||||
// #docregion title, class
|
||||
export class CliQuickstartAppComponent {
|
||||
title = 'My First Angular 2 App';
|
||||
title = 'My First Angular App';
|
||||
}
|
||||
// #enddocregion title, class
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Hello World</title>
|
||||
<title>Angular Hello World</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Hello World</title>
|
||||
<title>Angular Hello World</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Tabs</title>
|
||||
<title>Angular Tabs</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Tabs</title>
|
||||
<title>Angular Tabs</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Todos</title>
|
||||
<title>Angular Todos</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Todos</title>
|
||||
<title>Angular Todos</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Lifecycle Hooks</title>
|
||||
<title>Angular Lifecycle Hooks</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
### Angular 2 Documentation Example
|
||||
### Angular Documentation Example
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
describe('QuickStart E2E Tests', function () {
|
||||
|
||||
let expectedMsg = 'My First Angular 2 App';
|
||||
let expectedMsg = 'My First Angular App';
|
||||
|
||||
beforeEach(function () {
|
||||
browser.get('');
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
ng.core.Component({
|
||||
// #enddocregion ng-namespace-funcs
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular 2 App</h1>'
|
||||
template: '<h1>My First Angular App</h1>'
|
||||
// #docregion ng-namespace-funcs
|
||||
})
|
||||
// #enddocregion component
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 QuickStart JS</title>
|
||||
<title>Angular QuickStart JS</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { Component } from '@angular/core';
|
|||
// #docregion metadata
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: '<h1>My First Angular 2 App</h1>'
|
||||
template: '<h1>My First Angular App</h1>'
|
||||
})
|
||||
// #enddocregion metadata
|
||||
// #docregion class
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 QuickStart</title>
|
||||
<title>Angular QuickStart</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "angular2-quickstart",
|
||||
"name": "angular-quickstart",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// #docregion
|
||||
/**
|
||||
* System configuration for Angular 2 samples
|
||||
* System configuration for Angular samples
|
||||
* Adjust as necessary for your application needs.
|
||||
*/
|
||||
(function (global) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Http Demo</title>
|
||||
<title>Angular Http Demo</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- #docregion -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Structural Directives</title>
|
||||
<title>Angular Structural Directives</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
describe('Documentation StyleGuide E2E Tests', function() {
|
||||
|
||||
let expectedMsg = 'My First Angular 2 App';
|
||||
let expectedMsg = 'My First Angular App';
|
||||
|
||||
beforeEach(function () {
|
||||
browser.get('');
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ app.AppComponent =
|
|||
selector: 'my-app',
|
||||
// #enddocregion
|
||||
// #docregion view
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular App</h1>'
|
||||
})
|
||||
// #enddocregion
|
||||
// #docregion class
|
||||
|
|
@ -48,7 +48,7 @@ app.AppComponent = function AppComponent () {}
|
|||
app.AppComponent.annotations = [
|
||||
new ng.core.Component({
|
||||
selector: 'my-app',
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular App</h1>'
|
||||
})
|
||||
];
|
||||
// #enddocregion
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
@Component({
|
||||
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 { }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* System configuration for Angular 2 samples
|
||||
* System configuration for Angular samples
|
||||
* Adjust as necessary for your application needs.
|
||||
*/
|
||||
(function (global) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* PLUNKER VERSION FOR CURRENT ANGULAR BUILD
|
||||
* (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.
|
||||
*
|
||||
* UNTESTED !
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* PLUNKER VERSION
|
||||
* (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.
|
||||
*/
|
||||
(function (global) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
type WPromise<T> = webdriver.promise.Promise<T>;
|
||||
|
||||
const expectedH1 = 'Tour of Heroes';
|
||||
const expectedTitle = `Angular 2 ${expectedH1}`;
|
||||
const expectedTitle = `Angular ${expectedH1}`;
|
||||
|
||||
class Hero {
|
||||
id: number;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Tour of Heroes</title>
|
||||
<title>Angular Tour of Heroes</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
|
||||
const expectedH1 = 'Tour of Heroes';
|
||||
const expectedTitle = `Angular 2 ${expectedH1}`;
|
||||
const expectedTitle = `Angular ${expectedH1}`;
|
||||
const expectedH2 = 'My Heroes';
|
||||
const targetHero = { id: 16, name: 'RubberMan' };
|
||||
const nameSuffix = 'X';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Tour of Heroes</title>
|
||||
<title>Angular Tour of Heroes</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
|
||||
const expectedH1 = 'Tour of Heroes';
|
||||
const expectedTitle = `Angular 2 ${expectedH1}`;
|
||||
const expectedTitle = `Angular ${expectedH1}`;
|
||||
const expectedH2 = 'My Heroes';
|
||||
const targetHero = { id: 16, name: 'RubberMan' };
|
||||
const nameSuffix = 'X';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Tour of Heroes</title>
|
||||
<title>Angular Tour of Heroes</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
|
||||
const expectedH1 = 'Tour of Heroes';
|
||||
const expectedTitle = `Angular 2 ${expectedH1}`;
|
||||
const expectedTitle = `Angular ${expectedH1}`;
|
||||
const expectedH2 = 'My Heroes';
|
||||
const targetHero = { id: 16, name: 'RubberMan' };
|
||||
const nameSuffix = 'X';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Angular 2 Tour of Heroes</title>
|
||||
<title>Angular Tour of Heroes</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
|
||||
const expectedH1 = 'Tour of Heroes';
|
||||
const expectedTitle = `Angular 2 ${expectedH1}`;
|
||||
const expectedTitle = `Angular ${expectedH1}`;
|
||||
const targetHero = { id: 15, name: 'Magneta' };
|
||||
const targetHeroDashboardIndex = 3;
|
||||
const nameSuffix = 'X';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<head>
|
||||
<base href="/">
|
||||
<!-- #enddocregion base-href -->
|
||||
<title>Angular 2 Tour of Heroes</title>
|
||||
<title>Angular Tour of Heroes</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
|
||||
const expectedH1 = 'Tour of Heroes';
|
||||
const expectedTitle = `Angular 2 ${expectedH1}`;
|
||||
const expectedTitle = `Angular ${expectedH1}`;
|
||||
const targetHero = { id: 15, name: 'Magneta' };
|
||||
const targetHeroDashboardIndex = 3;
|
||||
const nameSuffix = 'X';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<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">
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
'use strict';
|
||||
describe('QuickStart E2E Tests', function () {
|
||||
|
||||
let expectedMsg = 'Hello from Angular 2 App with Webpack';
|
||||
let expectedMsg = 'Hello from Angular App with Webpack';
|
||||
|
||||
beforeEach(function () {
|
||||
browser.get('');
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "angular2-webpack",
|
||||
"version": "1.0.0",
|
||||
"description": "A webpack starter for angular 2",
|
||||
"description": "A webpack starter for Angular",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --inline --progress --port 8080",
|
||||
"test": "karma start",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- #docregion -->
|
||||
<main>
|
||||
<h1>Hello from Angular 2 App with Webpack</h1>
|
||||
<h1>Hello from Angular App with Webpack</h1>
|
||||
|
||||
<img src="../../public/images/angular.png">
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
// Angular 2
|
||||
// Angular
|
||||
import '@angular/platform-browser';
|
||||
import '@angular/platform-browser-dynamic';
|
||||
import '@angular/core';
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ include ../../../_includes/_util-fns
|
|||
selector: 'my-app',
|
||||
// #enddocregion component
|
||||
// #docregion view
|
||||
template: '<h1 id="output">My First Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My First Angular App</h1>'
|
||||
})
|
||||
// #enddocregion view
|
||||
// #docregion class
|
||||
|
|
@ -143,7 +143,7 @@ include ../../../_includes/_util-fns
|
|||
// #enddocregion twoparts, import
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
template: '<h1 id="output">My first Angular 2 App</h1>'
|
||||
template: '<h1 id="output">My first Angular App</h1>'
|
||||
})
|
||||
class AppComponent {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ block includes
|
|||
- var _at_angular = 'angular2'
|
||||
|
||||
: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.
|
||||
|
||||
block angular-parts
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ figure.image-display
|
|||
|
||||
:marked
|
||||
## 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`.
|
||||
(These files should be familiar from the
|
||||
[QuickStart](../quickstart.html).) Put these contents in the files:
|
||||
|
|
@ -160,7 +160,7 @@ figure.image-display
|
|||
There’s 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 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.
|
||||
|
||||
|
|
@ -629,7 +629,7 @@ figure.image-display
|
|||
:marked
|
||||
## 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.
|
||||
- A form component class with a `Component` decorator.
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ block http-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],
|
||||
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.
|
||||
|
||||
Unless special steps are taken, Dart libraries like `http`
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ block dart-no-truthy-falsey
|
|||
the value `true`; all other values are `false`.
|
||||
TypeScript and JavaScript, on the other hand, treat
|
||||
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 != null"`.
|
||||
|
||||
|
|
@ -109,7 +109,7 @@ block dart-safe-nav-op
|
|||
:marked
|
||||
The safe navigation operator (`?.`) is part of the Dart language.
|
||||
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
|
||||
//- TODO: explain alternative in Dart
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
.l-sub-section
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
include ../../../../_includes/_util-fns
|
||||
|
||||
: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
|
||||
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
|
||||
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.
|
||||
|
||||
<a id="toc"></a>
|
||||
|
|
@ -44,19 +44,19 @@ table(width="100%")
|
|||
tr(style=top)
|
||||
td
|
||||
: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:
|
||||
|
||||
+makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )
|
||||
|
||||
td
|
||||
:marked
|
||||
### Accessing Angular 2 Code through the ng global
|
||||
### Accessing Angular Code through the ng global
|
||||
|
||||
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
|
||||
nested members of this object we'll find everything we would import
|
||||
from `@angular` in TypeScript:
|
||||
|
|
@ -68,7 +68,7 @@ table(width="100%")
|
|||
:marked
|
||||
### 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
|
||||
to other modules, we `export` it.
|
||||
|
||||
|
|
@ -84,7 +84,7 @@ table(width="100%")
|
|||
:marked
|
||||
### 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
|
||||
files via the shared global `window` scope.
|
||||
|
||||
|
|
@ -112,8 +112,8 @@ table(width="100%")
|
|||
.alert.is-helpful
|
||||
:marked
|
||||
Alternatively, we can use a module loader such as Webpack or
|
||||
Browserify in an Angular 2 JavaScript project. In such a project, we would
|
||||
use CommonJS modules and the `require` function to load Angular 2 framework code.
|
||||
Browserify in an Angular JavaScript project. In such a project, we would
|
||||
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
|
||||
code.
|
||||
|
||||
|
|
@ -135,7 +135,7 @@ table(width="100%")
|
|||
:marked
|
||||
### 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="." )
|
||||
|
||||
|
|
@ -144,7 +144,7 @@ table(width="100%")
|
|||
### Constructors and Prototypes
|
||||
|
||||
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="." )
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ table(width="100%")
|
|||
:marked
|
||||
### 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,
|
||||
a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator.
|
||||
|
||||
|
|
@ -225,7 +225,7 @@ table(width="100%")
|
|||
### Implementing Methods without Interfaces
|
||||
|
||||
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
|
||||
implement the methods.
|
||||
|
||||
|
|
@ -294,7 +294,7 @@ table(width="100%")
|
|||
:marked
|
||||
### 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.
|
||||
|
||||
+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:
|
||||
|
||||
* 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.
|
||||
* Each value identifies the corresponding component property or method.
|
||||
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ figure.image-display
|
|||
|
||||
:marked
|
||||
## 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
|
||||
|
||||
|
|
@ -146,7 +146,7 @@ code-example(format="").
|
|||
:marked
|
||||
There’s 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 we’ve learned in previous chapters
|
||||
Understanding this component requires only the Angular concepts we’ve learned in previous chapters
|
||||
|
||||
1. We use the `ng.core` object from the Angular library as we usually do.
|
||||
|
||||
|
|
@ -601,7 +601,7 @@ figure.image-display
|
|||
:marked
|
||||
## 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.
|
||||
- A form component class with a `Component` decorator.
|
||||
|
|
@ -614,7 +614,7 @@ figure.image-display
|
|||
|
||||
Our final project folder structure should look like this:
|
||||
.filetree
|
||||
.file angular2-forms
|
||||
.file angular-forms
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
include _util-fns
|
||||
|
||||
: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
|
||||
header Don't want JavaScript?
|
||||
: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.
|
||||
|
||||
.l-main-section
|
||||
|
|
@ -14,7 +14,7 @@ include _util-fns
|
|||
## See It Run!
|
||||
|
||||
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"),
|
||||
and displays a simple message:
|
||||
|
|
@ -24,7 +24,7 @@ figure.image-display
|
|||
:marked
|
||||
Here is the file structure:
|
||||
.filetree
|
||||
.file angular2-quickstart
|
||||
.file angular-quickstart
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
@ -65,8 +65,8 @@ figure.image-display
|
|||
### Create a new project folder
|
||||
|
||||
code-example(format="").
|
||||
mkdir angular2-quickstart
|
||||
cd angular2-quickstart
|
||||
mkdir angular-quickstart
|
||||
cd angular-quickstart
|
||||
:marked
|
||||
### Add the libraries we need
|
||||
|
||||
|
|
@ -208,7 +208,7 @@ code-example(format="").
|
|||
:marked
|
||||
The `template` property holds the component's companion template.
|
||||
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.
|
||||
|
||||
|
|
@ -311,7 +311,7 @@ figure.image-display
|
|||
:marked
|
||||
### 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,
|
||||
refresh the browser, and display the revised message.
|
||||
|
|
@ -325,7 +325,7 @@ figure.image-display
|
|||
## Final structure
|
||||
Our final project folder structure looks like this:
|
||||
.filetree
|
||||
.file angular2-quickstart
|
||||
.file angular-quickstart
|
||||
.children
|
||||
.file node_modules
|
||||
.file app
|
||||
|
|
@ -357,7 +357,7 @@ figure.image-display
|
|||
.l-main-section
|
||||
:marked
|
||||
## 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 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'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)!
|
||||
|
||||
|
|
@ -399,7 +399,7 @@ figure.image-display
|
|||
Most applications need those capabilities and most applications
|
||||
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.
|
||||
.l-sub-section
|
||||
:marked
|
||||
|
|
@ -408,7 +408,7 @@ figure.image-display
|
|||
when working with observables.
|
||||
We added the library here in QuickStart so we don't forget later.
|
||||
: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
|
||||
become more concerned about production qualities such as
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ include ../_util-fns
|
|||
with a suitable package loader such as `systemjs` or `webpack`.
|
||||
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.
|
||||
CLI users can skip this chapter or read on to understand
|
||||
how it works.
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ include ../_util-fns
|
|||
|
||||
// #docregion cookbook
|
||||
:marked
|
||||
# Angular 2 Cookbook
|
||||
# Angular Cookbook
|
||||
|
||||
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.
|
||||
|
||||
.l-sub-section
|
||||
|
|
@ -27,5 +27,5 @@ include ../_util-fns
|
|||
Post *documentation* issues and pull requests on the
|
||||
[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
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ code-example(format='').
|
|||
|
||||
:marked
|
||||
## 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
|
||||
for getting and setting the current HTML document title:
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ include ../_util-fns
|
|||
Some developers prefer Visual Studio as their Interactive Development Environment (IDE).
|
||||
|
||||
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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ block includes
|
|||
- var _decoratorLink = '<a href="#' + _decorator + '">' + _decorator + '</a>'
|
||||
|
||||
:marked
|
||||
# Angular 2 Glossary
|
||||
# Angular Glossary
|
||||
|
||||
Angular 2 has a vocabulary of its own.
|
||||
Most Angular 2 terms are everyday English words
|
||||
Angular has a vocabulary of its own.
|
||||
Most Angular terms are everyday English words
|
||||
with a specific meaning within the Angular system.
|
||||
|
||||
This glossary lists the most prominent terms
|
||||
|
|
@ -327,7 +327,7 @@ block includes
|
|||
|
||||
The latest approved version of JavaScript is
|
||||
[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
|
||||
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)"
|
||||
to ES5 JavaScript.
|
||||
|
||||
Angular 2 developers may choose to write in ES5 directly.
|
||||
Angular developers may choose to write in ES5 directly.
|
||||
|
||||
:marked
|
||||
## ES2015
|
||||
|
|
@ -712,7 +712,7 @@ a#snake-case
|
|||
code completion, refactoring, and intelligent search). Many code editors
|
||||
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).
|
||||
|
||||
Read more about TypeScript at [typescript.org](http://www.typescriptlang.org/).
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ block includes
|
|||
- var _at_angular = '@angular'
|
||||
|
||||
: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.
|
||||
|
||||
block angular-parts
|
||||
|
|
@ -27,7 +27,7 @@ figure
|
|||
img(src="/resources/images/devguide/architecture/overview2.png" alt="overview" style="margin-left:-40px;" width="700")
|
||||
|
||||
: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)
|
||||
* [Components](#components)
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ block includes
|
|||
include ../_util-fns
|
||||
|
||||
: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
|
||||
to our Angular applications directly.
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ block includes
|
|||
:marked
|
||||
## 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,
|
||||
specifying any selectors, rules, and media queries that we need.
|
||||
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@ block ctor-syntax
|
|||
This is important in general, but not to our current story.
|
||||
|
||||
: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.
|
||||
|
||||
#bootstrap
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ figure.image-display
|
|||
|
||||
:marked
|
||||
## 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
|
||||
:marked
|
||||
|
|
@ -693,7 +693,7 @@ figure.image-display
|
|||
|
||||
Our final project folder structure should look like this:
|
||||
.filetree
|
||||
.file angular2-forms
|
||||
.file angular-forms
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
||||
Does that mean that services aren’t singletons anymore in Angular 2? Yes and no.
|
||||
Does that mean that services aren’t singletons anymore in Angular? Yes and no.
|
||||
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.
|
||||
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`,
|
||||
scoped to that component instance and its child components.
|
||||
|
||||
//- ## Advanced Dependency Injection in Angular 2
|
||||
//- ## Advanced Dependency Injection in Angular
|
||||
//- Restrict Dependency Lookups
|
||||
//- [TODO] (@Host) This has been postponed for now until we come up with a decent use case
|
||||
//- .l-main-section
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ table(width="100%")
|
|||
|
||||
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.
|
||||
|
||||
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 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
|
||||
|
|
|
|||
|
|
@ -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>).
|
||||
.l-sub-section
|
||||
: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">
|
||||
Get them now</a> if they're not already installed on your machine.
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ block includes
|
|||
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".
|
||||
|
||||
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
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ include ../_util-fns
|
|||
:marked
|
||||
### Router imports
|
||||
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.
|
||||
|
||||
+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.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
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.
|
||||
And it preserves the option to do **server-side rendering** later.
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ include ../_util-fns
|
|||
introduced in RC5 and will add it to the style guide soon.
|
||||
|
||||
:marked
|
||||
Welcome to the Angular 2 Style Guide
|
||||
Welcome to the Angular Style Guide
|
||||
|
||||
## Purpose
|
||||
|
||||
|
|
@ -411,7 +411,7 @@ a(href="#toc") Back to top
|
|||
|
||||
.s-why.s-why-last
|
||||
: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
|
||||
|
||||
|
|
@ -1696,11 +1696,11 @@ a(href="#toc") Back to top
|
|||
|
||||
.s-rule.do
|
||||
: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
|
||||
:marked
|
||||
**Why?** The Angular 2 injector is hierarchical.
|
||||
**Why?** The Angular injector is hierarchical.
|
||||
|
||||
.s-why
|
||||
:marked
|
||||
|
|
@ -1812,7 +1812,7 @@ a(href="#toc") Back to top
|
|||
:marked
|
||||
## Appendix
|
||||
|
||||
Useful tools and tips for Angular 2.
|
||||
Useful tools and tips for Angular.
|
||||
|
||||
a(href="#toc") Back to top
|
||||
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
code-example(language="html" escape="html").
|
||||
<h1>My First Angular 2 App</h1>
|
||||
<h1>My First Angular App</h1>
|
||||
|
||||
: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.)
|
||||
|
|
@ -387,7 +387,7 @@ table
|
|||
.callout.is-helpful
|
||||
header A world without attributes
|
||||
: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.
|
||||
Attributes effectively disappear.
|
||||
:marked
|
||||
|
|
@ -929,8 +929,8 @@ figure.image-display
|
|||
The community contributed many more, and countless private directives
|
||||
have been created for internal applications.
|
||||
|
||||
We don’t need many of those directives in Angular 2.
|
||||
Quite often we can achieve the same results with the more capable and expressive Angular 2 binding system.
|
||||
We don’t need many of those directives in Angular.
|
||||
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?
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
||||
:marked
|
||||
|
|
@ -1239,7 +1239,7 @@ figure.image-display
|
|||
|
||||
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 — in fact, it will work with any custom web component.
|
||||
It can be used with native DOM elements but also with Angular components — in fact, it will work with any custom web component.
|
||||
|
||||
:marked
|
||||
### Referencing a template reference variable
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ a(id="tsconfig")
|
|||
We created the following `tsconfig.json` for [QuickStart](../quickstart.html):
|
||||
+makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
|
||||
: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>
|
||||
### *noImplicitAny* and *suppressImplicitAnyIndexErrors*
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ include ../_util-fns
|
|||
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.
|
||||
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>
|
||||
## Table of contents
|
||||
|
|
@ -138,14 +138,14 @@ a(id="configure-webpack")
|
|||
:marked
|
||||
## 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.
|
||||
|
||||
Create a **new project folder**
|
||||
code-example(format="").
|
||||
mkdir angular2-webpack
|
||||
cd angular2-webpack
|
||||
mkdir angular-webpack
|
||||
cd angular-webpack
|
||||
|
||||
:marked
|
||||
Add these files to the root directory:
|
||||
|
|
@ -167,7 +167,7 @@ code-example(format="").
|
|||
)
|
||||
.l-sub-section
|
||||
: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.
|
||||
We require packages for Webpack use in addition to the ones listed in that chapter.
|
||||
|
|
@ -200,8 +200,8 @@ a(id="common-configuration")
|
|||
:marked
|
||||
We are splitting our application into three bundles:
|
||||
|
||||
* polyfills - the standard polyfills we require to run Angular 2 applications in most modern browsers.
|
||||
* vendor - the vendor files we need: Angular 2, lodash, bootstrap.css...
|
||||
* polyfills - the standard polyfills we require to run Angular applications in most modern browsers.
|
||||
* vendor - the vendor files we need: Angular, lodash, bootstrap.css...
|
||||
* app - our application code.
|
||||
|
||||
.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.
|
||||
* **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=".")
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ div(flex)
|
|||
p.
|
||||
What's your question about?
|
||||
select#feedback-dropdown(name="Angular Version")
|
||||
option(value="Angular2") Angular2
|
||||
option(value="AngularJS") AngularJS
|
||||
option(value="Angular2") Angular 2
|
||||
option(value="Angular1") Angular 1
|
||||
button#feedback-btn.
|
||||
Submit
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ block includes
|
|||
.callout.is-helpful
|
||||
header Don't want #{_Lang}?
|
||||
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
|
||||
left nav to switch development languages for this guide.
|
||||
.l-main-section
|
||||
|
|
@ -81,8 +81,8 @@ h2 Create the project folder
|
|||
|
||||
- var _ = _docsFor == 'dart' ? '_' : '-';
|
||||
code-example(language="sh" class="code-shell").
|
||||
mkdir angular2!{_}quickstart
|
||||
cd angular2!{_}quickstart
|
||||
mkdir angular!{_}quickstart
|
||||
cd angular!{_}quickstart
|
||||
|
||||
h2#add-config-files Create #{_package_and_config_files}
|
||||
block package-and-config-files
|
||||
|
|
@ -150,7 +150,7 @@ block install-packages
|
|||
You should now have the following structure:
|
||||
|
||||
.filetree
|
||||
.file angular2-quickstart
|
||||
.file angular-quickstart
|
||||
.children
|
||||
.file node_modules ...
|
||||
.file typings ...
|
||||
|
|
@ -348,7 +348,7 @@ block build-app
|
|||
.l-main-section#make-changes
|
||||
h1 Step !{step++}: Make some live changes
|
||||
: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
|
||||
:marked
|
||||
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:
|
||||
block project-file-structure
|
||||
.filetree
|
||||
.file angular2-quickstart
|
||||
.file angular-quickstart
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
@ -384,7 +384,7 @@ block project-file-structure
|
|||
.l-main-section
|
||||
:marked
|
||||
## 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
|
||||
static file server.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ include ../_util-fns
|
|||
|
||||
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.
|
||||
|
||||
include ../_quickstart_repo
|
||||
|
|
@ -15,7 +15,7 @@ include ../_quickstart_repo
|
|||
We should have the following structure:
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ include ../_util-fns
|
|||
If not, we’ll need to go back to Part 1 and figure out what we missed.
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ include ../_util-fns
|
|||
Before we continue with our Tour of Heroes, let’s verify we have the following structure. If not, we’ll need to go back and follow the previous chapters.
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
@ -203,7 +203,7 @@ code-example(format=".")
|
|||
Let’s verify that we have the following structure after all of our good refactoring in this chapter:
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ include ../_util-fns
|
|||
If not, we’ll need to go back and follow the previous chapters.
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
@ -304,7 +304,7 @@ a#child-component
|
|||
Let’s verify that we have the following structure after all of our good refactoring in this chapter:
|
||||
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ figure.image-display
|
|||
|
||||
block intro-file-tree
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
@ -863,7 +863,7 @@ figure.image-display
|
|||
|
||||
block file-tree-end
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -536,7 +536,7 @@ figure.image-display
|
|||
|
||||
block filetree
|
||||
.filetree
|
||||
.file angular2-tour-of-heroes
|
||||
.file angular-tour-of-heroes
|
||||
.children
|
||||
.file app
|
||||
.children
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
target="_blank"
|
||||
href="http://angularjs.blogspot.com/2016/09/angular2-final.html"
|
||||
) 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
|
||||
img(src="/resources/images/bios/juleskremer.jpg")
|
||||
.posted Posted by <b>Jules Kremer</b>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
figure
|
||||
img(src="/resources/images/support/github-logo.png" alt="Us" style="width:240px;" )
|
||||
.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
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ set -e -o pipefail
|
|||
[[ -z "$NGIO_ENV_DEFS" ]] && . ./scripts/env-set.sh
|
||||
|
||||
if [[ -e "$NG2_REPO" ]]; then
|
||||
echo Angular2 repo is already present at: $NG2_REPO
|
||||
echo Angular repo is already present at: $NG2_REPO
|
||||
else
|
||||
travis_fold start install.ng2
|
||||
echo GETTING Angular2 from GitHub ...
|
||||
echo GETTING Angular from GitHub ...
|
||||
set -x
|
||||
git clone https://github.com/angular/angular.git $NG2_REPO
|
||||
git -C $NG2_REPO checkout $LATEST_RELEASE
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
|
|||
var angular_repo_path = path.resolve(__dirname, '../../../../angular');
|
||||
// confirm that the angular repo is actually there.
|
||||
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.ignoreExportsMatching = [/^_/];
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue