# Introduction to Angular
## What is Angular?
### Angular is:
* Maintained by Google and the community
* Client side framework for creating powerful web applications
* Evolved from AngularJS and is continually being improved
* Open Source (MIT License)
### Documentation
{% hint style="info" %}
Angular is rarely just "installed", tools like the CLI help us create and configure our applications
{% endhint %}
### QuickStart
The quick-start guide is a great place to start learning how to build your first application
## Angular Features
* Made for creating modern web applications
* Separation of concerns - MVC
* Dependency Injection
* Testing using Karma and Jasmine
* E2E testing with Protractor
* Angular CLI standardizes project setup, build, and deploy
* Supports performance and SEO optimizations using lazing loading and Angular Universal
* Community tooling
## Why Angular?
* Manage complexity
* Backend API calls
* Validating user input
* Application Navigation
* User/System events
* Superior tooling
* TypeScript
* Enterprise ready
## Architecture Overview
* Components
* Services
* Directives
* Pipes
* Modules
## Angular vs AngularJS
* Fixed fundamental architecture issues
* Replaces controllers with components
* Modules to help organize code
* TypeScript
* Angular-CLI
## My First Angular Application
### Install the Angular CLI
```
npm install -g @angular/cli
```
### Create my first Angular application
```
ng new my-app
```
{% hint style="info" %}
Pro Tip: create a folder in your home/root directory called repo and put all your projects there.
{% endhint %}
### What was created?
{% hint style="info" %}
Use an editor like VS Code to make changes to your code. Using ctrl-shift-P you can configure VS code to open from the command line. If properly configured you can open VS Code using:
`code .`
{% endhint %}
### Running my application
```
ng serve
```
## How does it work?
### index.html
{% code title="index.html" %}
```markup
AngularFundamentalsDemo
```
{% endcode %}
### app.component.ts
{% embed url="" %}
### app.module.ts
{% code title="app.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
{% endcode %}
### main.ts
{% code title="main.ts" %}
```typescript
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environment/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
```
{% endcode %}
## Angular Wire-up
* Application must be contained in a single module (can have multiple sub-modules)
* Angular-CLI generates
* app.module.ts
* imports
* components
* services
* modules
* main.ts
* Bootstraps the app.module
* index.html
* Renders app.component.ts using app-root selector
## Modify our application
### Create username form
{% code title="app.component.html" %}
```markup
Enter your username:
{{message}}
```
{% endcode %}
{% embed url="" %}
{% hint style="danger" %}
Error: Can't bind to 'ngModel' since it isn't a known property of 'input'. This type of error is telling us that we are using something that Angular hasn't been informed of. This typically means that we forgot to import a module, which we will do next.
{% endhint %}
### Adding the Forms Module
{% code title="app.module.ts" %}
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
{% endcode %}
## Angular Build Process
```
ng build
```
### Build Artifacts
The Angular-CLI builds the application, creates a dist folder, and places artifacts into the folder.
### Angular adds the build artifacts automatically
{% code title="index.html" %}
```markup
MyApp
```
{% endcode %}
## Summary
* We learned
* Basic features of Angular
* How to create an Angular application
* How Angular wires up my application
* Files created by Angular-CLI
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://briebug.gitbook.io/angular-fundamentals/introduction-to-angular.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.