diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade index a97696820b..f24f3f891f 100644 --- a/public/_includes/_util-fns.jade +++ b/public/_includes/_util-fns.jade @@ -23,6 +23,14 @@ // we will almost certainly never go 10 or 11 deep but ... - var pathToFrags = "../../../../../../../../../../../".substr(0, (currentPath.length-2)*3) + "_fragments/"; +mixin makeExample(path, fileName, title) + - var extn = getExtn(fileName); + - var extPath = pathToFrags + path + "/"; + if (title) + .example-title #{title} + code-example(language="#{extn}" format="linenums") + != getFrag(extPath + fileName + ".md") + mixin makeTabs(path, fileNames, tabNames) - fileNames = fileNames.split(","); - tabNames = tabNames.split(",") @@ -32,7 +40,6 @@ mixin makeTabs(path, fileNames, tabNames) - var tabName = tabNames[index].trim(); - var fileName = fileNames[index].trim(); - var extn = getExtn(fileName); - // - var extPath = pathToFrags + (path.length ? path + "/" : ""); - var extPath = pathToFrags + path + "/"; code-pane(language="#{extn}" name="#{tabName}" format="linenums") != getFrag(extPath + fileName + ".md") diff --git a/public/docs/js/latest/guide/setupAlt.jade b/public/docs/js/latest/guide/setupAlt.jade new file mode 100644 index 0000000000..f23bdde63d --- /dev/null +++ b/public/docs/js/latest/guide/setupAlt.jade @@ -0,0 +1,120 @@ +include ../../../../_includes/_util-fns + +.l-main-section + :markdown + ## Install Angular2 + There are four steps to create any Angular app: + + 1. Create an entry point HTML file where users will start + 1. Load the Angular library at the top of the file + 1. Make a root component for your application + 1. Bootstrap Angular + + You can edit and test out your apps by serving local files with a web server. Follow the steps in the quickstart 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') diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index 1bef398233..1593439cdd 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -2,20 +2,13 @@ * BASE FILES * */ + @import 'options'; - -@import 'base/colors'; -@import 'base/reset'; -@import 'base/mixins'; -@import 'base/type'; - - @import 'state'; @import 'layout/layout'; @import 'theme'; -@import 'angular'; -@import "translate"; -@import "blog"; +@import 'base/reset'; +@import 'base/type'; /* @@ -23,8 +16,6 @@ * */ -@import 'module/announcement-bar'; -@import 'module/badge'; @import 'module/main-nav'; @import 'module/side-nav'; @import 'module/jump-nav'; @@ -34,11 +25,8 @@ @import 'module/banner'; @import 'module/cta-bar'; @import 'module/buttons'; -@import 'module/form'; @import 'module/table'; @import 'module/code'; -@import 'module/code-shell'; -@import 'module/heading-code'; @import 'module/code-box'; @import 'module/sticker'; @import 'module/bio-card'; @@ -46,27 +34,14 @@ @import 'module/alert'; @import 'module/callout'; @import 'module/images'; -@import 'module/lists'; @import 'module/card'; @import 'module/hover-card'; @import 'module/modal'; -@import 'module/search'; @import 'module/shadow'; @import 'module/showcase'; @import 'module/statement'; -@import 'module/symbol'; -@import 'module/api'; -@import 'module/cheatsheet'; -@import 'module/filetree'; -@import 'module/support'; -@import 'module/article-card'; -@import 'module/style-guide'; -@import 'module/resources'; -@import 'module/home-promos'; -@import 'module/press-kit'; -@import 'module/features'; -@import 'module/docs-landing'; -@import 'module/embedded-plunker'; +@import 'module/example-title'; + /* * PRINT STYLES diff --git a/public/resources/css/module/_example-title.scss b/public/resources/css/module/_example-title.scss new file mode 100644 index 0000000000..b605c8c4c4 --- /dev/null +++ b/public/resources/css/module/_example-title.scss @@ -0,0 +1,12 @@ +.example-title { + @extend .alert; + + color: $snow; + padding: 0 ($unit * 2); + font-size: 14px; + font-weight: 500; + border-color: $blueberry; + background: $blueberry; + // temporary hack to remove space between example title and code-example + margin-bottom: -18px; +} \ No newline at end of file