From 4a5f074061cce9ceb511720abcb9d49fed66e7ad Mon Sep 17 00:00:00 2001 From: Eric Jimenez Date: Tue, 31 May 2016 11:33:46 -0400 Subject: [PATCH 01/20] add placeholder text when no description is found --- public/resources/css/module/_resources.scss | 96 +++++++++++++++++-- public/resources/index.ejs | 50 +++++++--- .../js/controllers/resources-controller.js | 11 ++- 3 files changed, 137 insertions(+), 20 deletions(-) diff --git a/public/resources/css/module/_resources.scss b/public/resources/css/module/_resources.scss index f8b9fb3498..8c29d7a091 100644 --- a/public/resources/css/module/_resources.scss +++ b/public/resources/css/module/_resources.scss @@ -1,18 +1,100 @@ .resources { - display: flex; - justify-content: space-between; - flex-direction: row-reverse; + .flex { + display: flex; + flex-wrap: wrap; + } - @media(max-width: 768px) { - justify-content: center; - flex-direction: column-reverse; + .showcase-content { + @media(max-width: 320px) { + padding: 0; + margin: 0; + } + } + + .resource-tabs { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: row-reverse; + + @media(max-width: 500px) { + flex-direction: column-reverse; + } + + .resource-tab { + display: inline; + background-color: #CFD8DC; + padding: $unit (3 * $unit); + border-radius: 2px; + margin-right: 16px; + color: #455A64; + + @media(max-width: 500px) { + margin-right: 0; + margin-bottom: 12px; + } + + &:hover { + cursor: pointer; + background-color: #B0BEC5; + } + + &.selected { + color: #1D77CE; + background-color: #E3F2FB; + font-weight: bold; + } + } + } + + .subsection { + margin-bottom: 64px; + } + + .subsection-title { + font-weight: 400; + } + + .card { + display: inline-block; + width: 320px; + margin-right: $unit * 4; + + @media(max-width: 320px) { + margin-right: 0; + width: 275px; + } + } + + .title-link { + padding: 0 16px; + } + + .description { + padding-bottom: 32px; + line-height: 21px; } a { font-size: 16px; + color: #1a2326; + + &.card-link { + font-size: 14px; + color: #1D77CE; + } + + &:hover { + color: #1D77CE; + } + } + + .form a { + color: $regal; } } .capitalize { - text-transform: capitalize; + text-transform: capitalize !important; } \ No newline at end of file diff --git a/public/resources/index.ejs b/public/resources/index.ejs index bb85fc7ddc..d2a54af0ff 100644 --- a/public/resources/index.ejs +++ b/public/resources/index.ejs @@ -1,16 +1,42 @@ -

Would you like to be listed in this page? Fill out this form.

- -
-
+
+
-

{{category}}

-
-
-
-

{{ subsectionObj.title }}

- +
+
+

+ Would you like to be listed in this page? Fill out this form. +

+
+
+ +

Explore our Resources

+ +
+
+
{{category}} +
+
+
+
+
+
+
+

{{ subsectionObj.title }}

+
+
+
+ +

{{ resource.title }}

 + +

{{ resource.desc }}

+

No information found. Submit a description by filling out this form.

+
+
+
+
diff --git a/public/resources/js/controllers/resources-controller.js b/public/resources/js/controllers/resources-controller.js index b5addb5fe7..75c7dc1aaa 100644 --- a/public/resources/js/controllers/resources-controller.js +++ b/public/resources/js/controllers/resources-controller.js @@ -4,10 +4,19 @@ * This controller is responsible for fetching all the data for the resources page, * from Firebase. */ -angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', function ($firebaseArray, $firebaseObject) { +angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) { + var DEFAULT_CATEGORY = 'education'; var categoryRef = new Firebase("https://angularresources.firebaseio.com/"); var vm = this; vm.fbObject = $firebaseObject(categoryRef); + vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY; + + // onSelect :: String + // Side effect, modifies vm.selectedCategory + vm.onSelectCategory = function onSelectCategory(category) { + $location.hash(category); + vm.selectedCategory = category; + }; }]); \ No newline at end of file From 868abbe5c753438b61ece2457e6f55e87926ad70 Mon Sep 17 00:00:00 2001 From: Eric Jimenez Date: Thu, 2 Jun 2016 16:45:28 -0400 Subject: [PATCH 02/20] new style with new schema --- public/_data.json | 16 -- public/resources/_data.json | 4 +- public/resources/css/module/_resources.scss | 178 ++++++++++-------- public/resources/index.ejs | 67 ++++--- .../js/controllers/resources-controller.js | 23 ++- 5 files changed, 158 insertions(+), 130 deletions(-) diff --git a/public/_data.json b/public/_data.json index cc7f331656..1232f0a1de 100644 --- a/public/_data.json +++ b/public/_data.json @@ -31,21 +31,5 @@ "presskit": { "title": "Press Kit" - }, - - "books": { - "title": "Books" - }, - - "training": { - "title": "Training" - }, - - "communities": { - "title": "Communities" - }, - - "tooling": { - "title": "Tooling and Libraries" } } diff --git a/public/resources/_data.json b/public/resources/_data.json index 43a2a280be..3fc44bb733 100644 --- a/public/resources/_data.json +++ b/public/resources/_data.json @@ -1,5 +1,5 @@ { "index": { - "title": "Resources" + "title": "Explore Angular Resources" } -} +} \ No newline at end of file diff --git a/public/resources/css/module/_resources.scss b/public/resources/css/module/_resources.scss index 8c29d7a091..01b71ac5f1 100644 --- a/public/resources/css/module/_resources.scss +++ b/public/resources/css/module/_resources.scss @@ -1,100 +1,126 @@ .resources { - .flex { - display: flex; - flex-wrap: wrap; + + .h-affix { + position: fixed; } - .showcase-content { - @media(max-width: 320px) { - padding: 0; + .affix-top { + top: 50px; + } + + .c-resource { + h4 { + margin: 0; + line-height: 24px; + } + + p { margin: 0; } } - - .resource-tabs { - margin: 0; - padding: 0; - list-style: none; + + .c-resource-nav { + margin-top: 48px; + width: $unit * 20; + z-index: $layer-1; + background-color: #fff; + border-radius: 2px; + + a { + color: #373E41; + text-decoration: none; + } + + .category { + padding: 10px 0; + + .category-link { + display: block; + margin: 2px 0; + padding: 3px 14px; + font-size: 18px !important; + + &:hover { + background: #edf0f2; + color: #2B85E7; + } + } + } + + .subcategory { + .subcategory-link { + display: block; + margin: 2px 0; + padding: 4px 14px; + + &:hover { + background: #edf0f2; + color: #2B85E7; + } + } + } + } + + .h-anchor-offset { + display: block; + position: relative; + top: -20px; + visibility: hidden; + } + + .l-flex--column { display: flex; - flex-direction: row-reverse; - - @media(max-width: 500px) { - flex-direction: column-reverse; - } - - .resource-tab { - display: inline; - background-color: #CFD8DC; - padding: $unit (3 * $unit); - border-radius: 2px; - margin-right: 16px; - color: #455A64; - - @media(max-width: 500px) { - margin-right: 0; - margin-bottom: 12px; - } - - &:hover { - cursor: pointer; - background-color: #B0BEC5; - } - - &.selected { - color: #1D77CE; - background-color: #E3F2FB; - font-weight: bold; - } - } + flex-direction: column; } - .subsection { - margin-bottom: 64px; + .c-resource-header { + margin-bottom: 16px; } - .subsection-title { - font-weight: 400; + .c-contribute { + margin-bottom: 24px; } - .card { - display: inline-block; - width: 320px; - margin-right: $unit * 4; - - @media(max-width: 320px) { - margin-right: 0; - width: 275px; - } + .c-resource-header h2 { + margin: 0; } - .title-link { - padding: 0 16px; + .subcategory-title { + padding: 16px 23px; + margin: 0; + background-color: $mist; + color: #373E41; } - .description { - padding-bottom: 32px; - line-height: 21px; + .h-capitalize { + text-transform: capitalize; } - a { - font-size: 16px; + .h-hide { + display: none; + } + + .resource-row-link { color: #1a2326; - - &.card-link { - font-size: 14px; - color: #1D77CE; - } - - &:hover { - color: #1D77CE; - } + border: transparent solid 1px; + margin: 0; + padding: 16px 23px 16px 23px; + position: relative; + text-decoration: none; + transition: all .3s; } - .form a { - color: $regal; + .resource-row-link:hover { + text-decoration: none; + border-color: #2B85E7; + border-radius: 4px; + box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12); + transform: translate3d(0, -2px, 0); + } + + @media(max-width: 900px) { + .c-resource-nav { + display: none; + } } } - -.capitalize { - text-transform: capitalize !important; -} \ No newline at end of file diff --git a/public/resources/index.ejs b/public/resources/index.ejs index d2a54af0ff..fa4f07bcb8 100644 --- a/public/resources/index.ejs +++ b/public/resources/index.ejs @@ -1,39 +1,27 @@ -
-
-
-
-
-

- Would you like to be listed in this page? Fill out this form. -

-
-
+
+
+
+
+
+ +

{{ category }}

+
-

Explore our Resources

+
+
+ +

{{subCategory}}

-
-
-
{{category}} -
-
-
-
-
-
-
-

{{ subsectionObj.title }}

-
-
-
- -

{{ resource.title }}

 - -

{{ resource.desc }}

-

No information found. Submit a description by filling out this form.

-
+ @@ -42,4 +30,15 @@
+ +
+
+
+ {{ category }} +
+ {{subCategory}} +
+
+
+
\ No newline at end of file diff --git a/public/resources/js/controllers/resources-controller.js b/public/resources/js/controllers/resources-controller.js index 75c7dc1aaa..ae477cbbf7 100644 --- a/public/resources/js/controllers/resources-controller.js +++ b/public/resources/js/controllers/resources-controller.js @@ -4,14 +4,33 @@ * This controller is responsible for fetching all the data for the resources page, * from Firebase. */ -angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) { +angularIO.controller('ResourcesCtrl', ['$scope', '$element', '$window', '$firebaseArray', '$firebaseObject','$location', function ($scope, $window, $element, $firebaseArray, $firebaseObject, $location) { var DEFAULT_CATEGORY = 'education'; - var categoryRef = new Firebase("https://angularresources.firebaseio.com/"); + var categoryRef = new Firebase("https://project-8263071350145382327.firebaseio.com/"); + + // TODO: (ericjim): we need the database + var devRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Development"); + devRef.setPriority(1000); + + var eduRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Education"); + eduRef.setPriority(2000); + + var communityRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Community"); + communityRef.setPriority(3000); + + var vm = this; vm.fbObject = $firebaseObject(categoryRef); vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY; + vm.scrollPos = 0; + + window.onscroll = function() { + vm.scrollPos = document.body.scrollTop || document.documentElement.scrollTop || 0; + $scope.$apply(); + }; + // onSelect :: String // Side effect, modifies vm.selectedCategory vm.onSelectCategory = function onSelectCategory(category) { From 461213996e7555b0134a51917755c3590bc839d1 Mon Sep 17 00:00:00 2001 From: Karan Gandhi Date: Wed, 29 Jun 2016 22:49:03 +0530 Subject: [PATCH 03/20] docs(toh-5/ts): Minor error fixed. There are no leading slashes in the path. --- public/docs/_examples/toh-5/ts/app/app.routes.2.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts index 45ddeb9230..47311fcd8d 100644 --- a/public/docs/_examples/toh-5/ts/app/app.routes.2.ts +++ b/public/docs/_examples/toh-5/ts/app/app.routes.2.ts @@ -4,7 +4,7 @@ import { HeroesComponent } from './heroes.component'; const routes: RouterConfig = [ { - path: '/heroes', + path: 'heroes', component: HeroesComponent } ]; From 1b58a86ceda2b9129cf89bd70ff6889dcac5674c Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 29 Jun 2016 14:26:38 -0700 Subject: [PATCH 04/20] chore(gulp): lint should ignore dart build directories --- gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.js b/gulpfile.js index 504b50d299..f5085f6dd5 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -671,9 +671,9 @@ gulp.task('lint', function() { '!./public/docs/_examples/_protractor/**/*', '!./public/docs/_examples/**/typings/**/*', '!./public/docs/_examples/**/typings-ng1/**/*', + '!./public/docs/_examples/**/build/**/*', // temporary until codelyzer is fixed mgechev/codelyzer#60 '!./public/docs/_examples/animations/ts/app/hero.service.ts' - ]) .pipe(tslint({ rulesDirectory: ['node_modules/codelyzer'], From 387f7c6dd2380361c544597e2aa01caa7deaecf6 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Thu, 30 Jun 2016 00:55:58 +0100 Subject: [PATCH 05/20] chore(deps): update in-memory-web-api --- public/docs/_examples/package.json | 2 +- public/docs/_examples/quickstart/js/package.1.json | 2 +- public/docs/_examples/quickstart/ts/package.1.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index c7aa9ffbb9..ed0da1adeb 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -35,7 +35,7 @@ "@angular/router": "3.0.0-alpha.8", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.3", - "angular2-in-memory-web-api": "0.0.12", + "angular2-in-memory-web-api": "0.0.13", "bootstrap": "^3.3.6", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 7f58576e80..b08bcf793a 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -23,7 +23,7 @@ "rxjs": "5.0.0-beta.6", "zone.js": "0.6.12", - "angular2-in-memory-web-api": "0.0.12", + "angular2-in-memory-web-api": "0.0.13", "bootstrap": "^3.3.6" }, "devDependencies": { diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index e57d118d8f..032eb9c25c 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -28,7 +28,7 @@ "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", - "angular2-in-memory-web-api": "0.0.12", + "angular2-in-memory-web-api": "0.0.13", "bootstrap": "^3.3.6" }, "devDependencies": { From 43f400487e79b9696eae1b9822f1cf9dffc96aef Mon Sep 17 00:00:00 2001 From: "Zhimin YE (Rex)" Date: Thu, 30 Jun 2016 10:56:08 +0100 Subject: [PATCH 06/20] docs(router): explicit explaination of terminal property --- public/docs/ts/latest/guide/router.jade | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 43fc2ec33f..c2aa4fbd2f 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -986,8 +986,8 @@ code-example(format=""). :marked Since we only want to redirect when our path specifically matches `''`, we've added an extra configuration - to our route using `terminal: true`. Mainly for redirects, the `terminal` property gives us more control over - when the router should continue matching our URL against our defined routes. + to our route using `terminal: true`. Mainly for redirects, the `terminal` property tells the router + whether or not it should continue matching our URL against the rest of our defined routes. .l-sub-section :marked From 19d2e4ef4c54abced2d06ac369d8ba161c45a5af Mon Sep 17 00:00:00 2001 From: eltronix Date: Thu, 30 Jun 2016 16:45:47 +0300 Subject: [PATCH 07/20] Fixed typo --- public/docs/ts/latest/guide/router.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index c2aa4fbd2f..399663eca3 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -831,7 +831,7 @@ h3#nav-to-list Navigating back to the list component There's no point to this exercise unless we can learn something. We do have new ideas and techniques in mind: - * We'd like our route URLs to branch in to child route trees that reflect the component treese in our feature areas. + * We'd like our route URLs to branch in to child route trees that reflect the component trees in our feature areas. * The application should navigate to the *Crisis Center* by default. From 509cae50a605fc94513a8f416d15758235b945ed Mon Sep 17 00:00:00 2001 From: Naomi Black Date: Thu, 30 Jun 2016 12:34:58 -0700 Subject: [PATCH 08/20] news(june30): updates to the news page for the week of june 30 --- public/news.jade | 77 ++++++++++++++++++++++++------------------------ 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/public/news.jade b/public/news.jade index 10f54d87c8..d65800b152 100644 --- a/public/news.jade +++ b/public/news.jade @@ -36,6 +36,45 @@ h3.text-headline.text-uppercase Developer Community .clear .grid-fluid + .c6 + .article-card + .date June 30, 2016 + .title + a( + target="_blank" + href="http://www.bennadel.com/blog/3116-using-an-item-template-with-an-html-dropdown-menu-component-in-angular-2-rc-3.htm" + ) Using An Item Template With An HTML Dropdown Menu Component + p A while ago, I played around with trying to create an HTML Dropdown menu component in Angular 2. I discovered that you could pass Template references into components for dynamic rendering.... + .author + img(src="/resources/images/bios/shield-bio-placeholder.png") + .posted Posted by Ben Nadel + + .c6 + .article-card + .date June 29, 2016 + .title + a( + target="_blank" + href="https://channel9.msdn.com/Shows/Office-Dev-Show/Office-Dev-Show-Episode-35-Getting-Started-with-Angular-2-and-the-Microsoft-Graph" + ) Getting Started with Angular 2 and the Microsoft Graph (Video) + p Richard diZerega explores how to connect to the Microsoft Graph from Angular 2 and TypeScript. Richard starts with the Angular 2 quickstart template and gets it connecting to the the Microsoft Graph... + .author + img(src="/resources/images/bios/shield-bio-placeholder.png") + .posted Posted by Richard diZerega +.grid-fluid + .c6 + .article-card + .date June 26, 2016 + .title + a( + target="_blank" + href="http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/" + ) Building an Angular 2 Application for Production + p During the keynote of ng-conf, the core team managed to drop the size of the “Hello world!” app to less than 50K! In this blog post we’ll explain all the steps we need to go through in order to achieve such results!. + .author + img(src="/resources/images/bios/shield-bio-placeholder.png") + .posted Posted by Minko Gechev + .c6 .article-card .date June 14, 2016 @@ -49,45 +88,7 @@ img(src="/resources/images/bios/pascalprecht.jpg") .posted Posted by Pascal Precht - .c6 - .article-card - .date June 13, 2016 - .title - a( - target="_blank" - href="https://toddmotto.com/rewriting-angular-styleguide-angular-2" - ) A new Angular 1.x ES2015 styleguide, the path to Angular 2 - p Angular 1.x has changed vastly since the original styleguide, and ES6/ES2015 has now become a defacto standard. The new styleguide focuses on using ES2015, offering recommendations on tooling to use it today... - .author - img(src="/resources/images/bios/shield-bio-placeholder.png") - .posted Posted by Todd Motto -.grid-fluid - .c6 - .article-card - .date June 9, 2016 - .title - a( - target="_blank" - href="https://medium.com/@urish/building-simon-with-angular2-iot-fceb78bb18e5" - ) Building Simon with Angular2-IoT - p I thought it would be fun to see if I could make the same [Angular 2] control/logic code for both a web application and a physical, “Internet of Things” device.... - .author - img(src="/resources/images/bios/angular-gde-bio-placeholder.png") - .posted Posted by Uri Shaked - .c6 - .article-card - .date June 8, 2016 - .title - a( - target="_blank" - href="http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html" - ) Component-Relative Paths in Angular 2 - p Component-based development is Angular 2’s most-loved feature. By now you should be familiar with using the @Component decorators to create components.\... - .author - img(src="/resources/images/bios/thomas.jpg") - .posted Posted by Thomas Burleson - .grid-fluid.l-space-bottom-2.l-space-top-4 .c12.text-center h3.text-headline.text-uppercase Twitter From aa8ab52937694b0c360707c6952634cb029eab74 Mon Sep 17 00:00:00 2001 From: Filipe Silva Date: Wed, 29 Jun 2016 02:22:05 +0100 Subject: [PATCH 09/20] chore: update to rc.4 --- public/docs/_examples/package.json | 21 ++++++++++--------- .../template-syntax/ts/app/app.component.html | 11 +--------- .../docs/ts/latest/guide/template-syntax.jade | 1 - 3 files changed, 12 insertions(+), 21 deletions(-) diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index ed0da1adeb..6df95afdc8 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -25,17 +25,18 @@ "author": "", "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.3", - "@angular/compiler": "2.0.0-rc.3", - "@angular/core": "2.0.0-rc.3", - "@angular/forms": "0.1.1", - "@angular/http": "2.0.0-rc.3", - "@angular/platform-browser": "2.0.0-rc.3", - "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/router": "3.0.0-alpha.8", + + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/forms": "0.2.0", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/router": "3.0.0-beta.1", "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.3", - "angular2-in-memory-web-api": "0.0.13", + "@angular/upgrade": "2.0.0-rc.4", + "angular2-in-memory-web-api": "0.0.14", "bootstrap": "^3.3.6", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html index fbe3527362..ebd9981e1a 100644 --- a/public/docs/_examples/template-syntax/ts/app/app.component.html +++ b/public/docs/_examples/template-syntax/ts/app/app.component.html @@ -589,18 +589,9 @@ bindon-ngModel
({{hero.id}}) {{hero.fullName}}
-

with *ngForTrackBy

-
- -
({{hero.id}}) {{hero.fullName}}
- -
-

with generic trackById function

- -
({{hero.id}}) {{hero.fullName}}
- +
({{hero.id}}) {{hero.fullName}}
top diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 5e594e3db5..42225b411d 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -1139,7 +1139,6 @@ block dart-no-truthy-falsey +makeExample('template-syntax/ts/app/app.component.ts', 'trackByHeroes')(format=".") :marked Now set the `NgForTrackBy` directive to that *tracking* function. - Angular offers a variety of equivalent syntax choices including these two: +makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".") :marked The *tracking* function doesn't eliminate all DOM changes. From 55af9fee498b81f478d432fa130ec7246ecaea25 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Thu, 30 Jun 2016 20:09:57 +0200 Subject: [PATCH 10/20] fix upgrade tests to not use deprecated API --- .../phone-list/phone-list.component.spec.ts | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts index 3e0f5f1943..75ebdfd12e 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts @@ -1,25 +1,27 @@ // #docregion routestuff -import { ApplicationRef } from '@angular/core'; -import { LocationStrategy } from '@angular/common'; +import { Directive } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; import { - ROUTER_PROVIDERS, + Router, + RouterLink, + RootRouter, + RouteRegistry, ROUTER_PRIMARY_COMPONENT } from '@angular/router-deprecated'; import { Observable } from 'rxjs/Rx'; import { describe, - beforeEachProviders, + addProviders, inject, it, expect, - MockApplicationRef + // MockApplicationRef } from '@angular/core/testing'; -import { MockLocationStrategy } from '@angular/common/testing'; +import { SpyLocation } from '@angular/common/testing'; import { TestComponentBuilder, ComponentFixture -} from '@angular/compiler/testing'; +} from '@angular/core/testing'; import { AppComponent } from '../app.component'; import { PhoneListComponent } from './phone-list.component'; @@ -27,6 +29,11 @@ import { Phone, PhoneData } from '../core/phone/phone.service'; // #enddocregion routestuff +@Directive({ + selector: '[routerLink]', + inputs: ['routeParams: routerLink', 'target: target'] +}) +class RouterLinkMock {} class MockPhone extends Phone { query(): Observable { @@ -41,19 +48,22 @@ describe('PhoneList', () => { // #docregion routestuff - beforeEachProviders(() => [ - { provide: Phone, useClass: MockPhone}, - HTTP_PROVIDERS, - ROUTER_PROVIDERS, - { provide: ApplicationRef, useClass: MockApplicationRef }, + addProviders([ + RouteRegistry, + { provide: Router, useClass: RootRouter }, { provide: ROUTER_PRIMARY_COMPONENT, useValue: AppComponent }, - { provide: LocationStrategy, useClass: MockLocationStrategy}, + { provide: Location, useClass: SpyLocation}, + { provide: Phone, useClass: MockPhone}, + HTTP_PROVIDERS ]); // #enddocregion routestuff it('should create "phones" model with 2 phones fetched from xhr', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb.createAsync(PhoneListComponent) + return tcb + .overrideDirective(AppComponent, RouterLink, RouterLinkMock) + .overrideDirective(PhoneListComponent, RouterLink, RouterLinkMock) + .createAsync(PhoneListComponent) .then((fixture: ComponentFixture) => { fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement; @@ -69,7 +79,10 @@ describe('PhoneList', () => { it('should set the default value of orderProp model', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { - return tcb.createAsync(PhoneListComponent) + return tcb + .overrideDirective(AppComponent, RouterLink, RouterLinkMock) + .overrideDirective(PhoneListComponent, RouterLink, RouterLinkMock) + .createAsync(PhoneListComponent) .then((fixture: ComponentFixture) => { fixture.detectChanges(); let compiled = fixture.debugElement.nativeElement; From 94f560950652acce39f7a4c968a406c00496d9ea Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Thu, 30 Jun 2016 20:17:41 +0200 Subject: [PATCH 11/20] add rc4 versions --- public/docs/_examples/package.json | 1 - .../_examples/quickstart/js/package.1.json | 20 +++++++++---------- .../_examples/quickstart/ts/package.1.json | 20 +++++++++---------- .../_examples/webpack/ts/package.webpack.json | 14 ++++++------- 4 files changed, 27 insertions(+), 28 deletions(-) diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 6df95afdc8..f6d67f4ce9 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -25,7 +25,6 @@ "author": "", "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.4", "@angular/compiler": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index b08bcf793a..1a35d354fc 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -7,16 +7,16 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.3", - "@angular/compiler": "2.0.0-rc.3", - "@angular/core": "2.0.0-rc.3", - "@angular/forms": "0.1.1", - "@angular/http": "2.0.0-rc.3", - "@angular/platform-browser": "2.0.0-rc.3", - "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/router": "3.0.0-alpha.8", - "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.3", + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/forms": "0.2.0", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/router": "3.0.0-alpha.8", + "@angular/router-deprecated": "2.0.0-rc.2", + "@angular/upgrade": "2.0.0-rc.4", "core-js": "^2.4.0", "reflect-metadata": "0.1.3", diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index 032eb9c25c..f46677d48b 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -11,16 +11,16 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "2.0.0-rc.3", - "@angular/compiler": "2.0.0-rc.3", - "@angular/core": "2.0.0-rc.3", - "@angular/forms": "0.1.1", - "@angular/http": "2.0.0-rc.3", - "@angular/platform-browser": "2.0.0-rc.3", - "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/router": "3.0.0-alpha.8", - "@angular/router-deprecated": "2.0.0-rc.2", - "@angular/upgrade": "2.0.0-rc.3", + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/forms": "0.2.0", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/router": "3.0.0-alpha.8", + "@angular/router-deprecated": "2.0.0-rc.2", + "@angular/upgrade": "2.0.0-rc.4", "systemjs": "0.19.27", "core-js": "^2.4.0", diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index cc5948be7f..cc9a900d68 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -10,13 +10,13 @@ }, "license": "MIT", "dependencies": { - "@angular/common": "2.0.0-rc.3", - "@angular/compiler": "2.0.0-rc.3", - "@angular/core": "2.0.0-rc.3", - "@angular/forms": "0.1.1", - "@angular/http": "2.0.0-rc.3", - "@angular/platform-browser": "2.0.0-rc.3", - "@angular/platform-browser-dynamic": "2.0.0-rc.3", + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/forms": "0.2.0", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "3.0.0-alpha.8", "core-js": "^2.4.0", "reflect-metadata": "0.1.2", From 6a34dce5e05152c80615adf8e439738c2dff2d30 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Thu, 30 Jun 2016 20:27:51 +0200 Subject: [PATCH 12/20] remove linting for spec file --- .../ts/app/phone-list/phone-list.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts index 75ebdfd12e..3d6cd93b15 100644 --- a/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts +++ b/public/docs/_examples/upgrade-phonecat-3-final/ts/app/phone-list/phone-list.component.spec.ts @@ -1,3 +1,4 @@ +/* tslint:disable */ // #docregion routestuff import { Directive } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; From 2379e8b86e5fed9f64cb8fa29bddf75e8defe754 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Thu, 30 Jun 2016 20:36:17 +0200 Subject: [PATCH 13/20] update plunkers versions --- public/docs/_examples/systemjs.config.plunker.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js index a9ec367c33..9def29f676 100644 --- a/public/docs/_examples/systemjs.config.plunker.js +++ b/public/docs/_examples/systemjs.config.plunker.js @@ -5,9 +5,9 @@ */ (function(global) { - var ngVer = '@2.0.0-rc.3'; // lock in the angular package version; do not let it float to current! - var routerVer = '@3.0.0-alpha.7'; // lock router version - var formsVer = '@0.1.1'; // lock forms version + var ngVer = '@2.0.0-rc.4'; // lock in the angular package version; do not let it float to current! + var routerVer = '@3.0.0-alpha.8'; // lock router version + var formsVer = '@0.2.0'; // lock forms version var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides //map tells the System loader where to look for things From 10de4c5753f10bae31f695b59375d48473923ff3 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Thu, 30 Jun 2016 20:59:58 +0200 Subject: [PATCH 14/20] update in memory web api --- public/docs/_examples/quickstart/js/package.1.json | 2 +- public/docs/_examples/quickstart/ts/package.1.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index 1a35d354fc..c0fb64d225 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -23,7 +23,7 @@ "rxjs": "5.0.0-beta.6", "zone.js": "0.6.12", - "angular2-in-memory-web-api": "0.0.13", + "angular2-in-memory-web-api": "0.0.14", "bootstrap": "^3.3.6" }, "devDependencies": { diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index f46677d48b..7dbe06a78f 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -28,7 +28,7 @@ "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", - "angular2-in-memory-web-api": "0.0.13", + "angular2-in-memory-web-api": "0.0.14", "bootstrap": "^3.3.6" }, "devDependencies": { From 909f230cc72677751f3bed55c8373907f7c52110 Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Thu, 30 Jun 2016 21:23:12 +0200 Subject: [PATCH 15/20] update router to beta.1 --- public/docs/_examples/quickstart/js/package.1.json | 2 +- public/docs/_examples/quickstart/ts/package.1.json | 2 +- public/docs/_examples/systemjs.config.plunker.js | 2 +- public/docs/_examples/webpack/ts/package.webpack.json | 2 +- public/docs/ts/latest/guide/router.jade | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json index c0fb64d225..358034f15e 100644 --- a/public/docs/_examples/quickstart/js/package.1.json +++ b/public/docs/_examples/quickstart/js/package.1.json @@ -14,7 +14,7 @@ "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-alpha.8", + "@angular/router": "3.0.0-beta.1", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.4", diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json index 7dbe06a78f..ef5d180619 100644 --- a/public/docs/_examples/quickstart/ts/package.1.json +++ b/public/docs/_examples/quickstart/ts/package.1.json @@ -18,7 +18,7 @@ "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-alpha.8", + "@angular/router": "3.0.0-beta.1", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.4", diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/systemjs.config.plunker.js index 9def29f676..fbf84a69ba 100644 --- a/public/docs/_examples/systemjs.config.plunker.js +++ b/public/docs/_examples/systemjs.config.plunker.js @@ -6,7 +6,7 @@ (function(global) { var ngVer = '@2.0.0-rc.4'; // lock in the angular package version; do not let it float to current! - var routerVer = '@3.0.0-alpha.8'; // lock router version + var routerVer = '@3.0.0-beta.1'; // lock router version var formsVer = '@0.2.0'; // lock forms version var routerDeprecatedVer = '@2.0.0-rc.2'; // temporarily until we update all the guides diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index cc9a900d68..8d7fa67496 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -17,7 +17,7 @@ "@angular/http": "2.0.0-rc.4", "@angular/platform-browser": "2.0.0-rc.4", "@angular/platform-browser-dynamic": "2.0.0-rc.4", - "@angular/router": "3.0.0-alpha.8", + "@angular/router": "3.0.0-beta.1", "core-js": "^2.4.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.6", diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 399663eca3..f4a50cd506 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -2,7 +2,7 @@ include ../_util-fns .alert.is-important :marked - The Component Router is in alpha release. This is the recommended Angular 2 router and supersedes + The Component Router is in beta release. This is the recommended Angular 2 router and supersedes the earlier *deprecated beta* and *v2* routers. :marked From 705d8c50fd012192677fd6fcf01d9b4623b3e488 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Thu, 30 Jun 2016 07:21:55 -0700 Subject: [PATCH 16/20] docs(security): proofread prose, app now shows good and bad - App now shows how Angular handles untrusted URLs and resources - E2e test covered new functionality - Copyedits to prose - Updated provider expressions to use latest syntax The original security feature tracker: https://github.com/angular/angular/issues/8511 --- public/docs/_examples/security/e2e-spec.ts | 19 +++++++--- .../security/ts/app/app.component.ts | 4 +-- .../ts/app/bypass-security.component.html | 11 ++++-- .../ts/app/bypass-security.component.ts | 19 ++++++---- .../ts/app/inner-html-binding.component.ts | 1 - public/docs/_examples/security/ts/index.html | 4 +-- public/docs/ts/latest/guide/security.jade | 35 ++++++++++--------- 7 files changed, 58 insertions(+), 35 deletions(-) diff --git a/public/docs/_examples/security/e2e-spec.ts b/public/docs/_examples/security/e2e-spec.ts index 410f1428e1..d1a373a781 100644 --- a/public/docs/_examples/security/e2e-spec.ts +++ b/public/docs/_examples/security/e2e-spec.ts @@ -1,7 +1,8 @@ /// 'use strict'; + describe('Security E2E Tests', () => { - beforeAll(function() { browser.get(''); }); + beforeAll(() => browser.get('')); it('sanitizes innerHTML', () => { let interpolated = element(By.className('e2e-inner-html-interpolated')); @@ -13,13 +14,23 @@ describe('Security E2E Tests', () => { expect(bold.getText()).toContain('Syntax'); }); + it('escapes untrusted URLs', () => { + let untrustedUrl = element(By.className('e2e-dangerous-url')); + expect(untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/); + }); + it('binds trusted URLs', () => { - let dangerousUrl = element(By.className('e2e-dangerous-url')); - expect(dangerousUrl.getAttribute('href')).toMatch(/^javascript:alert/); + let trustedUrl = element(By.className('e2e-trusted-url')); + expect(trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/); + }); + + it('escapes untrusted resource URLs', () => { + let iframe = element(By.className('e2e-iframe-untrusted-src')); + expect(iframe.getAttribute('src')).toBe(''); }); it('binds trusted resource URLs', () => { - let iframe = element(By.className('e2e-iframe')); + let iframe = element(By.className('e2e-iframe-trusted-src')); expect(iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//); }); }); diff --git a/public/docs/_examples/security/ts/app/app.component.ts b/public/docs/_examples/security/ts/app/app.component.ts index 153e6b9e49..a2fc7e7320 100644 --- a/public/docs/_examples/security/ts/app/app.component.ts +++ b/public/docs/_examples/security/ts/app/app.component.ts @@ -5,7 +5,7 @@ import { BypassSecurityComponent } from './bypass-security.component'; import { InnerHtmlBindingComponent } from './inner-html-binding.component'; @Component({ - selector: 'app-root', + selector: 'my-app', template: `

Security

@@ -14,7 +14,7 @@ import { InnerHtmlBindingComponent } from './inner-html-binding.component'; directives: [ BypassSecurityComponent, InnerHtmlBindingComponent, - ], + ] }) export class AppComponent { } diff --git a/public/docs/_examples/security/ts/app/bypass-security.component.html b/public/docs/_examples/security/ts/app/bypass-security.component.html index 75b7734dd4..1b0a9d0c0e 100644 --- a/public/docs/_examples/security/ts/app/bypass-security.component.html +++ b/public/docs/_examples/security/ts/app/bypass-security.component.html @@ -2,14 +2,19 @@

Bypass Security Component

-

A dangerous URL:

-

Click me.

+

A untrusted URL:

+

Click me

+

A trusted URL:

+

Click me

Resource URL:

- +

Trusted:

+ +

Untrusted:

+ diff --git a/public/docs/_examples/security/ts/app/bypass-security.component.ts b/public/docs/_examples/security/ts/app/bypass-security.component.ts index 6a5f350d28..a18d4251a5 100644 --- a/public/docs/_examples/security/ts/app/bypass-security.component.ts +++ b/public/docs/_examples/security/ts/app/bypass-security.component.ts @@ -8,14 +8,18 @@ import { DomSanitizationService, SafeResourceUrl, SafeUrl } from '@angular/platf templateUrl: 'app/bypass-security.component.html', }) export class BypassSecurityComponent { - dangerousUrl: SafeUrl; + dangerousUrl: string; + trustedUrl: SafeUrl; + dangerousVideoUrl: string; videoUrl: SafeResourceUrl; // #docregion trust-url constructor(private sanitizer: DomSanitizationService) { - // javascript: URLs are dangerous if attacker controlled. Angular sanitizes them in data - // binding, but we can explicitly tell Angular to trust this value: - this.dangerousUrl = sanitizer.bypassSecurityTrustUrl('javascript:alert("Hi there")'); + // javascript: URLs are dangerous if attacker controlled. + // Angular sanitizes them in data binding, but we can + // explicitly tell Angular to trust this value: + this.dangerousUrl = 'javascript:alert("Hi there")'; + this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl); // #enddocregion trust-url this.updateVideoUrl('PUBnlbjZFAI'); } @@ -23,11 +27,12 @@ export class BypassSecurityComponent { // #docregion trust-video-url updateVideoUrl(id: string) { // Appending an ID to a YouTube URL is safe. - // Always make sure to construct SafeValue objects as close as possible to the input data, so + // Always make sure to construct SafeValue objects as + // close as possible to the input data, so // that it's easier to check if the value is safe. + this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id; this.videoUrl = - this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + id); + this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl); } // #enddocregion trust-video-url } -// #enddocregion diff --git a/public/docs/_examples/security/ts/app/inner-html-binding.component.ts b/public/docs/_examples/security/ts/app/inner-html-binding.component.ts index 95a9f55979..0419e5b324 100644 --- a/public/docs/_examples/security/ts/app/inner-html-binding.component.ts +++ b/public/docs/_examples/security/ts/app/inner-html-binding.component.ts @@ -11,4 +11,3 @@ export class InnerHtmlBindingComponent { // E.g. a user/attacker controlled value from a URL. htmlSnippet = 'Template Syntax'; } -// #enddocregion inner-html-controller diff --git a/public/docs/_examples/security/ts/index.html b/public/docs/_examples/security/ts/index.html index b665a8bc6f..16eeeb2b2a 100644 --- a/public/docs/_examples/security/ts/index.html +++ b/public/docs/_examples/security/ts/index.html @@ -1,5 +1,5 @@ - + Angular Content Security @@ -21,6 +21,6 @@ - Loading... + Loading... diff --git a/public/docs/ts/latest/guide/security.jade b/public/docs/ts/latest/guide/security.jade index c83e07238b..701f10d4e6 100644 --- a/public/docs/ts/latest/guide/security.jade +++ b/public/docs/ts/latest/guide/security.jade @@ -1,7 +1,7 @@ block includes include ../_util-fns :marked - Web application security has many aspects. This documentation describes Angular's built in + Web application security has many aspects. This chapter describes Angular's built in protections against common web application vulnerabilities and attacks, such as Cross Site Scripting Attacks. It does not cover application level security, such as authentication (_Who is this user?_) or authorization (_What can this user do?_). @@ -50,7 +50,7 @@ h2#best-practices Best Practices h2#xss Preventing Cross-Site Scripting (XSS) :marked [Cross-Site Scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) enables attackers - to inject malicious code into web pages. Such code can then for example steal user's data (in + to inject malicious code into web pages. Such code can then, for example, steal user's data (in particular their login data), or perform actions impersonating the user. This is one of the most common attacks on the web. @@ -81,10 +81,10 @@ h2#xss Preventing Cross-Site Scripting (XSS) Angular defines four security contexts: HTML, style, URL, and resource URL. - * HTML is used when interpreting a value as HTML, e.g. when binding to `innerHtml` + * HTML is used when interpreting a value as HTML, e.g., when binding to `innerHtml` * Style is used when binding CSS into the `style` property * URL is used for URL properties such as `` - * Resource URLs are URLs that will be loaded and executed as code, e.g. in `