Angular 2, now out of beta, is a powerful framework for building web applications. This guide will help you understand its key architectural concepts and set up your development environment. We’ll cover modules, components, services, dependency injection, directives, and TypeScript. We’ll also walk you through setting up a basic Angular 2 application.
Understanding Angular 2 Architecture
Angular 2 is designed to be modular. An Angular 2 application is made up of several components, connected via routing or selectors. These components may have templates attached to them, which display component properties and attach events to interact with these properties. A component may use a service to access a particular feature or perform a specific task. Services must be injected into components before they can be used, a process known as Dependency Injection.
Modules
An Angular application comprises several modules. A module typically exports a class or a set of utilities that perform a similar task. Angular 2 itself ships in large modules, such as ‘angular/core’ and ‘angular/router’.
Components
Components are the basic building blocks of an Angular 2 app. A component is a TypeScript class with a template attached. It assembles a screen, UI element, or a route in the application. Components can have child components and can be navigated using routing or selectors.
Services
A well-structured Angular 2 application assigns specific tasks to different services. A component may consume these services to perform these tasks. A service must be injected into the controller before it can be used, a process known as Dependency Injection.
Dependency Injection
Dependency Injection is a key feature of AngularJS. Components need to use services to perform tasks, and these services are injected into the component via the injector. This approach separates concerns into smaller units, making your application more manageable and easier to unit test.
Directives
Directives are everywhere in Angular 2. A directive is a TypeScript Class with metadata. Directives may or may not have a template attached. There are two kinds of directives in Angular 2: structural and attribute directives. Structural directives modify the structure or layout of the DOM, while attribute directives alter the behavior of the elements.
Setting Up Your Development Environment
To set up your development environment for Angular 2, you’ll need to install Node.js and set up a skeleton app. You’ll also need to understand the structure of an Angular 2 app, including the purpose of the app, assets, package.json, tsconfig.json, and typings.json files.
Install Node.js
Node.js will be used as our runtime environment and npm as our package manager. If you haven’t installed Node.js yet, you can download it from the official Node.js website.
Setup a Skeleton App
You can get a skeleton app structure from an existing app. This will give you a basic project structure to work with, including a components directory for your app’s different components and an assets directory for non-angular data required by your app.
TypeScript
Angular 2 applications can be written in JavaScript, Dart, or TypeScript. For this tutorial, we’ll be using TypeScript. TypeScript is a superset of ES6, which in turn is a superset of standard JavaScript (ES5). TypeScript adds important features like annotations, interfaces, and types on top of the classes and modules offered by ES6.
Building Your First Angular 2 App
Once you’ve set up your development environment, you can start building your first Angular 2 app. You’ll need to create a component, attach a template to it, and bootstrap your app with main.ts. You can then run your app using npm.
Conclusion
This guide has introduced you to Angular 2 and helped you set up your development environment. While we’ve only scratched the surface of what Angular 2 can do, you should now have a solid foundation to build upon. As you continue to explore Angular 2, you’ll discover more about its powerful features and how to use them to build robust web applications.
