From 9922372447f9ad600b1448769866c9ee6c21a5b8 Mon Sep 17 00:00:00 2001 From: Jay Traband Date: Thu, 17 Sep 2015 17:04:58 -0700 Subject: [PATCH] introducing 'example' inline tag --- .../api-builder/angular.io-package/index.js | 1 + .../rendering/indentNonMixin.js | 49 +++++++ .../templates/class.template.html | 6 +- .../templates/function.template.html | 2 +- .../templates/var.template.html | 2 +- public/api-builder/links-package/index.js | 4 +- .../links-package/inline-tag-defs/example.js | 33 +++++ public/docs/_layout.jade | 4 +- public/docs/js/latest/guide/setupAlt.jade | 120 ------------------ 9 files changed, 93 insertions(+), 128 deletions(-) create mode 100644 public/api-builder/angular.io-package/rendering/indentNonMixin.js create mode 100644 public/api-builder/links-package/inline-tag-defs/example.js delete mode 100644 public/docs/js/latest/guide/setupAlt.jade diff --git a/public/api-builder/angular.io-package/index.js b/public/api-builder/angular.io-package/index.js index cdfeb02b12..34e19be75b 100644 --- a/public/api-builder/angular.io-package/index.js +++ b/public/api-builder/angular.io-package/index.js @@ -74,6 +74,7 @@ module.exports = new Package('angular.io', [basePackage]) .config(function(templateEngine, getInjectables) { templateEngine.filters = templateEngine.filters.concat(getInjectables([require('./rendering/trimBlankLines')])); + templateEngine.filters = templateEngine.filters.concat(getInjectables([require('./rendering/indentNonMixin')])); }); diff --git a/public/api-builder/angular.io-package/rendering/indentNonMixin.js b/public/api-builder/angular.io-package/rendering/indentNonMixin.js new file mode 100644 index 0000000000..3748b772cd --- /dev/null +++ b/public/api-builder/angular.io-package/rendering/indentNonMixin.js @@ -0,0 +1,49 @@ +module.exports = function(encodeCodeBlock) { + var MIXIN_PATTERN = /\S*\+\S*\(.*/; + return { + name: 'indentNonMixin', + process: function (str, width, indentfirst) { + str = normalize(str, ''); + + if (str === '') return ''; + + width = width || 4; + var res = ''; + var lines = str.split('\n'); + var sp = repeat(' ', width); + var spMixin = repeat(' ', width - 2); + + for (var i = 0; i < lines.length; i++) { + if (i === 0 && !indentfirst) { + res += lines[i] + '\n'; + } + else { + // indent lines that match mixin pattern by 2 less. + if (lines[i].indexOf('{@example') != -1) { + res += spMixin + lines[i] + '\n'; + } else { + res += sp + lines[i] + '\n'; + } + } + } + + return res; + } + }; + + function normalize(value, defaultValue) { + if(value === null || value === undefined || value === false) { + return defaultValue; + } + return value; + } + + function repeat(char_, n) { + var str = ''; + for(var i=0; iquickstart to get Typescript setup. - - When you're serving local files, edit and save them and start a web server that serves files in that directory. If you have Python installed, you can run a basic HTTP server from the root of your code directory with: - - pre.prettyprint.lang-bash - code python -m SimpleHTTPServer 8000 - -.callout.is-helpful - header Typescript vs ES5 - :markdown - Although we work through the examples in TypeScript, you can also use - regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript - version. Note that in ES5, you'd want to name your files `.js` rather than - `.ts`. - -.l-main-section - :markdown - ## Create an entry point - Create an `index.html` file and add the Angular library tags and a `main.ts` file where - you'll build your first component. - - In the ``, add an element called `` that will be the root of your - application. - - The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version. - - +makeTabs('gettingstarted', 'ts/index.html,js/index.html', 'TypeScript, JavaScript') - -.callout.is-helpful - header Don't use code.angularjs.org in a live app - :markdown - This example serves the Angular library from code.angularjs.org. This is - fine for examples, but you'd want to serve it yourself or use a CDN for real deployment. - -.l-main-section - :markdown - ## Set up the starting component - - In `main.ts`, create a class called `AppComponent`, configure it to bind to the - `` element in `index.html`, and call Angular's `bootstrap()` to kick - it all off like this: - - +makeTabs("gettingstarted", "ts/main.ts, js/main.js", "TypeScript, JavaScript") - - .callout.is-helpful - header Annotations vs Decorators - :markdown - If you are transpiling using a tool that translates the `@` symbols to - annotations (for example Traceur), you will need to import the annotation versions of - Component and View. That can be easily achieved using - `import {ComponentAnnotation as Component, ViewAnnotation as View}`. - -.l-main-section - :markdown - ## Run it! - - Open `index.html` through your web server and you should see: - - figure.image-display - img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App") - -.l-main-section - :markdown - ## Explanations - - This basic Angular app contains the structure for any app you'll build. - - .l-sub-section - :markdown - ### It's all a tree - - You can think of Angular apps as a tree of components. This root component we've been talking about acts as the top - level container for the rest of your application. You've named this one `AppComponent`, but there's - nothing special about the name and you can use whatever makes sense to you. - - The root component's job is to give a location in the `index.html` file where your application will - render through its element, in this case ``. There is also nothing special about this - element name; you can pick it as you like. - - The root component loads the initial template for the application that will load other components to perform - whatever functions your application needs - menu bars, views, forms, etc. We'll walk through examples of all of - these in the following pages. - - .l-sub-section - :markdown - ### @Component and @View annotations - - A component annotation describes details about the component. An annotation can be identified by its at-sign (`@`). - - The `@Component` annotation defines the HTML tag for the component by specifying the component's CSS selector. - - The `@View` annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a templateUrl property and give it the path to the HTML file. - - .l-sub-section - :markdown - ### import vs. window.angular - - The main difference between the ES5 and TypeScript versions is the loading of modules. - - **TypeScript**
- TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app. - - **Javascript**
- In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not. - - +makeTabs('gettingstarted', 'ts/main-import.ts', 'TypeScript') - - +makeExample('gettingstarted/js', 'main-bootstrap.js', 'JavaScript')