{"id":13802733,"url":"https://github.com/sonicoder86/angular2-babel-esnext-starter","last_synced_at":"2025-04-06T02:12:34.793Z","repository":{"id":113389727,"uuid":"48641206","full_name":"sonicoder86/angular2-babel-esnext-starter","owner":"sonicoder86","description":"Angular development and testing examples with Babel in Javascript (ES6/ES7).","archived":false,"fork":false,"pushed_at":"2017-05-13T19:46:18.000Z","size":246,"stargazers_count":487,"open_issues_count":3,"forks_count":84,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-11-21T08:04:50.618Z","etag":null,"topics":["angular","babel","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sonicoder86.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-12-27T10:30:01.000Z","updated_at":"2024-10-23T08:16:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5adaf60-3032-4334-a6ef-5e89d2931633","html_url":"https://github.com/sonicoder86/angular2-babel-esnext-starter","commit_stats":null,"previous_names":["sonicoder86/angular2-babel-esnext-starter","blacksonic/angular2-babel-esnext-starter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fangular2-babel-esnext-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fangular2-babel-esnext-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fangular2-babel-esnext-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sonicoder86%2Fangular2-babel-esnext-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sonicoder86","download_url":"https://codeload.github.com/sonicoder86/angular2-babel-esnext-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423516,"owners_count":20936626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","babel","webpack"],"created_at":"2024-08-04T00:01:52.349Z","updated_at":"2025-04-06T02:12:34.776Z","avatar_url":"https://github.com/sonicoder86.png","language":"JavaScript","readme":"# Angular Babel ESNext Starter\n[![Dependency Status](https://david-dm.org/blacksonic/angular2-babel-esnext-starter.svg)](https://david-dm.org/blacksonic/angular2-babel-esnext-starter)\n[![devDependency Status](https://david-dm.org/blacksonic/angular2-babel-esnext-starter/dev-status.svg)](https://david-dm.org/blacksonic/angular2-babel-esnext-starter?type=dev)\n[![Build Status](https://travis-ci.org/blacksonic/angular2-babel-esnext-starter.svg?branch=master)](https://travis-ci.org/blacksonic/angular2-babel-esnext-starter)\n\nThis repository shows development and testing techniques with [Angular](https://angular.io/).\nThe application is written in modern Javascript without Typescript.\nIt can be ideal for those who are new to Angular and want to learn how things work \nand fiddle with Typescript later.\n\nIt is a basic CRUD application with authentication, similar to the news site [jslive.com](https://jslive.com).\nYou can see the list of links, add and edit them after you signed in.\n\n\u003e If you're looking for Angular in Javascript without Gulp tasks and server side check out [angular2-esnext-todomvc](https://github.com/blacksonic/angular2-esnext-todomvc)\n\n\u003e If you're looking for Angular in Typescript check out [angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter)\n\n- Modern Javascript implementation with classes, decorators.\n- Uses [Babel](https://babeljs.io/) to support decorators.\n- Same language constructs can be used as in Typescript (types will be stripped).\n- Bundles files with [Webpack](https://webpack.github.io/).\n- Automates tasks with [Gulp](http://gulpjs.com/).\n- Automatically rebundles and refreshes the browser on changes.\n- Unit testing with [Karma](https://karma-runner.github.io/0.13/index.html) and [Jasmine](http://jasmine.github.io/).\n- Code coverage for original ES6 code.\n- Includes deployment to [Heroku](https://heroku.com/).\n- Linting with [ESlint](http://eslint.org/) based on [Airbnb's styleguide](https://github.com/airbnb/javascript).\n- Layout and namings based on the [official Angular 2 style guide](https://angular.io/styleguide)\n\n### Concepts covered\n\n- Creating components with directives\n- Communication between child and parent components\n- Dependency injection for services\n- Change detection strategies\n- Using custom pipes in templates\n- Handling HTTP calls\n- Using observables\n- Routing\n- Authentication and restricting access to routes\n- Form handling\n- Using custom validators in forms\n- Internationalization with [ngx-translate](https://github.com/ngx-translate/core)\n\n### Quick Start\n\n```bash\n\ngit clone https://github.com/blacksonic/angular2-babel-esnext-starter.git\ncd angular2-babel-esnext-starter\nnpm install\n\ngulp serve\n\n```\n\nIt bundles the application, copies the static files and starts the webserver with Nodemon.\nThe transpiled application will have two separate ES5 compatible files: ```vendor.js``` for vendor libraries, ```boot.js``` for application logic.\nServer side changes restart the server, client side changes rebundle the Angular application and refresh the page with Livereload.\n\nNote: The application needs at least Node 6+ installed.\n\nOpen it in your browser [http://localhost:9000](http://localhost:9000) and start coding your first Angular application in Javascript!\n\n### Testing\n\n```bash\n\ngulp test\n\n```\n\nRuns tests with [Karma](https://karma-runner.github.io/0.13/index.html) and [Jasmine](http://jasmine.github.io/).\nUses a single entry point (```setup.spec.js```), which includes all the ```*.spec.js``` files and runs the tests inside them.\nThe test files can be found in the ```client/app``` folder next to the source files.\n\nBecause a clean bundling with Webpack can take multiple seconds, it is not ideal for development to run a clean test run every time.\nInstead it can run continuously on your development machine.\n\n```bash\n\ngulp test-dev\n\n```\n\nTo get a good overview of testing possibilities within Angular [read this article](https://medium.com/google-developer-experts/angular-2-unit-testing-with-jasmine-defe20421584).\n\n### Workarounds\n\n**No more is needed, code can be written as in Typescript!**\n\nRead about the details how it is implemented [in this article](http://shuheikagawa.com/blog/2016/05/08/angular-2-with-babel/).\n\n### Authentication\n\nIt is implemented with the router's built-in lifecycle events.\nFor a detailed explanation [read this article](https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9).\n\n### Deployment (to Heroku)\n\nIt bundles the client application and copies static files and server files to the ```dist``` directory along with ```package.json```.\nThen it can be commited to the desired location (for example Heroku).\n\n```bash\n\ngulp dist\n\ncd dist\ngit init\ngit add -A .\ngit commit -m \"Deploy #1\" \u0026\u0026 echo Committed\ngit push -f git@heroku.com:angular2-es6-starter.git master\n\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonicoder86%2Fangular2-babel-esnext-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonicoder86%2Fangular2-babel-esnext-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonicoder86%2Fangular2-babel-esnext-starter/lists"}