Scribd
Upload
8 views4 pages

Angular

Uploaded by

aditya
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
8 views4 pages

Angular

Uploaded by

aditya
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/ 4

12.

Angular Under the Hood

------------------------------

Angular.json

here we set some configurations for the angular application itself

if we are serving for diff environments , we can specify specific configurations right here

holds info about angular projects and some more configurations

package.json

this one related to npde js or npm , contains all the dependencies

.gitignore

all files that are ignored by version control system like git

node_modules

inside this folder we have all of our packages and dependencies

,not only link to it but the real packages with all of its content

src

now the most important folder is the source folder , src

we are working here most of time

index.html

this is the main page/home page

and here we are injecting the <app-root> (this is selector )

the cli has created one component ,

our application has one main component app-component,

components are the building blocks , we can have many components


this is your first component that autometically gets created

you can see this indicated by the decorator here,

-------------------------------------------------------

import { Component } from '@angular

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'appointment-app';

@Component

it is turning this class into a component

index.html

------------

..

<app-root>

..

above shows that inside this we want to show app-root component

goes to app.component.ts(associated to this)

inside of this app.component.ts ,we can see the selector for this
component here for this is called app-root( selector: 'app-root')

associated to this we got app.component.html

and related styling is app.component.css

app.component.spec.ts - for testing

13. Components

----------------

Components are the main building block of the application

so when you are adding a new functionality to the application, chances are high that you will add

a new coponent to the application

for example if you have invoice managent system

------------------------------------------------

you have some component for mnagaing invoices,

and then you want to add some users later on , you probably will add a new component to manage
users,

we have already dicovered out first component, it will autometicaly get created , when you do ng
new

one-way Binding

------------------------

@Component({…})

Export class MyComponent{

Message = ‘Hello World’

Template(html);
{{ message }}

14. Creating the appointment list component


-------------------------------------------------------------
ng g component appointment-list

A component is declared inside of a single module

16. One-way data binding


--------------------------------------

You might also like