What is Angular

One framework. Mobile & desktop.

Angular

DEVELOP ACROSS ALL PLATFORMS

Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.

SPEED & PERFORMANCE

Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.

Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.

INCREDIBLE TOOLING

Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work.

LOVED BY MILLIONS

From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google’s largest applications.

A Simple Component

Angular components are usually split into four files

• An CSS file that will only be imported for the component at hand, and it will not override any of the styles for other components
• An HTML file, this will be what the user will see in the browser
• And two TypeScript files, one for the dynamic part of the code (.ts), of what the user will see in the browser, and another one for the unit tests of the code (.spec.ts)

Here is a sample code of a simple Angular component:

// src/app/hello-world/hello-world.component.css
h1 {
  color: pink;
}
p {
  color: cyan;
}

<!-- src/app/hello-world/hello-world.component.html -->
<h1>This is your title: \{\{ yourName \}\} </h1>
<p>hello-world works!</p>

// src/app/hello-world/hello-world.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { HelloWorldComponent } from './hello-world.component';

describe('HelloWorldComponent', () => {
  let component: HelloWorldComponent;
  let fixture: ComponentFixture<HelloWorldComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HelloWorldComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HelloWorldComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

// src/app/hello-world/hello-world.component.ts
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

  @Input() yourName = "Your Name Here";

  constructor() { }

  ngOnInit(): void {
  }

}

Tutorials

Check out more on the official Angular website.

Also, you can check out the official Angular Tutorials.