Scribd
Upload
199 views

Angular 14

The document discusses various concepts related to Angular including components, modules, routing, services and directives. It explains how to create an Angular application with modules, components and routing. It also provides examples of adding third party libraries like Bootstrap and creating CRUD operations by consuming a JSON server API.

Uploaded by

Bojja S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
199 views

Angular 14

The document discusses various concepts related to Angular including components, modules, routing, services and directives. It explains how to create an Angular application with modules, components and routing. It also provides examples of adding third party libraries like Bootstrap and creating CRUD operations by consuming a JSON server API.

Uploaded by

Bojja S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

The app-root tag is where our application

will be rendered
code/first-app/angular-hello-world/src/index.html

Callback Functions vs Async-Await vs


Promises
D:\devenv\ng14\app1>ng add @angular/material

Service Module contains only services (can be utility services)must be present only at
the root module

app.module.ts parent, all other modules will be directly or indirectly part of this
module. Only one root module is allowed in an application.
 A module is a class decorated with @NgModule. It serves as a registry (aka container)
for all the components, pipes, directives and providers in your application.

will register BrowserModule with that specific angular module instead of the entire Angular
framework.

D:\devenv\ng14\model>node --version
v16.15.1

D:\devenv\ng14\model>npm -v
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
8.11.0
D:\devenv\ng14\angular14-crud\material-pro-angular-lite-master\angular-14>ng generate
module contacts --routing
DEPRECATED: The 'defaultProject' workspace option has been deprecated. The project to use
will be determined from the current working directory.
CREATE src/app/contacts/contacts-routing.module.ts (251 bytes)
CREATE src/app/contacts/contacts.module.ts (288 bytes)

angular.json – angular.json file is an Angular Application Environment based


JSON file which contains all the information related to the project build and
deployment. It tells the system which files need to change when we use ng build
or ng serve command. 
 
main.ts - The main.ts file acts as the main entry point of our Angular application.
This file is responsible for the bootstrapper operation of our Angular modules. It
contains some important statements related to the modules and some initial
setup configurations like 
 enableProdMode – This option is used to disable Angular’s
development mode and enable Productions mode. Disabling
Development mode turns off assertions and other model-related
checks within the framework.
 platformBrowserDynamic – This option is required to bootstrap the
Angular app n the browser.
 AppModule – This option indicates which module acts as a root
module in the applications.
 environment – This option stores the values of the different
environment constants. 

import { enableProdMode } from "@angular/core";


import { platformBrowserDynamic } from "@angular/platform-
browser-dynamic";

import { AppModule } from "./app/app.module";


import { environment } from "./environments/environment";

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));

environment.prod.ts
export const environment = {
production: true
};

environment.ts
export const environment = {
production: false
};

.angular-cli.json
{
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets", "favicon.ico"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"prefix": "app",
"styles": ["styles.css"],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
}

* is only for the shorthand syntax for structural directives where you can for example use
<div *ngFor="let item of items">{{item}}</div>

<!-- Normal HTML -->


<input placeholder="some text">

<!-- Interpolation -->


<input placeholder="{{ variable }}">
<!-- Property Binding -->
<input [placeholder]="variable">

Angular NgModel
Angular NgModel is an inbuilt directive that creates a FormControl instance from
the domain model and binds it to a form control element.
The ngmodel directive binds the value of HTML controls (input, select,
textarea) to application data. 

The two-way binding uses the syntax of property binding and event binding
together. Property binding uses the syntax as bracket [] or bind- and event
binding uses the syntax as the parenthesis () or on- and these bindings are
considered one-way binding.
https://www.learmoreseekmore.com/
2022/06/angular-14-crud-example.html

 Angular components compose of 3 files like TypeScript File(*.ts),


Html File(*.html), CSS File(*.cs)
 Components typescript file and HTML file support 2-way binding
which means data flow is bi-directional
 Component typescript file listens for all HTML events from the
HTML file.
 package.json - contains commands like build, run, test, etc. It also
contains packages or library references that our angular application
requires.
 angular.json - contains setup and configurations of angular.
 src/index.html - Only HTML file of the angular application. It
contains the root angular component element like <app-root></app-
root>, area for our components to rendered.
 src/main.ts - entry file of our angular application to execute.
 src/app/app.modulet.ts - Entry module.
 src/app/app-routing.module.ts - Entry route module
 app(folder or root component folder) - contains root component like
'AppComponent' consist of files like 'app.component.ts',
'app.component.html', 'app.component.css'.

npm install -g @angular/cli

ng new firstapp

npm install -g json-server

npm run json-run

http://localhost:3000/fruits
{
  "fruits":[
    {
      "id": "1",
      "Name": "Mango",
      "Quantity": 10,
      "Price": 300

    }

npm install bootstrap

Add the bootstrap 'JS' & 'CSS' file path in 'angular.json'.

node_modules\bootstrap\dist\css\ bootstrap.min.css

node_modules\bootstrap\dist\js\ bootstrap.min.js

<nav class="navbar navbar-expand-lg navbar-dark bg-warning">


  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fruit Bowl</a>
  </div>
</nav>
<router-outlet></router-outlet>
 (Line: 1-5) Render the bootstrap menu
 (Line: 6) The 'router-outlet' is the default angular component. The
content of every route is rendered into it.

create a sample 'Fruits' module along with its route module ng


generate module fruits –routing

Now add our 'FruitModule' into the imports of the 'AppModule'.


import { FruitsModule } from './fruits/fruits.module';
imports: [
    BrowserModule,
    AppRoutingModule,
    FruitsModule
  ],

Let's create a child component like 'Home' inside of the 'fruits'


module. 

ng generate component fruits/home


D:\devenv\ng14\firstapp>ng generate component fruits/home

CREATE src/app/fruits/home/home.component.html (19 bytes)

CREATE src/app/fruits/home/home.component.spec.ts (585 bytes)

CREATE src/app/fruits/home/home.component.ts (268 bytes)

CREATE src/app/fruits/home/home.component.scss (0 bytes)

UPDATE src/app/fruits/fruits.module.ts (356 bytes)

Add HomeComponent rout in the 'FruitsRoutingModule'.


src/app/fruits/fruits-routing.module.ts:
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [


  {
  path: 'fruits/home',
  component: HomeComponent
  },
];
Now make the 'fruits/home' route as the default route by adding a
redirection in the 'AppRoutingModule'.
src/app/app-routing.modulet.ts:

Angular 14 features | what's new angular |


Angular 14 tutorial

You might also like