{"flag":true,"single":true,"pageTitle":"Intro to Angular and installation , How angular works, add bootstrap to angular","post":{"id":44,"user_id":"1","slug":"intro-to-angular-and-installation-how-angular-works-add-bootstrap-to-angular-3mdj","title":"Intro to Angular and installation , How angular works, add bootstrap to angular","body":"<p>Angular is<\/p>\r\n<ul>\r\n<li>component-based framework,&nbsp;<\/li>\r\n<li>well-integrated libraries<\/li>\r\n<li>including routing<\/li>\r\n<li>forms management<\/li>\r\n<li>client-server communication<\/li>\r\n<li>A suite of developer tools to help you develop, build, test, and update your code<\/li>\r\n<\/ul>\r\n<p>Install the CLI using the npm package manager:<\/p>\r\n<pre class=\"language-markup\"><code>npm install -g @angular\/cli<\/code><\/pre>\r\n<p>ng help<\/p>\r\n<p><strong>create first app<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>ng new my-first-project\r\ncd my-first-project\r\nng serve<\/code><\/pre>\r\n<p>Install the bootsrap<\/p>\r\n<pre class=\"language-markup\"><code>npm install bootstrap<\/code><\/pre>\r\n<p>then open the<strong> angular.json<\/strong> and add<\/p>\r\n<pre class=\"language-markup\"><code>\"styles\": [\r\n              \"src\/styles.css\",\r\n              \"node_modules\/bootstrap\/dist\/css\/bootstrap.css\"\r\n            ],<\/code><\/pre>\r\n<p>When You Run the app your bootsrap will be injected to style.css<\/p>\r\n<p><strong>Flow Execution<\/strong><\/p>\r\n<p><strong>index.html&gt;main.ts&gt;app.module.ts<\/strong><\/p>\r\n<p><strong>1. <\/strong>First of all&nbsp;<strong>index.html<\/strong> is loaded.<\/p>\r\n<p><strong>2. <\/strong>then main.ts loaded.<\/p>\r\n<p>in the main.ts file, you typically import the <strong>platformBrowserDynamic <\/strong>function from the <strong>@angular\/platform-browser-dynamic module<\/strong>. This function is used to bootstrap the root module of your application, which is typically defined in the <strong>app.module.ts<\/strong> file.<\/p>\r\n<p>After importing the platformBrowserDynamic function, you call the <strong>bootstrapModule <\/strong>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.<\/p>\r\n<p>main.ts loads <strong>src\/app\/app.module.ts<\/strong> (it will load components, routing and staring point <strong>bootstrap: [AppComponent]<\/strong>)<\/p>\r\n<p><strong>3. app.module.ts<\/strong> is the&nbsp;<strong>entry point<\/strong> to your Angular application, where you import any required modules, components, services, and other dependencies.<\/p>\r\n<p>The app.module.ts file is also where you bootstrap AppComponent. The AppComponent is the <strong>first component that gets loaded<\/strong> when your application starts and it serves as the main container for all other components in your application.<\/p>\r\n<p>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.<\/p>\r\n<p><strong>4. <\/strong>it will load <strong>src\/app\/app.component.ts.<\/strong> And this will load <strong>html, js, and selectors define.&nbsp;<\/strong><\/p>","category_id":"13","is_private":"0","created_at":"2023-03-24T05:44:13.000000Z","updated_at":"2023-03-27T02:54:29.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Angular is  component-based framework,&nbsp; well-integrated libraries including routing forms management client-server communication A suit - Intro to Angular and installation , How angular works, add bootstrap to angular (Updated: March 27, 2023) - Read more about Intro to Angular and installation , How angular works, add bootstrap to angular at my programming site [SITE]","categories":[]}