Home

Awesome

Angular Babel ESNext Starter

Dependency Status devDependency Status Build Status

This repository shows development and testing techniques with Angular. The application is written in modern Javascript without Typescript. It can be ideal for those who are new to Angular and want to learn how things work and fiddle with Typescript later.

It is a basic CRUD application with authentication, similar to the news site jslive.com. You can see the list of links, add and edit them after you signed in.

If you're looking for Angular in Javascript without Gulp tasks and server side check out angular2-esnext-todomvc

If you're looking for Angular in Typescript check out angular2-webpack-starter

Concepts covered

Quick Start


git clone https://github.com/blacksonic/angular2-babel-esnext-starter.git
cd angular2-babel-esnext-starter
npm install

gulp serve

It bundles the application, copies the static files and starts the webserver with Nodemon. The transpiled application will have two separate ES5 compatible files: vendor.js for vendor libraries, boot.js for application logic. Server side changes restart the server, client side changes rebundle the Angular application and refresh the page with Livereload.

Note: The application needs at least Node 6+ installed.

Open it in your browser http://localhost:9000 and start coding your first Angular application in Javascript!

Testing


gulp test

Runs tests with Karma and Jasmine. Uses a single entry point (setup.spec.js), which includes all the *.spec.js files and runs the tests inside them. The test files can be found in the client/app folder next to the source files.

Because a clean bundling with Webpack can take multiple seconds, it is not ideal for development to run a clean test run every time. Instead it can run continuously on your development machine.


gulp test-dev

To get a good overview of testing possibilities within Angular read this article.

Workarounds

No more is needed, code can be written as in Typescript!

Read about the details how it is implemented in this article.

Authentication

It is implemented with the router's built-in lifecycle events. For a detailed explanation read this article.

Deployment (to Heroku)

It bundles the client application and copies static files and server files to the dist directory along with package.json. Then it can be commited to the desired location (for example Heroku).


gulp dist

cd dist
git init
git add -A .
git commit -m "Deploy #1" && echo Committed
git push -f git@heroku.com:angular2-es6-starter.git master