{"id":22213975,"url":"https://github.com/xmlking/spa-starter-kit","last_synced_at":"2025-07-27T12:31:58.331Z","repository":{"id":41074888,"uuid":"21482215","full_name":"xmlking/spa-starter-kit","owner":"xmlking","description":"Single Page Application (SPA) Starter project build with Angular2, Angular CLI","archived":false,"fork":false,"pushed_at":"2016-08-06T22:50:44.000Z","size":1714,"stargazers_count":3,"open_issues_count":1,"forks_count":6,"subscribers_count":4,"default_branch":"ng1","last_synced_at":"2024-05-01T20:22:20.805Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xmlking.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-04T01:46:41.000Z","updated_at":"2019-04-27T22:17:42.000Z","dependencies_parsed_at":"2022-08-29T01:01:09.732Z","dependency_job_id":null,"html_url":"https://github.com/xmlking/spa-starter-kit","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmlking%2Fspa-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmlking%2Fspa-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmlking%2Fspa-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmlking%2Fspa-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xmlking","download_url":"https://codeload.github.com/xmlking/spa-starter-kit/tar.gz/refs/heads/ng1","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227802821,"owners_count":17822113,"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-12-02T21:12:51.120Z","updated_at":"2024-12-02T21:12:51.743Z","avatar_url":"https://github.com/xmlking.png","language":"TypeScript","readme":"\nSPA Starter Kit (Original Angular 1 Branch)\n=========\n\n**SPA Starter Kit** is a Single Page Application (SPA) Starter project built on **AngularJS** , **AMD** and **ES6**\n\nDemonstrate Front-end Design Patterns and Best Practices.\n\n### Demo\nThis **[Demo](http://xmlking.github.io/spa-starter-kit/)** static gh-pages are produced by [Mocked Backend Workflow](../../wiki/Mocked-Backend-Workflow)\n\n### Wiki\n Documentation [wiki](../../wiki/home)\n \n### Backend \nBackend [Grails App with MongoDB](https://github.com/xmlking/grails-batch-rest)\n \n### Features\n\n* Use ES2015 and AMD to build a modular application.\n* Demonstrate simple CRUD SPA applications (Grails-Angular-MongoDB)\n* Flat and modular project structure for parallel development. \n* Adopts AngularJS Style Guides from [johnpapa](https://github.com/johnpapa/angularjs-styleguide/), [gocardless](https://github.com/gocardless/angularjs-style-guide)\n* Modular SASS inspired by [SMACSS](http://smacss.com/), CSS Autoprefixing\n* [Material Design](https://github.com/angular/material) UI Components (W.I.P)\n* Watch source files (ES6, SASS) and build incrementally.\n* Source Maps for CSS \u0026 JS\n* Unit (karma) and e2e (protractor) tests works with your AMD/ES6 code.\n* Cross Browser CSS \u0026 HTML Injection with BrowserSync [Action Sync, Code Sync]\n* Build environment (DEV, TEST, CI, PROD) aware gulp tasks. \n* Incremental builds and auto-testing. [_gulp --env=TEST serve_]\n* _Mocked Backend Workflow_ - help with mocking your backend and backend-less development.\n* Produce optimized, production ready bundles for deployment. Can produce multiple bundles for lazy loading modules on demand. \n* Your choice of Reusable Components - Angular Directives, Native Web Components, ReactJS all in ES6.  \n* Achieve some of the Angular 2.0 goals while still running on Angular 1.3.x/1.4.x\n* TypeScript style assertions are enabled in development env for run-time type checking. \n* Animations for rich user experience. \n\n### Design Patterns \n* Authentication and Fine-grained Authorization - OAuth, [JSON Web Tokens](http://jwt.io/) \n* App-Wide Notifications: ability for any components consistently display error, warn, info messages to the user.\n* App-wide Translations and Localization.\n* _Functional Reactive Programming_: EventBus, EventStream and RxHTTP facades for Streaming REST API.\n* 3-way data binding with [Differential Synchronization](https://neil.fraser.name/writing/sync/) and [JSON Patch](http://jsonpatch.com/) over STOMP\n* Resiliency - Retry, Governor, Fallback, Circuit-breaker(W.I.P)\n* Caching as a Cross-Cutting Concern.\n* Hierarchical and Faceted Navigation.\n* Pagination and composable queries to express data dependencies and avoid over/under fetching data from REST API.\n* Use ES6 Proxies and ES6+ annotations for AOP.\n\n### Getting Started\n\n```bash\n# Clone this repo\n# To clone original Angular 1 Branch \ngit clone -b ng1 --single-branch https://github.com/xmlking/spa-starter-kit.git ng1-starter-kit\n\n# Install development tools at global location(one-time)\nbrew install ruby   # only run if it's not already installed. Mac may already have it at `/usr/bin/ruby` \nbrew install nvm    # only run if it's not already installed. (For Windows : you can use `nvmw` or `nvm-windows` )\nnvm  install iojs   # run `node -v \u0026\u0026 npm -v` to verify node installation. (For Windows : `nvmw install iojs`)\nnvm alias default iojs-v2.X.X # replace X.X with current version # make iojs-v2.X.X as your default node version.  (For Windows : `nvmw use iojs-v2.X.X`)\n\n[sudo] npm install -g bower\n[sudo] npm install -g gulpjs/gulp-cli#4.0 \n[sudo] npm install -g karma-cli\n\n# Install the dev dependencies for project, such as Karma, Traceur, etc.\nnpm install   # run  'npm install \u0026\u0026 npm prune' whenever you upgraded versions in package.json.\n\n# Install runtime dependencies for project with bower.\nbower install # run 'bower install \u0026\u0026 bower prune' whenever you upgraded versions in bower.json.\n\n# Install SASS\n[sudo] gem install sass # verify  `sass --version` \u003e 3.4.10\n\n# Start the server and watch for file changes to transpile ES6 files, live reload pages etc. \ngulp serve  # gulp --fatal=off serve # no errors should kill the live server.\n\n# Build project: creates `dist` directory for deployment to Web Servers. \ngulp --env=PROD # or NODE_ENV=PROD gulp  # `set NODE_ENV=PROD` and `gulp` for windows\n\n# Other Gulp Commands\ngulp or `gulp build`    # to build an optimized version of your application in /dist\ngulp serve              # to launch a browser sync server on your source files\ngulp serve:dist         # to launch a server on your optimized application\ngulp wiredep            # to fill bower dependencies in your .html file(s)\ngulp test               # to launch your unit tests with Karma\ngulp protractor         # to launch your e2e tests with Protractor\ngulp protractor:dist    # to launch your e2e tests with Protractor on the dist files\ngulp deploy             # to deploy dist folder to gh-pages\n\n# Maintenance \nnpm update -g           # update all outdated global packages\nnpm update --save-dev   # update all outdated local packages (run from project directory) \nnpm update npm -g       # self npm update\nbrew update \u0026\u0026 brew doctor\nbrew upgrade nvm        # update to latest nvm version\nnpm shrinkwrap --dev    # if you want to lock down all `package.json` dependency versions \n```\n\n### Running the [tests](./test/)\nThis will start Karma and Chrome\n```bash\ngulp test\n```\nKarma will watch the source code and run the tests anytime you save a change.\n```bash\ngulp tdd\n```\n\n### Options\nBy default, plugin errors will cause Gulp to halt. Errors and warnings are fatal. \nIf you want to keep Gulp running, use the --fatal=off flag. \n```bash\ngulp                  # defaults to fatal=error\ngulp --fatal=error\ngulp --fatal=warning\ngulp --fatal=off      # no errors should kill the build\nalias g='gulp --fatal=off --env=DEV' // tip for smooth development.\n```\n\n#### Dev server (BrowserSync) Options\nNow you can customize BrowserSync dev server online at  `http://localhost:3001/`\n\n####Setting build environment variable for environment-specific gulp tasks: \nApplication is by default set with production environment specific settings which can be overridden \nby adding environment specific angular modules (dev.env.js , test.env.js) to [index.js](./app/scripts/index.js) via Gulp command-line arguments.  \nBy default `templateCache` is disabled and `SourceMaps`, `type assertions` are enabled.  \n```bash\ngulp --env=PROD task   # or `NODE_ENV=PROD gulp task` : set `global.optimize = true`. This will disable SourceMaps,type assertions  and enable templateCache    \ngulp --env=TEST task   # TEST mode for backend-less testing in CI env. data from [fixtures](./test/fixtures) will be served.\ngulp --env=DEV  task   # DEV mode points to local backend URLs.\ngulp --env=TEST --optimize=true # Produce optimized build like `--env=PROD` and also include [fixtures](./test/fixtures) like `--env=TEST`\n```\n\n###Compatibility\nThe app was tested on:\n \n  * Firefox (\u003e= v36)\n  * Chrome (\u003e= v37)\n  \n  * iojs (\u003e= v1.2.0)\n  \n### Tips\n\n### TODO\n- [ ] Lazy Load Modules \n[Pending Proposal](https://groups.google.com/forum/#!topic/angular/w0ZEBz02l8s)\n[ocLazyLoad](http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/)\n- [ ] offline-first pattern with Service Worker\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxmlking%2Fspa-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxmlking%2Fspa-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxmlking%2Fspa-starter-kit/lists"}