> For the complete documentation index, see [llms.txt](https://briebug.gitbook.io/angular-fundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://briebug.gitbook.io/angular-fundamentals/introduction-to-angular.md).
# 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