this is just a very basic simple angluar mock example i created to show you how you can mock data from a file in angular and typescript. This is a very good way to load data fast when the data you have is static instead of fetching the data from a database.

to follow this short tutorial, i created a blank project with angular cli, the project name i gave it was example. i am using the current Angular CLI version which is: angular-cli: 1.0.0-beta.26

Command to create example project

$ng new example

Command to start the project

$ng serve --port 4401


NOTE: i am using port 4401, but the default port os 4400, with this option, you can setup a specific port
you can find this script in my computer under: /c/apachefriends/xampp/htdocs/angular2/MYNOTES/my-tutorial

now that you have a the default angular quickstart project we are going to edit the following files with the following content. in this example i will be using some jason data for car parts. we will create a file called mock.ts and car-part.ts

car-part.ts

crea a new flie called car-part.ts and add the following class:

export class CarPart {
    id:number;
    name:string;
    description:string;
    inStock:number;
    price:number;
}

mock.ts

Create a new file called mock.ts and add the following object

import { CarPart } from './car-part';

export const CARPARTS: CarPart[] = [{ // : carPart[] is typscript wich comes from the file called car-part.ts
		'id' : 1,
		'name' : 'Super Tires'
		'description' : 'These tires are the very best',
		'inStock' : 5,
		'price' : 4.99
	},
	{
		'id' : 2,
		'name' : 'Reinforced Shocks'
		'description' : 'Shocks are made from kryptonite',
		'inStock' : 4,
		'price' : 9.99
	},
	{
		'id' : 3,
		'name' : 'Padded Seats'
		'description' : 'super soft seats for a smotth ride',
		'inStock' : 0,
		'price' : 17.99
	}];

app.component.ts

Open app.component.ts and add the following:

import { CARPARTS } from './mock';
import { CarPart } from './car-part';

in app.component.ts  change class AppComponent to:

export class AppComponent {
     carParts : carPart[];    
    ngOnInit(){
        this.carParts = CARPARTS;
    }  
}

app.component.html

Open app.component.html and change the code to the following:

<pre>{{carParts[0] | json}}</pre>

now, go to the http://localhost:4201/ in your browser, you should see the object data for the first element in the carParts object