{"name":"Angular 2 Starter","tagline":"An Angular 2 Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by @AngularClass","body":"[](http://badge.fury.io/gh/angular-class%2Fangular2-webpack-starter)\r\n[](https://david-dm.org/angular-class/angular2-webpack-starter)\r\n[](http://issuestats.com/github/angular-class/angular2-webpack-starter)\r\n[](http://issuestats.com/github/angular-class/angular2-webpack-starter)\r\n\r\n<p align=\"center\">\r\n <a href=\"https://angularclass.com\" target=\"_blank\">\r\n <img src=\"https://cloud.githubusercontent.com/assets/1016365/9863762/a84fed4a-5af7-11e5-9dde-d5da01e797e7.png\" alt=\"Webpack and Angular 2\" width=\"500\" height=\"320\"/>\r\n </a>\r\n</p>\r\n\r\n# Angular2 Starter [](https://gitter.im/angular-class/angular2-webpack-starter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\r\n\r\n\r\n> A starter kit featuring [Angular 2](https://angular.io) ([Router](https://angular.io/docs/js/latest/api/router/), [Forms](https://angular.io/docs/js/latest/api/forms/),\r\n[Http](https://angular.io/docs/js/latest/api/http/),\r\n[Services](https://gist.github.com/gdi2290/634101fec1671ee12b3e#_follow_@AngularClass_on_twitter),\r\n[Tests](https://angular.io/docs/js/latest/api/test/), [E2E](https://angular.github.io/protractor/#/faq#what-s-the-difference-between-karma-and-protractor-when-do-i-use-which-)), [Karma](https://karma-runner.github.io/), [Protractor](https://angular.github.io/protractor/), [Jasmine](https://github.com/jasmine/jasmine), [TypeScript](http://www.typescriptlang.org/), and [Webpack](http://webpack.github.io/) by [AngularClass](https://angularclass.com).\r\n\r\n> If you're looking for Angular 1.x please use [NG6-starter](https://github.com/angular-class/NG6-starter)\r\n\r\nThis repo serves as a starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using a [Webpack](http://webpack.github.io/) for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.\r\n* Best practice in file and application organization for Angular 2.\r\n* Ready to go build system using Webpack for working with TypeScript.\r\n* Test and end-to-end system using Karma and Protractor.\r\n\r\n\r\n```coffeescript\r\nWarning: Angular 2.0 is not production ready yet!\r\n```\r\n[Is Angular 2 Ready Yet?](http://splintercode.github.io/is-angular-2-ready/)\r\n\r\n### Quick start\r\n> Clone/Download the repo then edit `app.ts` inside [`/src/app/app.ts`](/src/app/app.ts)\r\n\r\n```bash\r\n# clone our repo\r\ngit clone https://github.com/angular-class/angular2-webpack-starter.git \r\n\r\n# change directory to our repo\r\ncd angular2-webpack-starter\r\n\r\n# then open your browser and go to http://localhost:3000\r\nnpm start \r\n```\r\n\r\n# Table of Contents\r\n* [File Structure](#file-structure)\r\n* [Getting Started](#getting-started)\r\n * [Dependencies](#dependencies)\r\n * [Installing](#installing)\r\n * [Running the app](#running-the-app)\r\n* [Contributing](#contributing)\r\n* [TypeScript](#typescript)\r\n* [Frequently asked questions](#frequently-asked-questions)\r\n* [Support, Questions, or Feedback](#support-questions-or-feedback)\r\n* [License](#license)\r\n\r\n\r\n## File Structure\r\nWe use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:\r\n```\r\nangular2-webpack-starter/\r\n ├──src/ * our source files that will be compiled to javascript\r\n │ │\r\n │ ├──app/ * WebApp: folder\r\n │ │ ├──app.ts * App.ts: a simple version of our App component components\r\n │ │ └──bootstrap.ts * entry file for app\r\n │ │\r\n │ ├──bindings/ * where common files used throughout our app\r\n │ │ ├──location_bindings.ts * injectables to change the Router location Strategy\r\n │ │ └──change_detection_bindings.ts * injectables to change Angular's Change Detection Strategy\r\n │ │\r\n │ ├──public/ * static assets are served here\r\n │ │ ├──lib/ * static libraries\r\n │ │ │ └──es6-shim.js * ignore this file. This is needed to polyfill the browser to for ES6 features to similarly\r\n │ │ │\r\n │ │ ├──favicon.ico * replace me with your own favicon.ico\r\n │ │ ├──service-worker.js * ignore this. Web App service worker that's not complete yet\r\n │ │ ├──robots.txt * for search engines to crawl your website\r\n │ │ ├──human.txt * for humans to know who the developers are\r\n │ │ │\r\n │ │ └──index.html * Index.html: where we place our script tags\r\n │ │\r\n │ └──typings/ * where we define our custom types\r\n │ ├──ng2.d.ts * where we patch angular2 types with our own types until it's fixed\r\n │ └──_custom.d.ts * we include all of our custom types here\r\n │\r\n ├──tsd_typings/ * ignore this auto generated file from tsd\r\n │ └──tsd.d.ts * ignore this our main file for all of our type definitions\r\n │\r\n ├──test/ * this is our global unit tests and end-to-end tests\r\n │\r\n ├──spec.bundle.js * ignore this magic that sets up our angular 2 testing environment\r\n ├──karma.config.js * karam config for our unit tests\r\n ├──protractor.config.js * protractor config for our end-to-end tests\r\n ├──tsconfig.json * config that webpack uses for typescript\r\n ├──tsd.json * config that tsd uses for managing it's definitions\r\n ├──package.json * what npm uses to manage it's dependencies\r\n └──webpack.config.js * our webpack config\r\n```\r\n\r\n# Getting Started\r\n## Dependencies\r\nWhat you need to run this app:\r\n* `node` and `npm` (`brew install node`)\r\n* Ensure you're running the latest versions Node `v0.12.2`+ and NPM `2.10.0`+\r\n\r\nOnce you have those, you should install these globals with `npm install --global`:\r\n* `webpack` (`npm install --global webpack`)\r\n* `webpack-dev-server` (`npm install --global webpack-dev-server`)\r\n* `karma` (`npm install --global karma-cli`)\r\n* `protractor` (`npm install --global protractor`)\r\n\r\n## Installing\r\n* `fork` this repo\r\n* `clone` your fork\r\n* `npm install` to install all dependencies\r\n* `npm run server` to start the dev server in another tab\r\n\r\n## Running the app\r\nAfter you have installed all dependencies you can now run the app. Run `npm run server` to start a local server using `webpack-dev-server` which will watch, build (in-memory), and reload for you. The port will be displayed to you as `http://localhost:3000` (or if you prefer IPv6, if you're using `express` server, then it's `http://[::1]:3000/`).\r\n \r\n### server\r\n```bash\r\n$ npm run server # or either webpack-dev-server or npm run express\r\n```\r\n\r\n## Other commands \r\n\r\n### build files\r\n```bash\r\n$ npm run build # or webpack\r\n```\r\n\r\n### watch and build files\r\n```bash\r\n$ npm run watch # or webpack --watch\r\n```\r\n\r\n### run tests \r\n```bash\r\n$ npm run test # or karma start\r\n```\r\n\r\n### run webdriver (for end-to-end)\r\n```bash\r\n$ npm run webdriver-start # or webdriver-manager start\r\n```\r\n\r\n### run end-to-end tests\r\n```bash\r\n# make sure you have webdriver running and a sever for the client app\r\n$ npm run e2e # or protractor\r\n```\r\n\r\n# Contributing\r\nYou can include more examples as components but they must introduce a new concept such as `Home` component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request\r\n\r\n# TypeScript\r\n> To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.\r\n\r\n## Use latest TypeScript compiler\r\nTypeScript 1.5 includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.\r\n\r\n $ npm install --global typescript\r\n\r\n## .d.ts Typings\r\nThe TSD typings in `tsd_typings/` are autogenerated.\r\n\r\n $ npm install --global tsd\r\n > You may need to require `reference path` for your editor to autocomplete correctly\r\n ```\r\n /// <reference path=\"/src/typings/_custom.d.ts\" />\r\n ```\r\n \r\n If your editor only works with reference path here's the convention I'm using\r\n \r\n`/src/typings/` hand written typings for when you need to create/update one for a library \r\n\r\n`/src/typings/_custom.d.s` main file to require everything (reference path this file)\r\n\r\n`/src/typings/tsd.d.ts` requires tsd_typings\r\n\r\n`/tsd_typings/` tsd typings (like node_modules these files live and generates at root level)\r\n\r\n Otherwise including them in `tsd.json` is much prefered \r\n\r\n## Use a TypeScript-aware editor\r\nWe have good experience using these editors:\r\n\r\n* [Visual Studio Code](https://code.visualstudio.com/)\r\n* [Webstorm 10](https://www.jetbrains.com/webstorm/download/)\r\n* [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)\r\n* [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)\r\n\r\n# Frequently asked questions\r\n* Why we are using traceur-runtime?\r\n * This for the ES6 polyfills.\r\n* If TypeScript compiles to ES5 why do we need traceur-runtime?\r\n * Angular 2 framework itself expects these ES6 features.\r\n* What's the current browser support for Angular 2 Alpha?\r\n * As of version 2.0.0-alpha.26: Chrome (43, 44, 45), Firefox (37, 39, 40), IE 11, Safari 8, iOS 8, Android 5.1 (Chrome Mobile 39).\r\n* What is the `TypeScript warning \"Value of type 'typeof Directive' is not callable. Did you mean to include 'new'?`\"?\r\n * This is an error with the typings defined in DefinitelyTyped (please ignore until it's fixed)\r\n* How do I use `moduleId` with `module.id` in webpack?\r\n * Please use `__filename` if you must use `templateUrl` and `styleUrls` rather than webpack's module system\r\n* Why is my service not injecting parameter correctly?\r\n * Please use `@Injectable()` for your service for typescript to corrrectly attach the metadata (this is a typescript beta problem)\r\n* Where do I write my tests? \r\n * You can write your tests anywhere you like either next to your components or in the `test/` folder\r\n* Is Angular 2 production ready yet?\r\n * No, please visit [Is Angular 2 Ready Yet?](http://splintercode.github.io/is-angular-2-ready/) website.\r\n* How do I start the app when I get `EACCES` and `EADDRINUSE` errors? \r\n * The `EADDRINUSE` error means the port `3000` is currently being used and `EACCES` is lack of permission for webpack to build files to `./__build__/`\r\n* Why am I getting lots of warnings when starting the repo?\r\n * You need to run `tsd install` this happens when tsd didn't install correctly or at all\r\n\r\n\r\n# Support, Questions, or Feedback\r\n> Contact us anytime for anything about this repo or Angular 2\r\n\r\n* [Gitter: angular-class/angular2-webpack-starter](https://gitter.im/angular-class/angular2-webpack-starter)\r\n* [Twitter: @AngularClass](https://twitter.com/AngularClass)\r\n\r\n\r\n# Other Seed/Starter/Example Repos\r\n* [angular2-webpack-starter (AngularClass)](https://github.com/angular-class/angular2-webpack-starter)\r\n * Client/Server, Webpack, TypeScript, TSD, Protractor, Karma, Jasmine, Env Dev/Prod, Server API\r\n* [ng2-play.ts (Pawel Kozlowski)](https://github.com/pkozlowski-opensource/ng2-play.ts)\r\n * Client only, Minimalist, SystemJS, Gulp, TypeScript\r\n* [angular2-seed (Minko Gechev)](https://github.com/mgechev/angular2-seed)\r\n * Client only, SystemJS, Gulp, TypeScript, TSD, Versioned, Env Dev/Prod\r\n* [ng2-play (Roland Groza)](https://github.com/rolandjitsu/ng2-play)\r\n * Client only, ES6, TypeScript, Firebase, Gulp, Ci, TSD, TSLint\r\n* [ng2-jspm-seed (Rob Wormald)](https://github.com/robwormald/ng2-jspm-seed)\r\n * Client only, TypeScript, TSD, Gulp, JSPM, Minimalist\r\n* [babel-angular2-app (Shuhei Kagawa)](https://github.com/shuhei/babel-angular2-app)\r\n * Client only, Minimalist, Babel, ES6+, Webpack (outdated)\r\n \r\n___\r\n\r\nenjoy — **AngularClass** \r\n\r\n<br><br>\r\n\r\n[![AngularClass](https://cloud.githubusercontent.com/assets/1016365/9863770/cb0620fc-5af7-11e5-89df-d4b0b2cdfc43.png \"Angular Class\")](https://angularclass.com)\r\n##[AngularClass](https://angularclass.com)\r\n> Learn AngularJS, Angular 2, and Modern Web Development form the best.\r\n> Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]\r\n\r\n# License\r\n [MIT](/LICENSE)","google":"UA-71073175-3","note":"Don't delete this file! It's used internally to help with page regeneration."}