• Stars
    star
    1,906
  • Rank 24,335 (Top 0.5 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 9 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ†– An AngularJS Starter repo for AngularJS + ES6 + Webpack

ng6-starter

NG6 Join Slack Join the chat at https://gitter.im/angularclass/NG6-starter

The de facto starter repo for building scalable apps with Angular, ES6, and Webpack

This repo serves as a minimal starter for those looking to get up-and-running with Angular and ES6, using Gulp and Webpack for the build process. This seed is not a Yeoman generator. It's a minimal starter with tasks for building the boilerplate. These are its features:

  • The best practice in directory/file organization for Angular (allowing for infinite horizontal app scaling)
  • A ready-to-go build system for working with ES6
  • Tasks for generating additional boilerplate Angular components
  • A full testing system in place
  • SASS support via node-sass

Check out the JSPM version--an alternative to Webpack as an ES6 build system.

If you're looking for a preliminary Angular 2 build, please use the angular2-webpack-starter.


Table of Contents

Walkthrough

Build System

NG6 uses NPM scripts, Gulp, and Webpack together for its build system. Yes, you don't need Gulp if you're using Webpack. This is true if your build system is only responsible for file manipulation. However, ours is not.

Webpack handles all file-related concerns:

  • Transpiling from ES6 to ES5 with Babel
  • Loading HTML files as modules
  • Transpiling stylesheets and appending them to the DOM
  • Refreshing the browser and rebuilding on file changes
  • Hot module replacement for transpiled stylesheets
  • Bundling the app
  • Loading all modules
  • Doing all of the above for *.spec.js files as well

Gulp is the orchestrator:

  • Starting and calling Webpack
  • Starting a development server (yes, Webpack can do this too)
  • Generating boilerplate for the Angular app

Check out the JSPM version--an alternative to Webpack as an ES6 build system.

File Structure

We use a componentized approach with NG6. This will be the eventual standard (and particularly helpful, if using Angular's new router) as well as a great way to ensure a tasteful transition to Angular 2, when the time is ripe. Everything--or mostly everything, as we'll explore (below)--is a component. A component is a self-contained concern--may it be a feature or strictly-defined, ever-present element of the UI (such as a header, sidebar, or footer). Also characteristic of a component is that it harnesses its own stylesheets, templates, controllers, routes, services, and specs. This encapsulation allows us the comfort of isolation and structural locality. Here's how it looks:

client
โ‹…โ‹…app/
โ‹…โ‹…โ‹…โ‹…app.js * app entry file
โ‹…โ‹…โ‹…โ‹…app.html * app template
โ‹…โ‹…โ‹…โ‹…common/ * functionality pertinent to several components propagate into this directory
โ‹…โ‹…โ‹…โ‹…components/ * where components live
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…components.js * components entry file
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…home/ * home component
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…home.js * home entry file (routes, configurations, and declarations occur here)
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…home.component.js * home "directive"
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…home.controller.js * home controller
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…home.scss * home styles
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…home.html * home template
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…home.spec.js * home specs (for entry, component, and controller)

Testing Setup

All tests are also written in ES6. We use Webpack to take care of the logistics of getting those files to run in the various browsers, just like with our client files. This is our testing stack:

  • Karma
  • Webpack + Babel
  • Mocha
  • Chai

To run tests, type npm test in the terminal. Read more about testing below.

Getting Started

Dependencies

Tools needed to run this app:

  • node and npm

Installing

  • fork this repo
  • clone your fork
  • npm install to install dependencies

Running the App

NG6 uses Gulp to build and launch the development environment. After you have installed all dependencies, you may run the app. Running npm start will bundle the app with webpack, launch a development server, and watch all files. The port will be displayed in the terminal.

Tasks

Here's a list of available tasks:

  • npm run build
    • runs Webpack, which will transpile, concatenate, and compress (collectively, "bundle") all assets and modules into dist/bundle.js. It also prepares index.html to be used as application entry point, links assets and created dist version of our application.
  • npm run serve
    • starts a dev server via webpack-dev-server, serving the client folder.
  • npm run watch
    • alias of serve
  • npm start (which is the default task that runs when typing gulp without providing an argument)
    • runs serve.
  • npm run component
    • scaffolds a new Angular component. Read below for usage details.

Testing

To run the tests, run npm test.

Karma combined with Webpack runs all files matching *.spec.js inside the app folder. This allows us to keep test files local to the component--which keeps us in good faith with continuing to build our app modularly. The file spec.bundle.js is the bundle file for all our spec files that Karma will run.

Be sure to define your *.spec.js files within their corresponding component directory. You must name the spec file like so, [name].spec.js. If you don't want to use the .spec.js suffix, you must change the regex in spec.bundle.js to look for whatever file(s) you want. Mocha is the testing suite and Chai is the assertion library. If you would like to change this, see karma.conf.js.

Examples

It's always easier to learn something if you have an examples. Here is a list of repos which based on this starter:

Generating Components

Following a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a gulp task to automate the "instantiation" of our components. The component boilerplate task generates this:

โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…componentName/
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…componentName.js // entry file where all its dependencies load
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…componentName.component.js
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…componentName.controller.js
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…componentName.html
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…componentName.scss // scoped to affect only its own template
โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…โ‹…componentName.spec.js // contains passing demonstration tests

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious. To generate a component, run npm run component -- --name componentName.

The parameter following the --name flag is the name of the component to be created. Ensure that it is unique or it will overwrite the preexisting identically-named component.

The component will be created, by default, inside client/app/components. To change this, apply the --parent flag, followed by a path relative to client/app/components/.

For example, running npm run component -- --name signup --parent auth will create a signup component at client/app/components/auth/signup.

Running npm run component -- --name footer --parent ../common creates a footer component at client/app/common/footer.

Because the argument to --name applies to the folder name and the actual component name, make sure to camelcase the component names.

Starter Kit Support and Questions

Contact us, anytime, regarding anything about this project.


enjoy โ€” PatrickJS

More Repositories

1

PatrickJS-starter

MFE Starter
JavaScript
10,326
star
2

awesome-angular

๐Ÿ“„ A curated list of awesome Angular resources
HTML
9,505
star
3

angular-websocket

โ†–๏ธ The missing Angular WebSocket module for connecting client applications to servers by @AngularClass
JavaScript
1,222
star
4

angular-hmr

๐Ÿ”ฅ Angular Hot Module Replacement for Hot Module Reloading
TypeScript
504
star
5

ngExam

An AngularJS exam with questions from beginner to expert by @gdi2290 from @AngularClass
363
star
6

Reddit-Insight

Reddit Analytics built in Angular.js
JavaScript
142
star
7

NG6-todomvc-starter

Basic example of TodoMVC application written with angular and with use of components
JavaScript
138
star
8

angular-md5

md5 for Angular.js and Gravatar filter
JavaScript
133
star
9

angular-idle-preload

๐Ÿ”œ Angular Idle Preload for preloading async routes via @TipeIO
TypeScript
99
star
10

angular-intercom

An Angular.js wrapper for Intercom.io providing a simple and familiar API for Angular Developer.
HTML
89
star
11

angular-raven

A Raven.js / Sentry wrapper for Angular.js
JavaScript
89
star
12

redis-dataloader

Batching and Caching layer using Redis as the Caching layer
JavaScript
86
star
13

node-everything

npm install everything. Please don't actually use this
82
star
14

awesome-cursorrules

๐Ÿ“„ A curated list of awesome .cursorrules files
59
star
15

ng-vegas-angular2-d3

Angular 2, d3, and TypeScript
JavaScript
53
star
16

angular-momentjs

Moment.js with Angular
JavaScript
46
star
17

angular-password

The most performant AngularJS directive for matching two password input fields
JavaScript
45
star
18

data-structures

Data Structures in Javascript, Ruby, and Coffeescript
JavaScript
43
star
19

angular2do

TodoMVC: React setState/Immutable data pattern done in Angular2
HTML
39
star
20

koa-angular-seed

An Angular.js seed for Koa apps with gulp, stylus, and browserify
JavaScript
36
star
21

list-of-morphic-javascript

Javascript Morphisms
36
star
22

angular-crypto

angular-crypto provides standard and secure cryptographic algorithms for Angular.js with support for: MD5, SHA-1, SHA-256, RC4, Rabbit, AES, DES, PBKDF2, HMAC, OFB, CFB, CTR, CBC, Base64
JavaScript
31
star
23

everyone-ssn-usa

releasing everyone's SSN and the hacks used to acquire them
JavaScript
22
star
24

es6-promise-loader

JavaScript
21
star
25

ng-conf-2016-universal-patterns

ng-conf 2016 universal patterns
TypeScript
21
star
26

ng4-universal-demo

TypeScript
21
star
27

ruby_calculator

The simplest form of a calculator made in Ruby 2.0.0
Ruby
20
star
28

core-js-webpack-plugin

core-js builder as a Webpack Plugin
JavaScript
15
star
29

es7-reflect-metadata

Webpack and Universal support for reflect-metadata refactored by @gdi2290
HTML
13
star
30

hackreactor-presentation-slides

my HackReactor presentation
JavaScript
12
star
31

request-idle-callback

requestIdleCallback for Angular
TypeScript
10
star
32

angular-off

Providing the method $off for $rootScope in Angular.js
JavaScript
9
star
33

play-angular2

[WIP] Universal Angular 2 server rendering with Scala Play Framework
JavaScript
9
star
34

angular2-webpack2-seed

angular2 webpack2 with tree-shaking and precompiler??
TypeScript
9
star
35

awesome-JAMstack

A collection of awesome JAMstack starters, workflows, articles, resources and shiny things.
9
star
36

angular-example-basic-form

An AngularJS example for a basic signup form example
JavaScript
9
star
37

angular-d3

d3 for Angular.js
JavaScript
8
star
38

angular-event-emitter

Event emitters for AngularJS
JavaScript
8
star
39

angular-keen.io

An Angular.js wrapper for Keen.io
JavaScript
8
star
40

angular-pokemon

Pokemon directive for Angular.js
JavaScript
8
star
41

generator-easy

An EASY stack generator, Express Angular Stylus Yeoman
CSS
7
star
42

angular-beforeunload

Angular.js service for onBeforeUnload
JavaScript
7
star
43

dokku-bower-gulp-build-plugin

dokku-bower-gulp-build is a plugin for dokku that runs bower install and gulp build in a post-release hook.
7
star
44

angular-cors

Fast CORs support for angular1
JavaScript
6
star
45

ngSanitize

angular-sanitize module without including angular.js for Backbone and other frameworks
JavaScript
6
star
46

angular2-falcor-starter

Angular 2 Universal FalcorJS starter kit by @AngularClass
TypeScript
6
star
47

bower-everything

bower install everything
JavaScript
6
star
48

simple-universal-starter

TypeScript
5
star
49

read-this-Howard

Status: offline!
5
star
50

angular-groupon

An Angular.js wrapper for Groupon API
JavaScript
5
star
51

no-zone.js

No Zone.js allows you to use zone.js API without actually using it. (recommended for advanced use cases only)
JavaScript
5
star
52

angular-uuid-secure

Most secure uuid generator in for Angular.js
JavaScript
4
star
53

angular-balanced

An Angular.js adapter for Balanced.js
4
star
54

angular2-webpack

Webpack helpers for Angular 2 via @AngularClass
JavaScript
4
star
55

ng-click

Passive URL shortening for Angular.JS Docs
JavaScript
4
star
56

github-commit-messages

This chrome extension will show and hide scoped messages so its easier to read quickly
JavaScript
4
star
57

angular-facebook

An Angular.js wrapper for Facebook API
4
star
58

traceur-compiler-loader

Up to date Traceur Compiler loader for Webpack
JavaScript
4
star
59

ngx-loader

ngx-loader
JavaScript
4
star
60

angular2-amp

angular2-amp: nothing to see here
4
star
61

javascript-class-examples

Different examples of OOP "class" with "inheritance" done using JavaScript including languages that transpile into js. Take notice to the amount of boilerplate that's needed in ES5 compared to ES6. These examples all have the same interface with pros/cons for each pattern. If they seem similar that's whole point especially the difference between prototypal and pseudo-classical.
JavaScript
4
star
62

Data-Collaborator

Data visualizations unlock insights and initiate important conversations Our tool, Data Collaborator, enables people to create data visualizations about their Fitbit data, and collaborate with their friends and family, doctors and personal trainers about insights they have about these visualizations
JavaScript
4
star
63

promises

Promises/A+ implementation base on http://promises-aplus.github.io/promises-spec/
JavaScript
3
star
64

git-mv

Keep the git history of your git mv files after undo
Shell
3
star
65

angular-pubnub

A PubNub component for Angular.js
JavaScript
3
star
66

angular-webrtc

3
star
67

angular-algolia

wip
3
star
68

es7-tools

An aggregation of tooling for using ES7 today
3
star
69

angular-async

Async unwrap filters for Angular1 from Angular2 AsyncPipe
HTML
3
star
70

universal-lit-html

Universal Rendering support for lit-html by Polymer
JavaScript
3
star
71

ng2dist

AsyncPipe build of angular 2
JavaScript
3
star
72

angular2-server-rendering

(Initial prototype) Angular 2 Server Rendering
JavaScript
3
star
73

FrontendMasters-2015-02-13-React

React.js Workshop with Ryan Florence
JavaScript
3
star
74

HackerTweet

JavaScript Twitter clone project for HackReactor pre-work made in Rails 4.0.0.beta1 and jQuery
JavaScript
3
star
75

ie-shim

ie-shim for Angular 2
JavaScript
3
star
76

angular-flux

Flux Application Architecture for Angular.js allow AngularJS apps to have unidirectional data flow in a single direction, in a cycle
3
star
77

made-at-hackreactor

Made at HackReactor built in Rails 3.2.13, Backbone.js 1.0.0, Redis 2.6.13, Socket.io 0.9, Node.js 0.10.12
JavaScript
3
star
78

angular-free-style

An Angular.js module for free-style that is designed to make cross-browser style objects easier to work with in JavaScript
JavaScript
3
star
79

angular2-example-falcor

Angular2 + FalcorJS
JavaScript
3
star
80

systemjs-d3

SystemJS wrapper for d3.js
2
star
81

preload_cache.js

PreloadCache: preload_cache defers cache until after the app bootstraps by providing deferred refs. NOTE: In process of moving this repo to angular/universal
HTML
2
star
82

test-static-file

testing static files
HTML
2
star
83

angular2-example-iot

Angular 2 example for Internet of Things
JavaScript
2
star
84

angular-bluebird

An Angular.js wrapper around Bluebird's API as $promise
2
star
85

angular2-universal-cluster

node cluster for Angular 2 Universal
TypeScript
2
star
86

node-hammerjs

Node "support" for hammerjs
JavaScript
2
star
87

gulp-loopback-angular

Gulp plugin for auto-generating Angular $resource services for LoopBack
2
star
88

gdi2290.github.io

HTML
2
star
89

lower-case

Lowercase a string in JavaScript
JavaScript
2
star
90

test-repo_login-to-see-resolved-comment

testing public resolved comments
2
star
91

underbar

this is for learning javascript
JavaScript
2
star
92

angular-reddit

Reddit API for Angular.js
2
star
93

angular-olark

An Angular.js service for Olark a live chat service
2
star
94

PatrickJS

2
star
95

awesome-rx

Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using observable sequences and LINQ-style query operators.
2
star
96

angular-alertify

JavaScript
2
star
97

is-iojs-production-ready-yet

is io.js production ready yet?
2
star
98

snake-case

Snake case a string in JavaScript
JavaScript
2
star
99

angular2-beta-to-rc-alias

Alias Angular 2 beta.17 3rd party modules to Angular 2 rc.3 modules
TypeScript
2
star
100

ng2for1

angular1 hacks for angular2 style coding
JavaScript
2
star