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.