Permalink
Browse files

Angular version

  • Loading branch information...
1 parent d4c56a1 commit 17b33d91d3231678c8221e9c1e7bcce570c2da4c @mlynch mlynch committed Jun 11, 2016
View
@@ -2,3 +2,4 @@ markdown: kramdown
kramdown:
input: GFM
highlighter: rouge
+angular2_version: 2.0.0-rc.1
@@ -1,5 +1,6 @@
<div id="sidebar" class="sidebar">
<h3>Angular 2</h3>
+ <small id="angular2-version">Angular 2 v{{site.angular2_version}}</small>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/why-angular2">Why Angular2?</a></li>
@@ -26,7 +26,7 @@
</div>
</div>
</div>
-
+
<footer id="footer">
<div class="container">
Built by the <a href="http://ionicframework.com/">Ionic</a> Team. Licensed under Apache 2.
View
@@ -18,7 +18,7 @@ Here's a simple Component that renders our name, and a button that triggers a me
```javascript
{% raw %}
-import {Component} from 'angular2/angular2'
+import { Component } from '@angular/core';
@Component({
selector: 'my-component',
View
@@ -84,3 +84,10 @@ h1 code, h2 code, h3 code, h4 code, h5 code{
text-transform: none
}
+
+#angular2-version {
+ font-style: italic;
+ font-size: 10px;
+ display: block;
+ margin: 8px 0;
+}
No changes.
View
@@ -27,8 +27,8 @@ Let's start with a simple login form in HTML with Angular 2:
And the corresponding component JS:
```javascript
-
-import {Component, FormBuilder, Validators} from 'angular2/angular2'
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/common';
@Component({
selector: 'login-page',
@@ -130,4 +130,3 @@ doLogin(event) {
event.preventDefault();
}
```
-
View
@@ -26,7 +26,7 @@ So, we add an `@Input` binding to `user`:
```javascript
{% raw %}
-import {Component, Input} from '@angular/core';
+import { Component, Input } from '@angular/core';
@Component({
selector: 'user-profile',
@@ -38,4 +38,3 @@ export class UserProfile {
}
{% endraw %}
```
-
View
@@ -18,7 +18,8 @@ In your main JS file for our app, we put this:
```javascript
{% raw %}
-import {Component, bootstrap} from 'angular2/angular2';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { Component } from '@angular/core';
// Annotation section
@Component({
View
@@ -14,7 +14,7 @@ If you want to bind to particular event, you can use the new [Event syntax](/eve
To create a custom event, we can use the new `@Output` decorator. Take the following component:
```javascript
-import {Component} from 'angular2/core';
+import { Component } from '@angular/core';
@Component({
selector: 'user-profile',
@@ -28,15 +28,15 @@ export class PersonInfo {
Let's import `Output` and `EventEmitter` and create our new event
```javascript
-import {Component, Output, EventEmitter} from 'angular2/core';
+import { Component, Output, EventEmitter } from 'angular2/core';
@Component({
selector: 'user-profile',
template: '<div>Hi, my name is {{user.name}}</div>'
})
export class UserProfile {
@Output() userUpdated = new EventEmitter();
-
+
constructor() {
// Update user
// ...
@@ -54,7 +54,7 @@ Now when we used this component elsewhere in our app, we can bind the event that
```javascript
export class SettingsPage {
constructor(){}
-
+
userUpdated(user) {
// Handle the event
}
View
@@ -36,8 +36,9 @@ When use the `user-profile` on our main page, we can reference the class and the
```javascript
{% raw %}
-import {Component, ViewChild} from 'angular2/core';
-import {UserProfile} from '../user-profile';
+import { Component, ViewChild } from '@angular/core';
+import { UserProfile } from '../user-profile';
+
@Component({
template: '<user-profile (click)="update()"></user-profile>',
directives: [UserProfile]
@@ -47,6 +48,7 @@ export class MasterPage {
// assign to a public property on our class
// give it the type for our component
@ViewChild(UserProfile) userProfile: UserProfile
+
constructor() { }
update(){
this.userProfile.sendData();
@@ -61,8 +63,9 @@ Instead of trying to load the particular class, we can do:
```javascript
{% raw %}
-import {Component, ViewChild} from 'angular2/core';
-import {UserProfile} from '../user-profile';
+import { Component, ViewChild } from '@angular/core';
+import { UserProfile } from '../user-profile';
+
@Component({
template: '<user-profile #myProfile (click)="update()"></user-profile>',
directives: [UserProfile]
@@ -76,4 +79,3 @@ export class MasterPage {
}
{% endraw %}
```
-

0 comments on commit 17b33d9

Please sign in to comment.