ZIPNON / Pixabay

Angular 2 (or simply Angular, as the Angular team prefers) is the long-awaited sequel to the world’s most popular JavaScript framework, AngularJS. Like its predecessor, Angular is an open-source, front-end JavaScript framework that really shines when building those dynamic, single page applications (SPAs) we all know and love.

Unlike its predecessor, Angular 2 is a TypeScript-based, web application development platform that makes the switch from MVC (model-view-controller) to a components-based approach to web development. Read on to learn more about what’s new in Angular 2 and its place in the world of front-end web development.

From AngularJS to Angular 2

When AngularJS first hit the front-end web development scene back in 2009, the web was still coming of age, transitioning from static web pages and clunky UIs to the dynamic, interactive web apps of today. AngularJS solved the unique problem of building scalable, dynamic SPAs for this emergent web.

By 2014, AngularJS was beginning to show its age—the W3C was starting to push its new Web Components standard forward and newer technologies like React were embracing a more components-oriented approach to web development. Responsive web apps that worked well across desktop and mobile had become a necessity. It was with all this in mind that the Angular team announced its decision to revamp the platform for the modern web at the ng-Europe developer conference in September 2014. Nearly two years later, after some initial developer releases, the final release version of Angular 2 shipped on September 14, 2016.

TypeScript

The first thing anyone familiar with AngularJS will notice when switching to Angular 2 is the unusual syntax (i.e. @Component). TypeScript is a Microsoft-backed superset of JavaScript, which adds features like static typing, classes, and interfaces that enhance developer productivity in writing large-scale apps. Since it compiles back to plain old vanilla JavaScript and is very similar to ES6, it’s compatible with many of the JavaScript-based libraries we all know and love. What that means for Angular 2 is that you get access to ES6 features like class decorators and type declarations. You also get type safety, which can be really useful when working on larger apps.

Components-Based Web Development

Perhaps the biggest change to the Angular platform is the shift towards components-based web development. Angular 2 allows you to build web applications out of components that neatly encapsulate all the style and function required for a certain feature to work. Making custom HTML elements in AngularJS took a non-trivial amount of code, requiring the developer to reason about controllers, directives, restrict and scope. Angular 2 greatly simplifies that process with components—reusable UI building blocks that are easy to test and reuse.

Those familiar with AngularJS can think of components as directives with the template and controller included, except instead of explicitly calling it a controller, what you actually have is an ES6 class that can receive properties and methods. In practice, the idea is to build declarative components that are fully encapsulated, describe their own views, and can be easily packaged and distributed to other developers. The app itself consists of a root component that contains a set of components for every UI element, screen, and route—this component tree lies at the core of any Angular 2 application.

Dependency Injection

Dependency Injection (DI) is an application design programming pattern in which dependencies are passed to an object instead of creating them locally. It’s also part of what made AngularJS so popular. In Angular 2, DI has been streamlined even further thanks to the power of class inheritance brought to JavaScript courtesy of TypeScript. Instead of having to keep track of rigid string tokens throughout your application as you had to do in AngularJS, Angular 2 makes DI as easy as assigning properties to a parent class and calling upon them when needed.

Data Binding

The world was stunned back in 2009 when an asynchronous call back could be performed with a simple set of curly brackets. Angular 2 takes data binding further with property bindings and zones. You can sprinkle square brackets (property binding) throughout your application to allow the component tree, model, and DOM to automatically sync up with each other. Zones relieve the need to be mindful of scope, and use scope.$apply to integrate with third-party libraries. Angular uses zones to know when to perform the check on bindings.

Meet the Angular CLI

Setting up a new project in Angular 2 would be pretty tedious if you had to do it from scratch—creating your app files, configuring TypeScript, bootstrapping etc. Thankfully the Angular team also created a handy CLI (command line interface) that makes setting up a new Angular 2 project a breeze. Starting a new project with the “ng new” command will automatically install/generate all the necessary configuration files, end-to-end test files, dependencies, and folders into Angular’s recommended app directory structure. Like any good CLI, you can also load an existing project using the “ng init” command. Some other cool features include:

  • ng serve – Instantly serve an application to the browser with a simple one-liner
  • ng generate – Create new components, directives, routes, pipes and services
  • ng test – Run unit tests with Karma
  • ng e2e – Run end-to-end tests with Protractor
  • ng lint – Analyze code with Codelyzer

This is only a small sample of what can be done with the Angular CLI, for more details check out the full documentation on GitHub.

Should I Use Angular 2 for My Project?

Angular 2 is a JavaScript framework built for the future. With expanded support for mobile and responsive design, a shiny new CLI, streamlined DI, improved data binding, and a switch to components-based web development, Angular 2 is well positioned for the next era of web development.

Other popular reasons for using Angular 2 include:

  • You’re looking for a comprehensive JavaScript web development platform for building all types of apps with the backing of tech giants Google and Microsoft.
  • You want to take advantage of new JavaScript features in ES2015/ES6 via TypeScript
  • Support for Web Components, the latest standard being implemented by the W3C
  • Synergizes well with Polymer
  • Support for animations
  • Server-side rendering with Angular Universal
  • General performance boost over AngularJS
  • Tools for writing unit, e2e, and performance tests

Whether you’re a developer looking to remain competitive in the ever-evolving world of web development, or a company looking for the right technology to base their application on, Angular 2 is a solid JavaScript development platform that embraces the components oriented future of the web.

Get more work done, faster with freelance help. Post a job today and get started!