Angular 2 - Part 5 [ How Angular App get started ]


How Angular 2 App get started?
Angular 2 is a single page app and will contains only one file called index.html in the root folder. although this html file doennot even contains any js files then how the fuck it get started:

Index file
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>FirstApp</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>
  <app-root>Loading...</app-root>
</body>
</html>

Well when we compile and run the app then the angular-cli will dynamically add the required js files in the page. Which we can see the source in the page while its running


Well then where the fuck is our code?
The answer is it all we be inside the main.bundle.js file

here is the flow
  1. At first the angular app will always use main.ts file which will bootstrap the our app and create a js file at the run time. Inside teh main.ts file we have

    platformBrowserDynamic().bootstrapModule(AppModule);

    Which will load the AppModule from the module inside the app directory after importing it using

    import { AppModule } from './app/'; 
  2. Then the app will use the app.module.ts inside the app dir which will again bootstrap the AppComponent which we have created earlier in this series.

    bootstrap: [AppComponent]
  3. The Main this about angular 2 is that it will not load all the component at the beginning. It will only load the component which is in the index.html file which is app-root in our case. Its a lazy loading which will increase the performance.
  4. So the main flow is
    main.ts -> load the main module used in the index.html -> the main module will bootstrap the Component -> then main.ts will bootstrap the app and create a single main.bundle.js and add it to the main page -> then we enjoy :)

    Happy Coding geeks. In the next session we will talk about the AppModules \,,/



3 comments: