Tag Archives: AngularJS

Angular: specifying the img src

While it likely appears that <img src=”{{imageUrl}}”/> is working, you may wonder about the Angular way to specify the source and why.

When the browser is loading the page, before angular bootstrapping and creation of controllers, the browser will try to load image from literally “{{imageUrl}}“, which will fail. Then once angular is started, it will do the replacement of {{imageUrl}} to image.png for example. When the img src attribute changes, and browser then loads the image as expected. To avoid these 2 requests going and first one failing, do as below instead:

Angular 1:

<img ng-src="{{imageUrl}}">

Angular 2:

<img [src]="imageUrl">

Angular: JIT and AOT

With Angular 1 and early stages of Angular 2, JIT (Just In Time) has been the way of compiling Angular code. With this approach, the compiler performs a lot of work to analyze the components in the application at runtime (generating code in memory). Since this is just stored in memory, when the page is refreshed, all of that work is lost. So, the JIT compiler does the work all over again. Doesn’t sound that efficient, huh?

What’s “AOT” ? It stands for Ahead Of Time.

With an AOT compiling approach, Angular apps can be built to not require much of the compiler, change detection, or dependency injection systems at runtime. This leads to a significantly smaller application payload. And since the component factories are generated at build time, Angular can skip the compilation and move straight to creating views at runtime.

Considering these two approaches to compilation, we can see how AOT provides significant improvements to load time, as the majority of the compilation work is already completed before the code gets sent to the browser and the AOT compiled code yields less code that we need to send to the browser.

 

Angular: Bootstrapping

When you hear “Bootstrap,” you may think of the popular CSS framework. However, with Angular, this term is used to describe getting your Angular app initialized.

There are 2 main ways to bootstrap your angular app.

The first is automatically bootstrapping by adding ng-app to the an element in your HTML:

<html ng-app="myApp">
...
</html>

The second would be to manually bootstrap from the JavaScript:

var app = angular.module("myApp", []);
angular.bootstrap(document, ['myApp']);