{"id":20434057,"url":"https://github.com/zewa666/angular_es6","last_synced_at":"2025-04-12T21:11:11.927Z","repository":{"id":25920833,"uuid":"29361861","full_name":"zewa666/angular_es6","owner":"zewa666","description":"Use ES6 with AngularJS 1.X","archived":false,"fork":false,"pushed_at":"2016-03-08T14:01:43.000Z","size":48,"stargazers_count":36,"open_issues_count":1,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T15:21:16.689Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/zewa666.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}},"created_at":"2015-01-16T18:29:53.000Z","updated_at":"2021-05-20T21:44:50.000Z","dependencies_parsed_at":"2022-08-24T07:40:19.756Z","dependency_job_id":null,"html_url":"https://github.com/zewa666/angular_es6","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zewa666%2Fangular_es6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zewa666%2Fangular_es6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zewa666%2Fangular_es6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zewa666%2Fangular_es6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zewa666","download_url":"https://codeload.github.com/zewa666/angular_es6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631676,"owners_count":21136562,"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":[],"created_at":"2024-11-15T08:23:36.729Z","updated_at":"2025-04-12T21:11:11.896Z","avatar_url":"https://github.com/zewa666.png","language":"JavaScript","readme":"# Angular ES6\n\nThis example shows how to use ES6 with [AngularJS](https://angularjs.org/).\n\nThe tools used are:\n* [NodeJS](http://nodejs.org/) as a general dependency\n* [Gulp](http://gulpjs.com/) for automation of the ES6 to ES5 transpilation as well as BrowserSync\n* [BrowserSync](http://gulpjs.com/) automatically refreshes your browser on js/html/css changes\n* [jspm](http://jspm.io/) modern Package Manager supporting ES6 Module Syntax\n* [BabelJS](https://babeljs.io/) for ES6 to ES5 transpilation\n* [isparta](https://github.com/douglasduteil/isparta) for ES6 code coverage\n\n## Development\nAll AngularJS Application files are located in the folder src/\nMake sure to start gulp watch (see below for howto) before doing changes in order to get\nthe source files automatically transpiled to the dist/ folder\n\n## How to start\n\nIn order to start the application do the following:\n\n1. Make sure that [NodeJS](http://nodejs.org/) is installed.\n2. Make sure that [Gulp](http://gulpjs.com/) is installed: `npm install -g gulp`\n3. Make sure that [jspm](http://jspm.io/) is installed: `npm install -g jspm`\n4. Go to the project folder\n5. Execute the following command to install all node-dependencies: `npm install`\n6. Now install all client-side dependencies with [jspm](http://jspm.io/): `jspm install`\n7. Start the application with the gulp watch task: `gulp watch`\n8. Open up your favorite Browser and navigate to [http://localhost:9000](http://localhost:9000) to see the app.\n\n## Using decorators\n\nThere is a base decorator called `@register` which performs generic component registrations. In order to save work\nyou may use one of the following concrete implementations, which allow you to omit the type information\n\n### Constants\n\n```js\nimport {constant} from './path/to/config/decorators';\n\n@constant\nexport default class MyConstant {\n  constructor () {\n    return 'my-constant';\n  }\n}\n```\n\n### Values\n\n```js\nimport {value} from './path/to/config/decorators';\n\n@value\nexport default class MyValue {\n  constructor () {\n    return 'my-value';\n  }\n}\n```\n\n### Factories\n\n```js\nimport {factory} from './path/to/config/decorators';\n\n@factory\nexport default class MyFactory {\n  constructor (/* dependancies */) { }\n}\n```\n\n### Services\n\n```js\nimport {service} from './path/to/config/decorators';\n\n@service\nexport default class MyService {\n  constructor (/* dependancies */) { }\n}\n```\n\n### Providers\n\n```js\nimport {provider} from './path/to/config/decorators';\n\n@provider\nexport default class MyProvider {\n  constructor (/* dependancies */) { }\n}\n```\n\n### Controllers\n\n```js\nimport {controller} from './path/to/config/decorators';\n\n@controller\nexport default class MyController {\n  constructor (/* dependancies */) { }\n}\n```\n\n### Directives\n\n```js\nimport {directive} from './path/to/config/decorators';\nimport {baseURL} from './path/to/config/constants';\n\n@directive({\n  restrict: 'E',\n  templateUrl: `${baseURL}/path/to/the/template.html`\n})\nexport default class MyController {\n  constructor (/* dependancies */) {\n    this.foo = 'bar';\n  }\n}\n\n// In template.html :\n\n\u003cp\u003e{{ ctrl.foo }} will display \"bar\"\u003c/p\u003e\n```\n\n### Filters\n\n```js\nimport {filter} from './path/to/config/decorators';\n\n@filter\nexport default class MyFilter {\n  constructor (/* dependancies */) { }\n  filter (input) {\n    return input.toUpperCase();\n  }\n}\n```\n\n### Injections\n\nIn order to inject existing components/services into your new component you can leverage the following decorator as\ndepicted in the example below.\n\n```js\nimport {inject} from './path/to/config/decorators';\n\n@controller\n@inject('$http', 'MyService')\nexport default class MyController {\n  constructor ($http, MyService) { }\n}\n```\n\n### Injection as a property\n\nLet's say you want to inject a component/service but use it with a different property name. In order to do so use the\n`injectAs` decorator\n\n```js\nimport {inject, injectAs} from './path/to/config/decorators';\n\n@controller\nexport default class MyController {\n  @inject $http = null;\n  @inject MyService = null;\n  @injectAs('$q') Promise = null;\n  doSomething () {\n    return this.Promise((resolve, reject) {\n      $http.get(this.MyService.path)\n        .success(data =\u003e resolve(data)\n        .error(err =\u003e reject(err));\n    });\n  }\n}\n```\n\n\n## Running Unit Tests\n\nIn order to run the unit tests do all mentioned steps from above and the additional ones:\n\n1. Make sure that [Karma](http://karma-runner.github.io/) CLI is installed:\n  ```shell\n  npm install -g karma-cli\n  ```\n2. Start the Karma Runner with:\n  ```shell\n  karma start\n  ```\n\n## Running code coverage\n\nTo create a full code-coverage report execute the following command:\n```shell\ngulp cover\n```\n  \nThis will result in a new folder called `coverage` in your project. It contains an index.html, which you can open with\nyour browser to get a nice code-coverage-report\n\n\n## Credits\nSpecial thanks goes to [Hadrien Lanneau](https://github.com/hadrienl) for his great contribution to this project\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzewa666%2Fangular_es6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzewa666%2Fangular_es6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzewa666%2Fangular_es6/lists"}