MENU


Angular

Alexa's Ranking: 7,378

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps:

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.


<!—app.component.html --><app-top-bar></app-top-bar><div class="container">
  <router-outlet></router-outlet></div>

// app.component.tsimport { Component } from '@angular/core';@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]})export class AppComponent
  {}

// app.module.tsimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { RouterModule } from '@angular/router';import { ReactiveFormsModule } from '@angular/forms';import { AppComponent } from './app.component';import { TopBarComponent } from './top-bar/top-bar.component';import { ProductListComponent } from './product-list/product-list.component';@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent
  ],
  bootstrap: [ AppComponent ]})export class AppModule { }

// products.tsexport const products = [
  {
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    name: 'Phone Standard',
    price: 299,
    description: ''
  }];

The code samples are written using TypeScript (12.3.1).