From ce6c6455015a36a0c5a4412cffb369a046562644 Mon Sep 17 00:00:00 2001 From: Patrice Chalin Date: Wed, 4 May 2016 05:18:38 -0700 Subject: [PATCH] docs(dev guide): structural-directives - ts minor edits, dart first versiondocs(dev guide): structural-directives - ts minor edits, dart first version (#1277) Copyedits and other minor edits for TS + first version of the chapter for Dart --- public/_includes/_util-fns.jade | 2 + public/docs/dart/latest/_util-fns.jade | 24 +++++++----- .../latest/guide/structural-directives.jade | 18 ++++----- .../latest/guide/structural-directives.jade | 39 ++++++++++--------- 4 files changed, 47 insertions(+), 36 deletions(-) diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade index c4e6e5bb87..ced19f6e67 100644 --- a/public/_includes/_util-fns.jade +++ b/public/_includes/_util-fns.jade @@ -23,8 +23,10 @@ mixin makeExample(_filePath, region, _title, stylePatterns) mixin makeTabs(filePaths, regions, tabNames, stylePatterns) - filePaths = strSplit(filePaths); + - if (adjustExamplePath) filePaths = filePaths.map(adjustExamplePath); - regions = strSplit(regions, filePaths.length); - tabNames = strSplit(tabNames, filePaths.length); + - if (adjustExampleTitle) tabNames = tabNames.map(adjustExampleTitle); code-tabs each filePath,index in filePaths diff --git a/public/docs/dart/latest/_util-fns.jade b/public/docs/dart/latest/_util-fns.jade index 6af691a7bd..fda23922c5 100644 --- a/public/docs/dart/latest/_util-fns.jade +++ b/public/docs/dart/latest/_util-fns.jade @@ -5,11 +5,13 @@ mixin liveExLinks(name) [Run the live example](https://angular-examples.github.io/#{name}) | [View its source code](https://github.com/angular-examples/#{name}) -- var adjustExamplePath = function(path) { +- var adjustExamplePath = function(_path) { +- if(!_path) return _path; +- var path = _path.trim(); - var folder = getFolder(path); - var extn = getExtn(path); - // if(extn == 'dart') return path; -- var baseName = getBaseFileName(path); +- var baseName = getBaseFileName(path) || path; // TODO: have getBaseFileName() return path - var baseNameNoExt = baseName.substr(0,baseName.length - (extn.length + 1)); - var inWebFolder = baseNameNoExt.match(/^(main|index)$/); - // Adjust the folder path, e.g., ts -> dart @@ -18,15 +20,19 @@ mixin liveExLinks(name) - baseNameNoExt = baseNameNoExt.replace(/[\-\.]/g, '_'); - // Adjust the file extension - if(extn == 'ts') extn = 'dart'; -- return folder + '/' + baseNameNoExt + '.' + extn; +- return (folder ? folder + '/' : '') + baseNameNoExt + (extn ? '.' + extn : ''); - }; -- var adjustExampleTitle = function(title) { -- // Assume title is a path if it ends with an extension like '.foo'. -- if(title && title.match(/\.\w+$/) && adjustExamplePath) { -- var isAbsolutePath = title.match(/^\//); -- title = adjustExamplePath(title); -- if(!isAbsolutePath && title.match(/^\//)) title = title.substring(1); +- var adjustExampleTitle = function(_title) { +- if(!_title || !adjustExamplePath) return _title; +- var title = _title.trim(); +- // Assume title is a path if it ends with an extension like '.foo', +- // optionally followed by '(excerpt)' with or without parentheses. +- var matches = title.match(/(.*\.\w+)($|\s*\(?excerpt\)?$)/); +- if(matches && matches.length == 3) { +- // e.g. matches == ['abc.ts (excerpt)', 'abc.ts', ' (excerpt)'] +- var path = adjustExamplePath(matches[1]); +- title = path + matches[2]; - } - return title; - } diff --git a/public/docs/dart/latest/guide/structural-directives.jade b/public/docs/dart/latest/guide/structural-directives.jade index 98544357aa..b8b9215bcd 100644 --- a/public/docs/dart/latest/guide/structural-directives.jade +++ b/public/docs/dart/latest/guide/structural-directives.jade @@ -1,12 +1,12 @@ -include ../_util-fns +extends ../../../ts/latest/guide/structural-directives.jade -:marked - We're working on the Dart version of this chapter. - In the meantime, please see these resources: +block includes + include ../_util-fns - * [Structural Directives](/docs/ts/latest/guide/structural-directives.html): - The TypeScript version of this chapter +block liveExample + +liveExLinks('structural-directives') - * [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/structural-directives/dart): - A preliminary version of the example code that will appear in this chapter - +block unless-intro + :marked + Creating a directive is similar to creating a component. + Here is how we begin: diff --git a/public/docs/ts/latest/guide/structural-directives.jade b/public/docs/ts/latest/guide/structural-directives.jade index ab53753ea8..d58afd20a8 100644 --- a/public/docs/ts/latest/guide/structural-directives.jade +++ b/public/docs/ts/latest/guide/structural-directives.jade @@ -1,4 +1,5 @@ -include ../_util-fns +block includes + include ../_util-fns :marked One of the defining features of a single page application is its manipulation @@ -9,12 +10,14 @@ include ../_util-fns In this chapter we will - [learn what structural directives are](#definition) - - [study *ngIf*](#ng-if) + - [study *ngIf*](#ngIf) - [discover the <template> element](#template) - [understand the asterisk (\*) in **ngFor*](#asterisk) - [write our own structural directive](#unless) - [Live example](/resources/live-examples/structural-directives/ts/plnkr.html) +block liveExample + :marked + [Live example](/resources/live-examples/structural-directives/ts/plnkr.html) .l-main-section @@ -42,7 +45,7 @@ include ../_util-fns +makeExample('structural-directives/ts/app/structural-directives.component.html', 'structural-directives')(format=".") - + .l-main-section :marked ## NgIf Case Study @@ -163,7 +166,7 @@ figure.image-display We can confirm these effects by wrapping the middle "hip" of the phrase "Hip! Hip! Hooray!" within a `