Angular Babel ESNext Starter
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 Typescript check out angular2-webpack-starter
- Uses Babel to support decorators.
- Same language constructs can be used as in Typescript (types will be stripped).
- Bundles files with Webpack.
- Automates tasks with Gulp.
- Automatically rebundles and refreshes the browser on changes.
- Unit testing with Karma and Jasmine.
- Code coverage for original ES6 code.
- Includes deployment to Heroku.
- Linting with ESlint based on Airbnb's styleguide.
- Layout and namings based on the official Angular 2 style guide
- Creating components with directives
- Communication between child and parent components
- Dependency injection for services
- Change detection strategies
- Using custom pipes in templates
- Handling HTTP calls
- Using observables
- Authentication and restricting access to routes
- Form handling
- Using custom validators in forms
- Internationalization with ngx-translate
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.
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.
To get a good overview of testing possibilities within Angular read this article.
No more is needed, code can be written as in Typescript!
Read about the details how it is implemented in this article.
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
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 firstname.lastname@example.org:angular2-es6-starter.git master