generator-angular-api

RESTful fullstack generator with Angular CLI, Express.js and Mongoose. It has three options of design components, each one with a basic template to start developing, two icons library and authentication with the most used social medias.

How to create an app for authentication?

Generator Installation

First, install Yeoman and generator-angular-api using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-angular-api

Then generate your new project:

yo angular-api

Getting started

npm run dev

Run npm run dev for a dev server. The browser will load http://localhost:8080/. Wait until the app is built. At any change, the app will automatically rebuild and sync the browser.

Creating API endpoints

To generate a new API endpoit:

yo angular-api:endpoint

After that you may need to reload the server and the router will load dynamically the route.

.env

# Node Server Port
PORT=8000

# Node Server Url
APP_URL=http://localhost:8000/

# BrowserSync Proxy Url
CALLBACK_URL=http://localhost:8080/

# MongodDB Url
MONGO_DB_URI=mongodb://localhost:27017/angular-api

Optionally, run the command bellow to generate a fresh .env file.

yo angular-api:dotenv

Client Code scaffolding

You can use ng Angular CLI for client scaffolding.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the client/dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Packages

Front-end

This front-end was generated based on Angular CLI version 1.6.5.

Modules

Angular modules already added.

Name	Version	Docs	Description
Routes			Routes is an array of route configurations.
RouterModule			Adds router directives and providers.
HttpClientModule			NgModule which provides the HttpClient and associated services.
FormsModule			The ng module for forms.

Design components

The generator has three design options.

Name	Version	Docs
Bulma
Bootstrap
Angular Material

Icons

Name	Version	Docs
Font Awesome
Feather

Back-end

The API was built using Express and has support for MongoDB and Authentication (passportjs).

To run locally, requires MongoDB installed and running (Install MongoDB).

Packages

Name	Version	Docs	Description
express.js			Minimalist web framework for Node.js
mongoose			Elegant MongoDB object modeling for Node.js
body-parser			Node.js body parsing middleware
morgan			HTTP request logger middleware for node.js
bluebird			Bluebird is a fully featured promise library with focus on innovative features and performance
dotenv			Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.
passport			Express-compatible authentication middleware for Node.js.
cookie-parser			Parse HTTP request cookies.
express-session			Simple session middleware for Express.

File tree

├── client
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── pages
│   │   │   ├── home
│   │   │   │   ├── home.component.css
│   │   │   │   ├── home.component.html
│   │   │   │   ├── home.component.spec.ts
│   │   │   │   └── home.component.ts
│   │   │   ├── login (for authentication)
│   │   │   │   ├── login.component.css
│   │   │   │   ├── login.component.html
│   │   │   │   ├── login.component.spec.ts
│   │   │   │   └── login.component.ts
│   │   │   ├── not-found
│   │   │   |   ├── not-found.component.css
│   │   │   |   ├── not-found.component.html
│   │   │   |   ├── not-found.component.spec.ts
│   │   │   |    └── not-found.component.ts
│   │   │   └── profile (for authentication)
│   │   │       ├── profile.component.css
│   │   │       ├── profile.component.html
│   │   │       ├── profile.component.spec.ts
│   │   │       └── profile.component.ts
│   │   └── services
│   │       ├── app.service.spec.ts
│   │       └── app.service.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── .gitignore
├── .angular-cli.json
├── .editorconfig
├── .env
├── gulpfile.js
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── README.md
├── server
│   ├── index.js
│   ├── config
│   │   ├── auth.js (for authentication)
│   │   ├── passport.js (for authentication)
│   │   └── database.js
│   ├── lib
│   │   ├── controller.js
│   │   └── facade.js
│   ├── model
│   │   ├── food
│   │   │   ├── controller.js
│   │   │   ├── facade.js
│   │   │   ├── router.js
│   │   │   └── schema.js
│   │   └── user
│   │       ├── controller.js
│   │       ├── facade.js
│   │       ├── router.js
│   │       └── schema.js
│   └── routes.js
├── tsconfig.json
└── tslint.json

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.