Developer Snippet Diary

Intro to Angular and installation , How angular works, add bootstrap to angular

Angular is

  • component-based framework, 
  • well-integrated libraries
  • including routing
  • forms management
  • client-server communication
  • A suite of developer tools to help you develop, build, test, and update your code

Install the CLI using the npm package manager:

npm install -g @angular/cli

ng help

create first app

ng new my-first-project
cd my-first-project
ng serve

Install the bootsrap

npm install bootstrap

then open the angular.json and add

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.css"
            ],

When You Run the app your bootsrap will be injected to style.css

Flow Execution

index.html>main.ts>app.module.ts

1. First of all index.html is loaded.

2. then main.ts loaded.

in the main.ts file, you typically import the platformBrowserDynamic function from the @angular/platform-browser-dynamic module. This function is used to bootstrap the root module of your application, which is typically defined in the app.module.ts file.

After importing the platformBrowserDynamic function, you call the bootstrapModule method of this function and pass in the root module of your application as an argument. This method initializes your Angular application and tells Angular to load the root module and its dependencies.

main.ts loads src/app/app.module.ts (it will load components, routing and staring point bootstrap: [AppComponent])

3. app.module.ts is the entry point to your Angular application, where you import any required modules, components, services, and other dependencies.

The app.module.ts file is also where you bootstrap AppComponent. The AppComponent is the first component that gets loaded when your application starts and it serves as the main container for all other components in your application.

After defining the root module and component in app.module.ts, you typically move on to creating other components, services, and modules that make up your application.

4. it will load src/app/app.component.ts. And this will load html, js, and selectors define. 

Posted by: R GONDAL
Email: rizikmw@gmail.com