您的位置：首页 > 移动开发

Build Your First Mobile App With Ionic 2 & Angular 2 - Part 4

2016-05-22 09:04 495 查看
http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2-part-4/

31 January 2016 on
Ionic 2, Angular 2,
TypeScript |
4 Comments

In this post we'll have a first look at Angular 2 and get familiar with the TypeScript concepts ofdecorators and
modules.

This tutorial is for Ionic 2, you can find the Ionic 1.x tutorialhere.

This tutorial is part of a multi-part series:

Part 1 - Introduction to Hybrid Mobile Apps

Part 2 - Set Up your Development Environment

Part 3 - Introduction to TypeScript & ES6

Part 4 - Introduction to Angular 2 (this post)

Part 5 - Build an Ionic 2 App

Part 6 - Navigating between Pages

Part 7 - Test on Emulators and Mobile Devices

What is Angular 2?

Angular is an open-source framework for building (web) applications. The framework takes care of things like navigation, data binding, dependency injection and much more, so you don't have to implement them yourself.

The first version of Angular was created in 2009 and became very popular but in recent years newer frameworks popped up that offered better performance. In 2014 the Angular Team decided to completely rewrite the framework based on lessons learned and that
became Angular 2. At the time of writing this post, Angular 2 is in beta, so hopefully we shouldn't be seeing breaking changes in further releases.

The documentation on the Angular 2 website is very good, so make sure you go tohttp://angular.io and do the

5 Minute QuickStart and
Tutorial.

I won't be able to cover all the concepts in Angular 2 in this post, but the most important one to start with is the Angular 2Component.

Components

A component in Angular implements a view or part of a view in the application. It contains all the code for displaying the view and managing it.

It's always easier to explain with an example, so let's have a look at a simple component that displays the current time.

import {Component} from 'angular2/core';

@Component({
selector: 'current-time',
template: '<h1>Time: {{time}}</h1>'
})
export class CurrentTime {
time: Date;

constructor() {
this.time = new Date();
setInterval(() => this.time = new Date(), 1000);
}
}

The implementation of the class 
CurrentTime
is very straightforward, it has a property
time
that is updated every second. As you can see this class doesn't have any specific Angular 2 code in it. The interesting part is the code
right above the class that starts with the
@Component
decorator.

Decorators

Decorators are a new concept in TypeScript (and ES7/ES2016) that you can use to add functionality to a class. It's especially useful for developers of libraries and frameworks, like Angular 2, and you can implement your own decorators if you need to.

The 
@Component
decorator is implemented within the Angular 2 framework. When you add the
@Component
decorator to your classes, it takes care of things like coupling the class to a view template, data binding, dependency injection,
etc.

In our example, we see that the 
selector
for this component is set to
current-time
, so within our Angular application we'll have an
index.html page, that could contain the following HTML code:

<body>
<current-time>Loading...</current-time>
</body>

When this page is loaded in the browser, Angular will know that when it encounters
<current-time>
, it needs to replace that with the HTML code in the component's
template
.

Data binding

The template for our component contains the following HTML code:

<h1>Time: {{time}}</h1>

The 
{{time}}
part is a data binding notation in Angular, that means that instead of displaying
{{time}}
in the browser, it will display the value from the
time
property on the
CurrentTime
object. So every time the value of
time
is changed the
<h1>
tag will be automatically updated to display the new value.

In this example, I've only used data binding from a property to the view, but you can obviously use data binding the other way around as well, to get input from the user.

We'll be covering these bindings when we're building our Ionic 2 application in upcoming parts of this tutorial, but if you want a quick overview of all the possible bindings, have a look at theAngular
2 Cheatsheet.

Modules

Now, I'm sure you haven't missed the first line in the example:

import {Component} from 'angular2/core';

The statement above simply means that the TypeScript compiler should look for the
angular2/core
script in the project and import the Component module from it. This also means that you don't need to write
<script>
tags in the HTML
anymore, because the scripts will be automatically loaded for you.

Angular 2 is split up in many modules so you can choose which functionality you want to include in your application.

Modules are supported by TypeScript and ES6 and you can use them with CommonJS, AMD and other existing module systems. Your Angular 2 project will have atsconfig.json file where you can configure the module options for the TypeScript compiler.

Notice that our own 
CurrentTime
class declaration is preceded by the
export
keyword, this means that it can be imported as a module in other script files.

Final Words

This was a very brief introduction to Angular 2, and as I mentioned before, make sure you do the5 Minute QuickStart andTutorial
to help you understand Angular 2 better and see working examples of Angular 2 apps.

To make an Angular 2 app, you'll have to include a couple more files in the app and bootstrap it, but we won't do that now. We'll cover all these things when we start with Ionic 2 inPart
5 and build a working mobile app.

Learn More about Angular 2

The Core Concepts of Angular 2

Exploring ES2016 Decorators

Angular 2 Documentation

Learn Angular 2

Follow me on Twitter
@ashteya andsign up for my weekly emails to get new tutorials.

If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航