- Angular is a framework for building modern single-page application.
- Official docs tutorials - www.angular.io
- Each user action results in a full HTML page load.
sequenceDiagram
Browser->>Server: Full HTML Page Loads
Server-->>Browser:
- A web application that is composed of a single page
- Based on user actions, the application page is updated
sequenceDiagram
Browser->>Server: REST API for data
Server-->>Browser: Partioanl Page updates (Client side only)
- Maps
- Email Applications
- Citi-Bank Customer Service
- Microsoft Xbox portal
- Refer to - www.madewithangular.com
- Component-based framework
- Clean seperation of template coding and application logic
- Built-in support for data-binding and dependency injection
- Support responsive web design and modern frameworks such as Bootstrap, Google Material Design (Angular Material) and others
| Term | Definition |
|---|---|
| Component | Main player in an Angular application. Hash two parts: 1. View for user interface 2. Class that contains application logic/event handling for the view |
| View Template | The user interface for the component Static HTML with dynamic elements |
| Directive | Adds custom behavior to HTML elements Used for looping, conditionals etc |
| Service | Helper class that provides desired functionality Retrieving data from a server, performing a calculation, validation etc |
| Module | A collection of related components, directives, services etc |
- Angular provides a command-line tool to generate a project
- Generated the starter files to help you bootstrap your project
- http://cli.angular.io
- Project files - http://www.angular.io/guide/file-structure
# Install Angular CLI
> npm install --location=global @angular/[email protected]
> ng version
> ng help
# Creating New Project
> ng new <project-name>
> ng new my-first-angular-project
# Running the Angular App
> cd <project-name>
> cd my-first-angular-project
> ng serve
# Changing the server port
> ng serve --port 5100
# Creating new component
> ng generate component <component name>
> ng generate component sales-person-list
# Generate a Class
> ng generate class <Class name>
> ng generate class sales-person-list/SalesPerson
- src/index.html
- src/app/app.component.ts