Angular 2 Series: Introduction

Angular 2 series:introduction

by Max on April 2, 2015

Now, Angular 2 and Ionic 2 are on the horizon. Our super-praised team is working hard for the next big version of Ionic and Angular 2. I'm excited about the big progress we've made in that short time, and I'm sure the Ionic community will love it.

For many people, Angular 2 changed too much of their frame of love (that is, love to kill it). It takes a lot of time to learn the V1 language ( directive and some hands?). ), and the flower event to understand scope, and life cycle, spend time to debug the problem, and then always the ngModel best engineering structure, but now, all is gone.

But believe me, this is the best.

Angular 2 Series

Ionic was one of the first to use the Angular 2 in a large-scale team. So we touch on a lot of complexity, limitations, and, of course, Angular 2. We know that to get the community to Angular 2, we need to share our experiences and lessons with the front-end developers.

Starting this week, we are ready to give Angular 2 a series of posts. This series will cover all aspects of this framework, how to use it, and where to get help.

Today, we're going to start with this framework, install what we need, and then do a little example to try.

Start

Let's start with the Angular 2 official quick Start, but we need to add a bit of material.

First, create a project folder to clone the QuickStart warehouse:

<!-- lang: js -->mkdir myAppcd myAppgit clone [email protected]:angular/quickstart.git

Html

Create a new index.html , file, like this:

<!-- lang: js --><!-- index.html -->

I guess your first reaction should be, "what the System.* hell?" “。 System is only for browser support to download the ES6 module. It's nothing, just like the templates of many Angular 2, and then the things to be erased (the most code to be erased when we Ionic2, so you don't want to see it). Know on the line, ignore it.

All look familiar, just no ng-app .

Javascript

Now, let's write something ES6!

So, first create a and then fill in the Code app.js . (official documents are used .es6 , but I don't recommend using this extension, because it's not supported now).

<!-- lang: js -->import {Component, View, bootstrap} from ‘angular2/angular2‘;// Annotation section@Component({  selector: ‘my-app‘})@View({  inline: ‘

The interesting thing is how we specify the app components. bootstrap(MyAppComponent)method is tuned when our app is initiated, just like ng-app that. But in this case, we made sure that we provided the components when the app was initiated.

Let uncle check it out!

If you are not installing a local HTTP service, we can use npm install -g http-server or python -m SimpleHTTPServer . As you are, I suggest that you be the next one, and learn how to use it.

<!-- lang: js -->http-server

When you open the browser http://localhost:8080 , you will see the following images:

This is it!

TypeScript?

In order to be simple, the entry project uses a Traceur-provided version of the Angular 2 preset.

But this works well, making the whole tool chain simpler. What I want to say is that you don't need to learn Traceur or memorize any longer names.

Next Chapter: Components

In the above file, we created the first group (Component). The kit is the core of Angular 2, replacing the original V1 version of Controller,scope and Directive.

Take a look at the next post and introduce Angular 2 to learn about the new components system, Junior!

Angular 2 Series: Introduction