Monday, July 23, 2018

AngularJS vs Angular: index.html and boostrapping

This is part of a series that compares AngularJS (the old Angular) to Angular.

For the first comparison, I’m going to look at index.html and how the apps are set up or bootstrapped.

AngularJS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html ng-app="mainModule">
<head>
  <title>TasksA1</title>
  <script src="https://code.angularjs.org/1.7.0/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.7.0/angular-resource.min.js"></script>
  <script src="https://code.angularjs.org/1.7.0/angular-route.js"></script>
  <script src="app.js"></script>  
  <script src="app-routing.module.js"></script>
  <script src="services/todo.service.js"></script>
  <script src="pages/home/home.component.js"></script>
  <script src="pages/to-do-list/to-do-list.component.js"></script>
  <script src="pages/to-do-item/to-do-item.component.js"></script>
  <!-- Angular CLR project somehow adds Boostrap into the file -->
  <link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
  crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>ToDos using AngularJS (1)</h1>
  <a href="#!/toDoList">ToDos</a>
  |
  <a href="#!/toDoAdd">New ToDo</a>
  <div ng-view></div>
</body>
</html>
index.html

On line 2, there is the ng-app directive, telling AngularJS to do its magic. Lines 5-13 there are script tags, first Angulars then mine. Then on line 26 we have a div with a ng-view directive, that's where all the magic happens.

Angluar

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TasksA6Ts</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <h1>ToDos using Angular /w TypeScript</h1>
  <a href="/toDoList">ToDos</a>
  |
  <a href="/toDoAdd">New ToDo</a>
  <app-root></app-root>
</body>
</html>
index.html

The app-root tag replaces the div with the ng-view directive. There is no ng-app directive or script tags. When I did a view source. But how does it know which files to insert; I think it gets them from app.module.ts (the files are reduced to ES5 and dumped into a single file).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { ReactiveFormsModule , FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ToDoItemComponent } from './pages/to-do-item/to-do-item.component';
import { ToDoListComponent } from './pages/to-do-list/to-do-list.component';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './pages/home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    ToDoItemComponent,
    ToDoListComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
app.module.ts

These are the files in the actual project, but an Angular app needs to be built. I built the app with the command ng build and when I look at the build results and this is the generated index.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TasksA6Ts</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <h1>ToDos using Angular /w TypeScript</h1>
  <a href="/toDoList">ToDos</a>
  |
  <a href="/toDoAdd">New ToDo</a>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Generated index.html

All of the TypeScript files mentioned in app.module.ts are transpiled into ES5 into main.js

About the series AngularJS vs Angular


Posted by Jack Stephens at 5:06 PM
Labels: , , , ,

1 comment:

idreasewaddington said...

Best Casino Games in Las Vegas, NV - Mapyro
The Best Casino Games 경기도 출장샵 in Las Vegas, NV, United States 통영 출장샵 · The 10 Best Slots and Casino Games 인천광역 출장안마 in Las Vegas, NV · Slots 용인 출장마사지 with Roulette · Blackjack · Blackjack · Craps · Poker 목포 출장샵

5:59 PM

Post a Comment

Subscribe to: Post Comments (Atom)