Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
An Angular 2 starter kit featuring Angular 2 (Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by AngularClass.
If you're looking for Angular 1.x please use NG6-starter
This seed repo serves as an Angular 2 starter for anyone looking to get up and running with Angular 2 and TypeScript fast. Using a Webpack 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.
- Best practices in file and application organization for Angular 2.
- Ready to go build system using Webpack for working with TypeScript.
- Angular 2 examples that are ready to go when experimenting with Angular 2.
- A great Angular 2 seed repo for anyone who wants to start their project.
- Testing Angular 2 code with Jasmine and Karma.
- end-to-end Angular 2 code using Protractor.
Warning: Angular 2.0 is not production ready yet!Clone/Download the repo then edit app.ts inside /src/app/app.ts
# clone our repo
git clone https://github.com/angular-class/angular2-webpack-starter.git
# change directory to our repo
cd angular2-webpack-starter
# install the repo with npm
npm install
# start the server
npm start go to http://localhost:3000 in your browser
- File Structure
- Getting Started
- Contributing
- TypeScript
- Frequently asked questions
- Support, Questions, or Feedback
- License
We 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:
angular2-webpack-starter/ ├──src/ * our source files that will be compiled to javascript │ │ │ ├──app/ * WebApp: folder │ │ ├──app.ts * App.ts: a simple version of our App component components │ │ └──bootstrap.ts * entry file for app │ │ │ ├──bindings/ * where common files used throughout our app │ │ ├──location_bindings.ts * injectables to change the Router location Strategy │ │ └──change_detection_bindings.ts * injectables to change Angular's Change Detection Strategy │ │ │ ├──public/ * static assets are served here │ │ ├──lib/ * static libraries │ │ │ └──es6-shim.js * ignore this file. This is needed to polyfill the browser to for ES6 features to similarly │ │ │ │ │ ├──favicon.ico * replace me with your own favicon.ico │ │ ├──service-worker.js * ignore this. Web App service worker that's not complete yet │ │ ├──robots.txt * for search engines to crawl your website │ │ ├──human.txt * for humans to know who the developers are │ │ │ │ │ └──index.html * Index.html: where we place our script tags │ │ │ └──typings/ * where we define our custom types │ ├──ng2.d.ts * where we patch angular2 types with our own types until it's fixed │ └──_custom.d.ts * we include all of our custom types here │ ├──tsd_typings/ * ignore this auto generated file from tsd │ └──tsd.d.ts * ignore this our main file for all of our type definitions │ ├──test/ * this is our global unit tests and end-to-end tests │ ├──spec.bundle.js * ignore this magic that sets up our angular 2 testing environment ├──karma.config.js * karma config for our unit tests ├──protractor.config.js * protractor config for our end-to-end tests ├──tsconfig.json * config that webpack uses for typescript ├──tsd.json * config that tsd uses for managing it's definitions ├──package.json * what npm uses to manage it's dependencies └──webpack.config.js * our webpack config
What you need to run this app:
- node and npm (brew install node)
- Ensure you're running the latest versions Node v4.1.1+ and NPM 2.10.0+
Once you have those, you should install these globals with npm install --global:
- webpack (npm install --global webpack)
- webpack-dev-server (npm install --global webpack-dev-server)
- karma (npm install --global karma-cli)
- protractor (npm install --global protractor)
- fork this repo
- clone your fork
- npm install to install all dependencies
- npm run server to start the dev server in another tab
After 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/).
npm run server # or either webpack-dev-server or npm run expressnpm run build # or webpacknpm run watch # or webpack --watchnpm run test # or karma startnpm run webdriver-start # or webdriver-manager start# make sure you have webdriver running and a sever for the client app
npm run e2e # or protractor# builds a bundle and serves it on port 5000
export PORT=5000 && npm run prod
# Contributing
You 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
# TypeScript
> To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.
## Use latest TypeScript compiler
TypeScript 1.5 includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.
npm install --global typescript
## .d.ts Typings The TSD typings in `tsd_typings/` are autogenerated.
npm install --global tsd
> You may need to require `reference path` for your editor to autocomplete correctly
///
If your editor only works with reference path here's the convention I'm using `/src/typings/` hand written typings for when you need to create/update one for a library `/src/typings/_custom.d.s` main file to require everything (reference path this file) `/src/typings/tsd.d.ts` requires tsd_typings `/tsd_typings/` tsd typings (like node_modules these files live and generates at root level) Otherwise including them in `tsd.json` is much prefered ## Use a TypeScript-aware editor We have good experience using these editors: * [Visual Studio Code](https://code.visualstudio.com/) * [Webstorm 10](https://www.jetbrains.com/webstorm/download/) * [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript) * [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation) # Frequently asked questions * Why we are using traceur-runtime? * This for the ES6 polyfills. * If TypeScript compiles to ES5 why do we need traceur-runtime? * Angular 2 framework itself expects these ES6 features. * What's the current browser support for Angular 2 Alpha? * Please view the updated list of [browser support for Angular 2](https://github.com/angular-class/awesome-angular2#current-browser-support-for-angular-2) * What is the `TypeScript warning "Value of type 'typeof Directive' is not callable. Did you mean to include 'new'?`"? * This is an error with the typings defined in DefinitelyTyped (please ignore until it's fixed) * How do I use `moduleId` with `module.id` in webpack? * Please use `__filename` if you must use `templateUrl` and `styleUrls` rather than webpack's module system * Why is my service not injecting parameter correctly? * Please use `@Injectable()` for your service for typescript to correctly attach the metadata (this is a typescript beta problem) * Where do I write my tests? * You can write your tests anywhere you like either next to your components or in the `test/` folder * Is Angular 2 production ready yet? * No, please visit [Is Angular 2 Ready Yet?](http://splintercode.github.io/is-angular-2-ready/) website. * How do I start the app when I get `EACCES` and `EADDRINUSE` errors? * The `EADDRINUSE` error means the port `3000` is currently being used and `EACCES` is lack of permission for webpack to build files to `./__build__/` * Why am I getting lots of warnings when starting the repo? * You need to run `tsd install` this happens when tsd didn't install correctly or at all # Support, Questions, or Feedback > Contact us anytime for anything about this repo or Angular 2 * [Gitter: angular-class/angular2-webpack-starter](https://gitter.im/angular-class/angular2-webpack-starter) * [Twitter: @AngularClass](https://twitter.com/AngularClass) # Other Seed/Starter/Example Repos * [angular2-webpack-starter (AngularClass)](https://github.com/angular-class/angular2-webpack-starter) * Client/Server, Webpack, TypeScript, TSD, Protractor, Karma, Jasmine, Env Dev/Prod, Server API * [ng2-play (Pawel Kozlowski)](https://github.com/pkozlowski-opensource/ng2-play) * Client only, Minimalist, SystemJS, Gulp, TypeScript * [angular2-seed (Minko Gechev)](https://github.com/mgechev/angular2-seed) * Client only, SystemJS, Gulp, TypeScript, TSD, Versioned, Env Dev/Prod * [ng2-lab (Roland Groza)](https://github.com/rolandjitsu/ng2-lab) * Client only, ES6, TypeScript, Firebase, Gulp, Ci, TSD, TSLint * [ng2-jspm-seed (Rob Wormald)](https://github.com/robwormald/ng2-jspm-seed) * Client only, TypeScript, TSD, Gulp, JSPM, Minimalist * [babel-angular2-app (Shuhei Kagawa)](https://github.com/shuhei/babel-angular2-app) * Client only, Minimalist, Babel, ES6+, Webpack (outdated) ___ enjoy — **AngularClass** <br><br> [](https://angularclass.com) ##[AngularClass](https://angularclass.com) > Learn AngularJS, Angular 2, and Modern Web Development form the best. > Looking for corporate Angular training, want to host us, or Angular consulting? patrick@angularclass.com # License [MIT](/LICENSE)