Angular seed project

This repository contains a seed project for Angular 1 client applications written in ES5/ES6. It is part of the Meanie eco system, which is a collection of boilerplate code and libraries for developing, testing and building javascript applications using the MEAN stack (MongoDB, Express, Angular and Node).

This seed project is built to work together side by side with the Express seed project for server side applications.

The build process for this seed project is powered by the Gulp 4 task runner and contains a script for running a light dev web server using BrowserSync.

Installation

You can install this seed project either by manually cloning the repository, or by using the Meanie CLI, which will make the process a bit easier.

Using the Meanie CLI

# Seed a new Angular project in the current directory
meanie seed angular

# Seed a new Angular project in the specified directory
meanie seed angular my-project

If you don't have the Meanie CLI tool installed, you can get it using:

npm install -g meanie

Cloning from github

# Create empty project directory
mkdir my-project
cd my-project

# Clone repository, remove .git folder
git clone https://github.com/meanie/angular-seed.git .
rm -rf .git

# Install dependencies
yarn #or
npm install

Running the project

Once installed, you can run the project using:

yarn start #or
npm start

This will build the app, launch browser sync and watch for file changes and rebuild as needed. Look in the package.json for other scripts available to you.

Folder structure

The following is an outline of the folder structure of this seed project:

# This is where your client side Angular application resides.
├─ app

  # Static assets for your application go here. This is a good
  # place to store fonts, images, pdf files, etc. Anything in here
  # will be copied as-is to the distribution folder.
  ├─ assets

  # This folder contains your applications main feature modules.
  ├─ components

    # The core application component
    ├─ app

    # The home module of your application. Feel free to rename to
    # anything that suits better (e.g. index, dashboard, ...)
    ├─ home

    # Any shared components (like interface elements) reside here.
    └─ shared

  # Any shared directives can go here.
  ├─ directives

  # Any shared services can go here.
  ├─ services

  # This folder contains the base styles for your application.
  # It's a good place to store all non component specific stylesheets.
  └─ styles

# This folder contains build configuration as well as all the tasks
# and utilities required to build your project.
├─ build

# This folder contains your environment specific application config.
# The config files are in YAML for convenience and are parsed during
# the build process and compiled into an Angular `Config` module.
├─ config

# Distribution folder for compiled files (generated by gulp build).
└─ dist

Automated tasks

Meanie comes with a full set of automated tasks using npm scripts powered by Gulp tasks.

Note: Meanie uses Gulp version 4. This version is not officially released yet, but you can install and use this version now by following these instructions.

Default

The default build task can be used to test, build, serve and watch your code. This is the main task you'll need for ongoing development:

npm start

You can also run all of the individual tasks separately.

Linting

Lint your code by running:

npm run lint

This will use ESLint to lint your code as per the rules defined in .eslintrc.yaml.

Testing

Lint your code and run your tests afterwards:

npm test

Build

Build the application and populate the dist folder with compiled javascript, stylesheets and static assets:

npm run build

The default build tasks builds your project for the dev environment. To build for the production environment, use:

npm run build:production

Watch

Watch your files for changes and run lint, test and build tasks as needed:

npm run watch

Deploy

To deploy to Firebase use:

npm run deploy

Make sure to update your project name in the package.json file.

Versioning

Use npm version to bump the version numbers in your package file, as well as commit the bump to the repository and tag it with the new version. This process uses semantic versioning.

# Bump the patch version (0.1.0 -> 0.1.1)
npm version patch

# Bump the minor version (0.1.0 -> 0.2.0)
npm version minor

# Bump the major version (0.1.0 -> 1.0.0)
npm version major

FAQ

Why can't I install this seed project with npm?

Unfortunately, npm currently doesn't support moving package code outside of the node_modules folder. Since this is a seed project, and as such it has to reside in your project folder and not in node_modules, the seed project can only be installed by cloning the git repository or using the Meanie CLI tool, as described above.

What if I want to use this seed project with a different server architecture?

No problem! While this seed project was built to work seemlessly together with the Meanie Express seed, you can use it with any server architecture or as a standalone Angular app as well.

Issues & feature requests

Please report any bugs, issues, suggestions and feature requests in the appropriate issue tracker:

Contributing

Pull requests are welcome! If you would like to contribute to Meanie, please check out the Meanie contributing guidelines.

License

(MIT License)