moo-angular-starter v1.0.1
angular-starter-es6-webpack
This is an Angular Starter App with component and service generators using gulp for easy component development. Uses Karma-Mocha-Chai as test suit and Babel Loader and Webpack for ES6
Instructions for Installation
- Fork and Clone Repository.
- Open terminal and
cd
to path of the repo. - Install any node modules:
npm install
- Install gulp:
npm install gulp -g
Running the Enviornments
Development
npm run dev
Test (Karma-Mocha-Chai)
npm run test
Production
npm run build
Generators
This app comes with some helpful and generators for creating a new component/service. You simply have to hook them up to your components.js and services.js file.
To create a new component:
gulp component --name <NAME_OF_YOUR_COMPONENT>
To create a new common component:
gulp common_component --name <NAME_OF_YOUR_COMPONENT>
To create a new service
gulp service --name <NAME_OF_YOUR_SERVICE>
##Project Structure
/app
/assets
/images
/foo.png
/common
/button
/button.js
/button.component.js
/button.controller.js
/button.html
/button.scss
/button.test.js
/navbar/
/components.js
/components
/about
/about.js
/about.component.js
/about.controller.js
/about.html
/about.scss
/about.test.js
/home/
/components.js
/services
/users
/users.js
/users.service.js
/users.test.js
/documents/
/services.js
/app.config.js
/index.js
/index.html
/index.scss
Main/Entry File To the Project
index.js
is the main entry file which serves as the total include point for all of your components, services, assets, and styles.
Notice that throughout the project, that the angular setter/getter is called once, and is assigned to a constant which is passed through each of the dependancy trees so that it is exposed to the rest of the imported/exported components.
Why? Because this makes your components more modular, allowing whatever angular.module
object to be assigned to the exported component/component set.
// index.js
// Angular & Router ES6 Imports
import angular from 'angular';
import angularUIRouter from 'angular-ui-router';
import appComponents from './components/components.js';
import commonComponents from './common/components.js';
import appServices from './services/services.js';
import appConfiguration from './app.config';
// Single Style Entry Point
import './index.scss';
if (ENVIRONMENT === 'test') {
console.log('ENV:', ENVIRONMENT);
require('angular-mocks/angular-mocks');
}
const app = angular.module('app', ['ui.router']);
// Components Entrypoint
appComponents(app);
// Common Components Entrypoint
commonComponents(app);
// App Services Entrypoint
appServices(app);
// Router Configuration
// Components must be declared first since
// Routes reference controllers that will be bound to route templates.
// appConfiguration(app);
9 years ago