Angular 2 CRUD generator

Before getting started with our tutorial ,we assume you have setup your development machine for working with Angular 2 since we are using Angular 2 .If not yet then you have to do it to install latest versions of Node.js and NPM .Then for the sake of this tutorial you need also to install Yeoman and generator-angular-2-crud from NPM registry .

Open up your terminal under Linux/MAC or your command prompt under Windows and type the following

npm install -g yo
npm install -g generator-angular-2-crud

Next you need to install TypeScript and webpack if they are not already installed because they are required by any Angular 2 project on development phase .

npm install --global typescript
npm install --global webpack
npm install --global webpack-dev-server

Now lets get started .

generator-angular-2-crud allows you to scaffold a new Angular 2 CRUD app ,all you need to is to provide it with a JSON data model that describes your models and how they are connected just like if you are modeling a database with some modeling tool .

So go ahead and create a new app folder

mkdir angular2-crud-example
cd angular2-crud-example
touch dataModel.json

Open up dataModel.json and compy paste the following model

    "Items": {
        "Id": { "key": "true" },
        "Label": { "type": "string", "require": "true" },
        "quantity": "number",
        "CustomerId": { "referent": "Customers", "render": "Name" }     
    "Customers": {
        "Id": { "key": "true" },
        "Name": { "type": "string", "require": "true" },
        "Address": "string"
    "relativeURI": "/api/v1"

Now to generate the Angular 2 project run on the root of folder

yo angular-2-crud

Then start your project

npm start 

Then go to to use your app .

That is it you should be able to find more information about this awesome tool from its Github repository

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status