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
--------------------------------------
