From the Blogosphere
Now let’s take a quick glance at Angular 2, a complete re-write of the popular open-source framework managed by Google
By: Yakov Fain
Feb. 3, 2016 09:45 PM
Why Java Developers Will Embrace Angular 2 and TypeScript
ES6 offers classes, standardized module definition, arrow expressions (lambdas), predictable “this” and a lot more. Firefox and Chrome already support most of the ES6 syntax, and other browsers are getting there as well.
Now let’s take a quick glance at Angular 2, a complete re-write of the popular open source framework managed by Google. Angular 2 is currently in Beta.0 and it’s safe to start using it for your next Web project unless your app has to go to prod in the first half of 2016. Angular 2 is stable enough for serious development, and I know this firsthand after surviving a couple of dozens of alpha releases of Angular 2.
What makes the Angular 2/TypeScript combo so appealing to Java folks?
Any Angular application is a hierarchy of components represented by annotated classes. The annotation
The annotation @Component also contains a selector declaring the name of the custom tag to be used in HTML document. When Angular sees an HTML element with the name matching a selector, it knows which component implements it. The lesson is over.
Below is a code sample of a
A Java developer can read and understand most of this code right away. Okay, okay. I’ll give you more explanations. The annotated class
Note that the HTML template is surrounded with the back tick symbols, which allows you to write the markup in multiple lines in a readable form. If you prefer to store HTML in a separate file instead of `template` use the `templateURL` property:
Dependency Injection. Angular architecture will be very familiar to those who use Spring framework or Java EE. Angular comes with the Dependency Injection (DI) module, which instantiates an object using a registered class or a factory and injects it to the application component via constructor’s arguments. The following code will instruct Angular to instantiate the class
Specifying the provider and declaring the constructor with the type is all you need for injecting the object. Application components form a hierarchy, and each component may have its own injector. Injectors are not singletons.
App structure. The following image shows what the main page of a sample application is made up of. The parent component includes child components, which are surrounded with green borders.
Router. Angular shines if you need to develop a single-page application (SPA), where the entire Web page is never reloaded. Angular router allows you to easily configure the page fragments (the views) that should be loaded based on the user’s actions. The code snippet below includes the annotation
Inter-component communication. Each component in Angular is well encapsulated, and you can create it in a losely-coupled manner. To pass the data from the outside world to the component just annotate a class variable(s) with
To pass the data from the component to the outside world, use the
See something familiar? You got it. That thingy in the angle brackets after
Casting. Since TypeScript supports classes and interfaces (
I took this screenshow while after placing the cursor before
Streams and lambdas. These are big in Java 8. Angular 2 incorporates RxJS, the library with react extensions, where streams is a religion. Everything is a stream in RxJS, and Angular 2 promotes using observable streams and subscribers.
Make an HTTP request or open a WebSocket and subscribe to the observable stream, which is a
In Java 8 you can run a stream through a number of changed intermediate operations (e.g.
If the above code requires explanations, then your Java is a little rusty. Seriously.
Module loading. One of the important features that ES6 brings to Web development is standardization of module loading. The application code consists of modules (typically one module is one script file). Using the
ES6 includes the syntax for importing/exporting modules, but the standardization of the module loader
In the above code snippet the System object imports the module from the file app.ts, which is a root component of the application and may have child components represented by custom HTML tags. The
I hope that after reading this blog thousands (ok, hundreds) of Java developers will decide to take a closer look at Angular 2. Start with Angular architecture.
In this blog I showed you just a tip of the iceberg. You’d need to invest some time in learning Angular 2 and TypeScript, but the learning process isn’t too steep for Java folks. If you want to make this process as pleasant as it can be, get the book that I’m co-authoring or enroll in one of our training classes.
SOA World Latest Stories
Subscribe to the World's Most Powerful Newsletters
Subscribe to Our Rss Feeds & Get Your SYS-CON News Live!
SYS-CON Featured Whitepapers
Most Read This Week