{"id":15823587,"url":"https://github.com/patrickjs/angular2-example-falcor","last_synced_at":"2025-04-01T07:58:27.864Z","repository":{"id":30577855,"uuid":"34132875","full_name":"PatrickJS/angular2-example-falcor","owner":"PatrickJS","description":"Angular2 + FalcorJS","archived":false,"fork":false,"pushed_at":"2015-07-14T22:49:17.000Z","size":616,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T12:25:51.097Z","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/PatrickJS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-04-17T18:22:15.000Z","updated_at":"2017-06-20T02:45:49.000Z","dependencies_parsed_at":"2022-09-09T00:10:52.215Z","dependency_job_id":null,"html_url":"https://github.com/PatrickJS/angular2-example-falcor","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/PatrickJS%2Fangular2-example-falcor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular2-example-falcor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular2-example-falcor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PatrickJS%2Fangular2-example-falcor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PatrickJS","download_url":"https://codeload.github.com/PatrickJS/angular2-example-falcor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246604618,"owners_count":20804100,"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-10-05T08:20:46.807Z","updated_at":"2025-04-01T07:58:27.843Z","avatar_url":"https://github.com/PatrickJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 2 FalcorJS\n\n\u003e Angular 2 FalcorJS\n\nTodo:\n* update readme\n\n\n### Quick start\n\u003e Clone/Download the repo then edit `App.ts` inside [`/src/app/App.ts`](/src/app/App.ts)\n\n```bash\n$ npm start # then open your browser and go to http://localhost:8080\n```\n\n\n### With the Router\n```bash\n$ webpack\n$ node index.js\n```\nwating files\n```bash\n$ webpack -w\n$ nodemon index.js\n```\n\n\n\n\n\n## File Structure\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:\n```\nangular2-webpack-starter/\n ├──public/                           * static assets are served here\n │   ├──lib/                          * static libraries\n │   │   └──traceur.min.js            * ignore this file for now as it's required by Angular 2\n │   │\n │   ├──favicon.ico                   * replace me with your own favicon.ico\n │   ├──service-worker.js             * ignore this. Web App service worker that's not complete yet\n │   ├──robots.txt                    * for search engines to crawl your website\n │   ├──human.txt                     * for humans to know who the developers are\n │   └──index.html                    * Index: where we place our script tags\n │\n ├──src/                              * our source files that will be compiled to javascript\n │   ├──app/                          * WebApp folder\n │   │   ├──bootstrap.ts              * entry file for app\n │   │   │\n │   │   ├──components/               * where most of components live\n │   │   │   ├──app.ts                * entry file for components\n │   │   │   ├──dashboard.ts          * A simple Component with a simple Directive examples\n │   │   │   │\n │   │   │   ├──home/                 * example component as a folder\n │   │   │   │   ├──home.ts           * how you would require your template and style files\n │   │   │   │   ├──home.css          * simple css file for home styles\n │   │   │   │   └──home.html         * simple html file for home template\n │   │   │   │\n │   │   │   └──todo.ts               * An example of a component using a service and forms\n │   │   │\n │   │   ├──services/                 * where we keep our services used throughout our app\n │   │   │   ├──TodoService.ts        * An example of a simple service\n │   │   │   └──services.ts           * where we gather our injectables from our services\n │   │   │\n │   │   └──directives/               * where we keep our directives used throughout our app\n │   │       ├──Autofocus.ts          * another simple directive to fix a problem with the router\n │   │       └──directives.ts         * where we gather our directives from our directives\n │   │\n │   ├──common/                       * where common files used throughout our app\n │   │   ├──shadowDomInjectables.ts   * Determind if the user is on chrome and use ShadowDom\n │   │   └──BrowserDomAdapter.ts      * ignore this. we need to set the DomAdapter to the browser\n │   │\n │   └─custom_typings/                * where we define our custom types\n │      └──ng2.d.ts                   * where we patch angular2 types with our own until it's fixed\n │\n ├──typings/                          * where tsd defines it's types definitions\n │   └─angular2/\n │      └─angular2.d.ts               * our type definitions\n │\n ├──tsconfig.json                     * config that webpack uses for typescript\n ├──tsd.json                          * config that tsd uses for managing it's definitions\n ├──package.json                      * what npm uses to manage it's dependencies\n └──webpack.config.js                 * our webpack config\n```\n\n# Getting Started\n## Dependencies\nWhat you need to run this app:\n* `node` and `npm` (`brew install node`)\n* Ensure you're running the latest versions Node `v0.12.2`+ and NPM `2.10.0`+\n\nOnce you have those, you should install these globals with `npm install -global`:\n* `webpack` (`npm install -global webpack`)\n* `webpack-dev-server` (`npm install -global webpack-dev-server`)\n\n## Installing\n* `fork` this repo\n* `clone` your fork\n* `npm install` to install all dependencies\n* `npm run server` to start the server\n\n## Running the app\nAfter you have installed all dependencies you can now run the app. Run `npm 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:8080`.\n\n### server\n```bash\n$ npm run server\n```\n\n### build files\n```bash\n$ npm run build\n```\n\n### watch and build files\n```bash\n$ npm run watch\n```\n\n# TypeScript\n\u003e To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.\n\n## Use latest TypeScript compiler\nTypeScript 1.5 beta includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.\n\n    $ npm install -global typescript@^1.5.0-beta\n\n## .d.ts Typings\nThe typings in `typings/` are partially autogenerated, partially hand\nwritten. All the symbols should be present, but probably have wrong paramaters\nand missing members. Modify them as you go.\n\n    $ npm install -global tsd\n \u003e You may need to require `reference path` for your editor to autocomplete correctly\n ```\n /// \u003creference path=\"../../typings/tsd.d.ts\" /\u003e\n /// \u003creference path=\"../custom_typings/ng2.d.ts\" /\u003e\n ```\n Otherwise including them in `tsd.json` is prefered\n\n## Use a TypeScript-aware editor\nWe have good experience using these editors:\n\n* [Visual Studio Code](https://code.visualstudio.com/)\n* [Webstorm 10](https://www.jetbrains.com/webstorm/download/)\n* [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)\n* [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)\n\n## Frequently asked questions\n* Why we are using traceur? This is due to Angular 2 not being fully migrated to TypeScript and will be removed soon.\n* Why is there an Error in Safari? This is a known issue with alpha.25 that will be fixed in the next tagged release (https://github.com/angular-class/angular2-webpack-starter/issues/17)\n\n\n# Starter Kit Support and Questions\n\u003e Contact us anytime for anything about this repo\n\n* [Gitter: angular-class/angular2-webpack-starter](https://gitter.im/angular-class/angular2-webpack-starter)\n* [Twitter: @AngularClass](https://twitter.com/AngularClass)\n\n___\n\nenjoy — **AngularClass**\n\n\u003cbr\u003e\u003cbr\u003e\n\n[![AngularClass](https://angularclass.com/images/ng-crown.svg  \"Angular Class\")](https://angularclass.com)\n##[AngularClass](https://angularclass.com)\n\u003e Learn Angular in 2 days from the best\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickjs%2Fangular2-example-falcor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatrickjs%2Fangular2-example-falcor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatrickjs%2Fangular2-example-falcor/lists"}