Blog archive

Finding Your Way Around Angular

Whether you’ve dabbled in AngularJS or even worked extensively with it, you want to upgrade your skills to move to the latest versions of Angular because that’s where the jobs are.

As this blog noted back in April, the JavaScript (hence the JS) version of Angular from 2010 was pretty much eclipsed by the TypeScript rewrite in 2016, which was dubbed Angular2 although it was a whole new platform for building web apps.

In the past two years, the Angular team at Google released new versions so we have Angular 2/4/5, and in May of this year, Angular version 6.0.0 appeared. (In case you’re wondering, Angular 3 got lost in the development shuffle and like Windows 9 it basically doesn’t exist.) These TypeScript versions are sometimes lumped together as “Angular 2+” according to a Wikipedia article.

But you can think of “Angular v2 and above” as “plain ol' Angular,” says Ted Neward, who is director of Developer Relations at Smartsheet.com and well-known as a presenter at Visual Studio Live! His interview, Angular Q&A: Components, Getting-Started Tips (and that 'Total Rewrite' Thing) in Visual Studio Magazine is a great place to start learning about all things Angular.

Beyond that if you want to get up to speed on plain ol’ Angular, Neward recommended the resources available on the official Angular website.

Angular IDEs and Tools
The Angular website provides links to a number of Integrated Development Environments (IDEs) designed to make coding easier with features like drag and drop.

First of the list is Amexio API v5.2.1 with Angular 6 support, and D3 Charts for visualization. The product from MetaMAGIC Global Inc., based in India and New Jersey, provides an Angular UI automation platform including:

  • Angular 6
  • 130+ UI Widgets
  • Drag & Drop Widget
  • Responsive Web Design
  • 57 Material Design Themes
  • D3 Charts / Maps / Dashboard / Layouts

Texas-based Genuitec, a founding member of the Eclipse Foundation, is the developer of a commercial Eclipse tool, Angular IDE by Webclipse, which the company markets as “Simple for beginners; powerful for experts” providing:

  • TypeScript 3.x validation and debugging
  • Advanced coding of HTML templates with validation and auto-complete
  • Integrated usage of the angular-cli for Angular best practices

Among the tools listed on the Angular site are:

  • Angular CLI, a command line interface for Angular
  • Angular Universal, a server-side rendering for Angular applications, which is on GitHub
  • Angular Augury, a “developer tool extension for debugging and profiling Angular applications inside the Google Chrome and Mozilla Firefox browsers”
  • Celerio Angular Quickstart, which GitHub lists as a simple way to generate an Angular 5 create, read, update, and delete (CRUD) application from an existing database schema
  • Codelyzer, with a GitHub link to code for static analysis for Angular projects
  • Compodoc for documenting your Angular project touts its capability to “Generate your Angular project documentation in seconds.”

If you are creating on-line storefronts with Angular, AngularCommerce provides a framework for building e-commerce applications with Google Firebase. The Angular site says AngularCommerce provides a set of components that is design agnostic and allows developers to easily extend functionality.

Quick Start for TypeScript
If you are new to TypeScript, you may want to start at the Typescript open source group’s website. It offers Quick Start with a five-minute tutorial as well as other documentation, downloads and a “Playground” with code samples.

Whether you are a TypeScript veteran or have just learned to work with it, the aforementioned Angular site has lots of helpful stuff starting with an Angular CheatSheet that Neward recommends bookmarking. It has code samples, starting with how to bootstrap the Angular platform and then moves on to:

  • Ngmodules
  • Template syntax
  • Built-in directives
  • Forms
  • Class decorators
  • Directive configuration
  • Component configuration
  • Class field decorators for directives and components
  • Directive and component change detection and lifecycle hooks
  • Dependency injection configuration
  • Routing and navigation

There are Angular how-to books listed on Amazon that you might want to browse. However, you could spend your time rather than your money on the Angular site and probably learn a lot.

Beyond Angular with Microsoft Blazor
Beyond developing in Angular, you might want to check out Microsoft’s Blazor-based .NET technology, which stole the show at a recent VSLive! keynote by Scott Hunter, Partner Director Program Management, .NET, at Microsoft.

"Blazor is something that we're working on as an internal project at Microsoft, on thinking about next-generation .NET applications," Hunter told the VSLive attendees earlier this year. "The primary premise in Blazor is that you can build client-side UI in your browser in .NET. What it means is, you don't have to know Angular or React or Vue, you don't have to know JavaScript because you're actually going to run C# in the browser.”

Find out more about the futuristic Blazor technology in this article based on the keynote by David Ramel, editor of Visual Studio Magazine.

Posted by Richard Seeley on 10/16/2018


Keep Up-to-Date with Visual Studio Live!

Email address*Country*