https://github.com/softchris/angular2

https://github.com/softchris/angular2

Last synced: 17 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/softchris/angular2
• Owner: softchris
• Created: 2015-08-24T16:31:37.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-24T16:35:25.000Z (about 9 years ago)
• Last Synced: 2024-10-07T13:21:37.352Z (about 1 month ago)
• Language: JavaScript
• Size: 141 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Angular 2

## Installation

Fetch type definitions for compiler and editor

**tsd** package manager

1) Install **tsd**

	npm install -g tsd@^0.6.0

2) Install type definitions

	tsd install angular2 es6-promise rx rx-lite

3) create **app.ts** and **index.html**

4) install typescript

	npm install -g typescript@^1.5.0-beta

5) compile typescript to es5

	tsc.cmd --watch -m commonjs -t es5 --emitDecoratorMetadata --experimentalDecorators app.ts

## Your first app

app.ts

	import {Component, View, bootstrap} from 'angular2/angular2';

	

	// Annotation section

	@Component({

	  selector: 'my-app'

	})

	@View({

	  template: '
Hello {{ name }}
'

	})

	// Component controller

	class MyAppComponent {

	  name: string;

	  constructor() {

	    this.name = 'Some name';

	  }

	}

	

	bootstrap(MyAppComponent);


**Component** and **View** are annotations that the MyAppComponent class will be annotated with.

app.html

	

	  

	    Angular 2 Quickstart

	    

	    

	    

	  

	  

	    

	    

	    System.import('app');

	  

	

The app component is called the root component, the entry for your application

## Second app, add data

Edit **app.ts**

	class MyAppComponent {

	  name: string;

	  avengers : Array;

	  constructor() {

	    this.name = 'Bear2';

	    this.avengers = ["captain america", "Hulk", "Thor"];

	    

	  }

	}

1) we added a reference to a list **avengers**

2) we initialized it with 3 items

3) Edit the template to loop a list

Add NgFor to import list 

	import {Component, View, bootstrap, NgFor } from 'angular2/angular2';

Also we added the property directives to

import our loop construct **NgFor** 

	@View({

	  template: `

	  
My name: {{ name }}

	  
Friends:

	  


	     


	        {{ name }}

	     

	  

	`,

	directives : [ NgFor ]

	})


Whats new here is the for loop starts with

 

1) *ng-for

2) to loop the items you type

**#name** **of** avengers

NOT ng-repeat="item in items"

## Third app, creating a service 

Basically we move the data from app.ts to a service. Then we inject the service.

**avengerService.ts**

 

	class AvengerService{

		names: Array;

		

		constructor(){

			this.names= ["captain america", "Hulk", "Thor"];

		}

	}

**app.ts**

1) we need to add imports

The service itself

	

	import { AvengerService } from 'avengerService';

Angular dependency injection

	

	import { Inject } from 'angular2/di';

2) tell component we want to inject something

	@Component({

	  selector: 'my-app',

	  appInjector : [ AvengerService ]

	})	

3) Inject it via constructor

	class MyAppComponent {

	  name: string;

	  avengers : Array;

	  constructor(

	    @Inject(AvengerService) avengerService:AvengerService ) {

	    this.name = 'Nick fury';

	    this.avengers = avengerService.avengers;

	    

	  }

	}

### Let's add something more, constructs

Let's add the ng-if

1) Add import

	{ NgIf } from 'angular2/angular2';

2) Add to template

	@View({

		template : 

			`
One avenger is missing
`

		directives : [ NgIf ] 

	});	


## Third app - inputs