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.