// STEP 1 - Install Angular ########################## .l-main-section h2#section-install-angular 1. Install Angular p. Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular. The following setup is for those who want to try out Angular while it is in alpha. p. For the sake of this quickstart we recommend using the es6-shim GitHub repository. This repository will provide a faster start. es6-shim includes Angular and dependencies to compile ES6 in incompatible browsers. p Clone the repository inside of aleady existing project. pre.prettyprint.linenums code git clone https://github.com/davideast/concious.git es6-shim .l-sub-section h3 A word on ES6 p. Angular builds on top of ES6, the new specification of the JavaScript language. Not all ES6 features are available in all browsers. The following es6-shim repository allows you to use ES6 in the browser today. p. Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here. p. The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project. // STEP 2 - Import Angular ########################## .l-main-section h2#section-transpile 2. Import Angular p. This quickstart will consist of two files, an index.html and a app.es6. Both of these files will be at the root of the project. The .es6 extension signifies that the file uses ES6 syntax. Using the ES6 module syntax you can import the required modules from Angular2. pre.prettyprint.linenums code import {Component, Template, bootstrap} from 'angular2/angular2'; p The above import statement will import three modules from Angular. These modules load at runtime. // STEP 3 - Create a component ########################## .l-main-section h2#section-angular-create-account 3. Create a component p. Components are custom HTML elements. Angular uses components to empower HTML. Components structure and repre.prettyprint.linenumssent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app, <my-app></my-app>. p A component consists of two parts; the annotation section and the component controller. pre.prettyprint.linenums code. // app.es6 import {Component, Template, bootstrap} from 'angular2/angular2'; // Annotation Section @Component({ selector: 'my-app' }) @Template({ inline: ` <h1>Hello {{ name }}</h1> ` }) // Component Controller class MyAppComponent { constructor() { this.name = "Alice"; } } // Render the app to the page bootstrap(MyAppComponent); .l-sub-section h3 Component Annotations p. A component annotation provides meta-data about the component. An annotation can always identified by its at-sign — @. p. The @Component annotation defines the HTML tag for the component. The @Component annotation is imported in the first line of app.es6. The selector property specifies the tag. The selector property is a CSS selector. p. The @Template annotation defines the template to apply to the The @Template annotation is imported in the first line of app.es6. component. This component uses an inline template, but external templates are available as well. To use an external template specify a url property and give it the path to the html file. pre.prettyprint.linenums code. @Component({ selector: 'app' // Defines the <my-app></my-app> tag }) @Template({ inline: `<h1>Hello {{ name }}</h1>` // Defines the inline template for the component }) p. The component created above has a HTML tag of <app></app> and a template of <h1>Hello {{ name }}</h1>. .l-sub-section h3 Component Controller p. The component controller is the backing of the component's template. A component controller uses ES6 class syntax. pre.prettyprint.linenums code | class MyAppComponent { | constructor() { | this.name = "Alice"; | } | } p. Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller. p. The template above binds to a name property through the {{ }} syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of {{ name }}. // STEP 4 - Bootstrap ########################## .l-main-section h2#section-transpile 4. Bootstrap p The last step to load the component on the page. .l-sub-section h3 The bootstrap function p. Angular provides a bootstrap function that renders a component to the page. The bootstrap function takes a component as a parameter. Any child components inside of the parent component will render as well. pre.prettyprint.linenums code bootstrap(MyAppComponent); // STEP 5 - Declare the HTML ########################## .l-main-section h2#section-angular-create-account 5. Declare the HTML p. Create an index.html file at the root of the project. Include the es6-shim.js file in the head tag. Now, declare the app component the body. The es6-shim must load before any application code. pre.prettyprint.linenums code. <!-- index.html --> <html> <head> <title>Angular 2 Quickstart</title> <script src="/es6-shim/dist/es6-shim.js"></script> </head> <body> <!-- The app component created in app.es6 --> <my-app></my-app> </body> </html> .l-sub-section h3 Load the component module p. The last step is to load the module for the my-app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers. p. To load the needed modules, System needs to know where to load the files from. The paths property in System specifies the location of the files. p Tell System about three paths: ol li Angular - The Angular framework. li Runtime assertions - Optional assertions for runtime type checking. li The my-app component created above - The component to display on the page. pre.prettyprint.linenums code. <!-- index.html --> <html> <head> <title>Angular 2 Quickstart</title> <script src="/es6-shim/dist/es6-shim.js"></script> </head> <body> <!-- The my-app component created in app.es6 --> <my-app></my-app> <script> // Rewrite the paths to load the files System.paths = { 'angular2/*':'/es6-shim/angular2/*.js', // Angular 'rtts_assert/*': '/es6-shim/rtts_assert/*.js', //Runtime assertions 'app': 'app.es6' // The my-app component }; // Kick off the application System.import('app'); </script> </body> </html> p Run the root of your project on a local server. // WHAT'S NEXT... ########################## .l-main-section h2#section-transpile Great Job! Next Step... p Learn some template syntax for extra-credit.