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.
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.
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?
Other popular reasons for using Angular 2 include:
- 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
Get more work done, faster with freelance help. Post a job today and get started!