Top 5 Angular Terms You Should Know

by Stephen Fluin

2017-09-20

Top 5 Angular Terms You Should Know
There's a lot of jargon in software development, but we develop language around new concepts as an important abstraction layer for improving the speed and efficacy of communication. This is great if you are in-the-know, but when you are new to a technology, this can be very frustrating.
Here are the 5 terms you should know if you want to become an Angular developer.

TypeScript

TypeScript IS NOT another new language you need to learn. TypeScript is two things.
First, it's an extension to the latest version of the JavaScript language that includes all of the newest and best features of JavaScript, and it's a few additions to the syntax that lets you declare types for things like functions, parameters, and variables.
Second, TypeScript is a compiler that let's you write code using types and the latest features of JavaScript (classes, ES2015 Arrow functions, etc) while still being able to ship ES5 down to the browser so your code works regardless of the JavaScript support of your users browser.

NgModule

An NgModule is an architectural building block for Angular applications. NgModules define a compilation context for a piece of your application.
In general, they look something like this:
@NgModule({
  imports: [
    CommonModule
    HttpClientModule
  ],
  declarations: [
    MyComponent,
    MyOtherComponent,
  ]
})
export class MyModule {}

In this example, we are defining a compilation context for all of the declared components, meaning that we compile those components, the Angular compiler will use the other declarations, and all of the imports. In this module, I could have a component called <my-component> and then I could use the same <my-component> selector in another module and refer to a different component. Developers always know the full context (such as how the selectors resolve) by looking at the imports and declarations of the module.
An additional tidbit about NgModules, is that they are standalone, and they can actually be compiled independently from the rest of your applications, speeding up build time.

Lazy Load

Once you have your application architected into a set of modules, it's important to be aware of how much code you are sending down to users on initial load, and upon further interactions. By using the Angular Router, you can decide that certain routes should be Lazy Loaded. This means that the NgModule associated with a route shouldn't be downloaded by the browser until the router has determined that the user has requested this route.
By minimizing the amount of code you send for any given route, you can dramatically increase the speed and decrease the initial load time for even the largest applications.
To lazy load with Angular, you need to have a Route configuration in both the parent module, and in the child. If I wanted to have a StatisticsModule that was loaded when the user navigated to /statistics, I could do it as follows:
In the parent module:
import: [
  ...,
  RouterModule.forRoot([
    ...,
    { path: 'statistics', loadChildren: './statistics/statistics.module#StatisticsModule' },
  ])
]

In the StatisticsModule
import: [
  ...,
  RouterModule.forChild([
    ...,
    { path: '', component: StatisticsComponent },
  ])
]

Change Detection

Both Angular and AngularJS have always had an incredible power to the declarative syntax. Being able to declaratively say "take the contents of this variable and render it here" combined with "take this property or input" is magical.
This means that we can simply write:
Hello {{name}}
<input [(ngModel)]="name">

Under the covers of Angular we take this simple HTML snippet and listen to all of the appropriate events on the input field, and write all of the appropriate DOM update code to keep these two things in sync.
This process is called Change Detection, and it's run automatically by Angular and Zones whenever an appropriate event fires. This could be from an async call to a web server, or based on user input, or a number of other events.
Change Detection in Angular happens via a single pass of your application for each CD event. Change Detection is not allowed to have side effects, and to help ensure this, in development mode Angular runs change detection twice and will warn you if any expressions evaluate differently on the first and second pass.
This process is a lot more efficient (more than 10x) than what existing in AngularJS, making Angular a fantastic choice for its runtime performance.

Angular

You've heard about Angular, you probably know a lot about Angular, but what is it?
Angular is the term for the platform that includes the framework at the core, libraries like Angular Material, projects like AngularFire, and a giant community of community contributed libraries, tutorials, and projects.
Angular has major releases every 6 months or so. The team is currently on v4 as of September 2017, but soon they'll release v5, and it will still just be "Angular", no number needed because the changes are incremental and not revolutionary.