Professional Documents
Culture Documents
What is Angular-Bootstrapping?
How is Angular loaded?
How do I create components using CLI?
What is the difference between Module and
Component?
Overview
Angular Application
After setting up development environment, use any IDE of your choice such as
Visual Studio Code
Visual Studio Code is a free tool and can be downloaded from the web
The above command downloads all required components and creates your
first Angular Application
npm -version
Node JS
ng -version
Angular CLI
ng new helloworld
Typescript
Angular setup
First Angular Application
Visual Studio Code
Section 2: Bootstrapping
Home Login
Appointment
Task View
component 2
component 3
MODULE
Module is a bundle of
functionality of our app
COMPONENT .Gives angular information
which features of app has in
use
Build web pages Modules are used to
organize areas of an Angular
application into cohesive
areas of functionality
Module may contain
multiple components
Declarations
@NgModule
Imports
Providers
Bootstraps
Section 3: Creating Components using CLI
ng generate component <componentname>
@Component({ @Component({
selector: 'app-appointment', selector: 'app-appointment',
templateUrl:
'./appointment.component.html', template:`<div><h1>hello</h1></div>`,
styleUrls: styleUrls:
['./appointment.component.css'] ['./appointment.component.css']
}) })
Section 5:Working with styles
You can add styles to components. In the app component, if
you want to limit it to just app component, then you can go to
app component css file, it would be limited to app component
You can use styling in styles[]
You can also use “attribute” selector
Section 6: Data Binding
{{Data}} (Interpolation)
H
[(ngModel = “data”)]
2 way Binding
END OF MODULE 1