{"id":19516106,"url":"https://github.com/deviantony/yeoman-angular-ngbp","last_synced_at":"2025-02-25T23:44:07.152Z","repository":{"id":36219745,"uuid":"40524032","full_name":"deviantony/yeoman-angular-ngbp","owner":"deviantony","description":"Yeoman generator based on the ngBoilerplate kickstarter (see http://joshdmiller.github.io/ng-boilerplate/#/home)","archived":false,"fork":false,"pushed_at":"2015-11-04T20:09:05.000Z","size":212,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-01-08T12:38:25.508Z","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/deviantony.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-08-11T05:54:15.000Z","updated_at":"2016-01-20T09:57:23.000Z","dependencies_parsed_at":"2022-09-23T11:05:13.228Z","dependency_job_id":null,"html_url":"https://github.com/deviantony/yeoman-angular-ngbp","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/deviantony%2Fyeoman-angular-ngbp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deviantony%2Fyeoman-angular-ngbp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deviantony%2Fyeoman-angular-ngbp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deviantony%2Fyeoman-angular-ngbp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deviantony","download_url":"https://codeload.github.com/deviantony/yeoman-angular-ngbp/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240766672,"owners_count":19854114,"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-10T23:44:33.744Z","updated_at":"2025-02-25T23:44:07.100Z","avatar_url":"https://github.com/deviantony.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Yeoman AngularJS generator\n==========================\n\nA Yeoman generator for AngularJS projects based on ngBoilerplate (http://joshdmiller.github.io/ng-boilerplate/#/home).\n\nMore information about yeoman at: http://yeoman.io/\n\nUsage\n-----\n\nInstall it:\n\n```bash\n$ npm install -g generator-angular-ngbp\n```\n\nUse it:\n\n```bash\n$ yo angular-ngbp [projectName]\n```\n\nThe projectName argument is optional.\nThe generator will replace it with the name of the working directory if it is not specified.\n\nngBoilerplate purpose\n---------------------\n\nQuoted from the project:\n\n`ngBoilerplate` is designed to make life easy by providing a basic framework\nwith which to kickstart AngularJS projects. It contains a best-practice\ndirectory structure to ensure code reusability and maximum scalability.\n\nngBoilerplate also comes prepackaged with the most popular design frameworks\naround: [Twitter Bootstrap](http://getbootstrap.com),\n[Angular UI](http://angular-ui.github.io),\n[Angular Bootstrap](http://angular-ui.github.io/bootstrap),\n[Font Awesome](http://fortawesome.github.com/Font-Awesome), and\n[LESS](http://lesscss.org). This generator also adds [Restangular](https://github.com/mgonto/restangular) support.\n\nLastly, it contains a sophisticated\n[Grunt](http://gruntjs.org)-based build system to ensure maximum productivity.\n\nPhilosophy\n----------\n\nThe principal goal of `ngBoilerplate` is to set projects up for long-term\nsuccess.  So `ngBoilerplate` tries to follow best practices everywhere it can.\nThese are:\n\n- Properly orchestrated modules to encourage drag-and-drop component re-use.\n- Tests exist alongside the component they are testing with no separate `test`\n  directory required; the build process should be sophisticated enough to handle\n  this.\n- Speaking of which, the build system should work automagically, without\n  involvement from the developer. It should do what needs to be done, while\n  staying out of the way. Components should end up tested, linted, compiled,\n  and minified, ready for use in a production environment.\n- Integration with popular tools like Bower, Karma, and LESS.\n- *Encourages* test-driven development. It's the only way to code.\n- A directory structure that is cogent, meaningful to new team members, and\n  supporting of the above points.\n- Well-documented, to show new developers *why* things are set up the way they\n  are.\n- It should be responsive to evidence. Community feedback is therefore crucial\n  to the success of `ngBoilerplate`.\n\nBut `ngBoilerplate` is not an example of an AngularJS app: this is a\nkickstarter. If you're looking for an example of what a complete, non-trivial\nAngularJS app that does something real looks like, complete with a REST backend\nand authentication and authorization, then take a look at\n[`angular-app`](http://github.com/angular-app/angular-app), which does just\nthat - and does it well.\n\nLearn\n-----\n\n### Overall Directory Structure\n\nAt a high level, the structure looks roughly like this:\n\n```\nng-boilerplate/\n  |- grunt-tasks/\n  |- karma/\n  |- src/\n  |  |- app/\n  |  |  |- \u003capp logic\u003e\n  |  |- assets/\n  |  |  |- \u003cstatic files\u003e\n  |  |- common/\n  |  |  |- \u003creusable code\u003e\n  |  |- less/\n  |  |  |- main.less\n  |- vendor/\n  |  |- angular-bootstrap/\n  |  |- bootstrap/\n  |  |- placeholders/\n  |- .bowerrc\n  |- bower.json\n  |- build.config.js\n  |- Gruntfile.js\n  |- package.json\n```\n\nWhat follows is a brief description of each entry, but most directories contain\ntheir own `README.md` file with additional documentation, so browse around to\nlearn more.\n\n- `karma/` - test configuration.\n- `src/` - our application sources. [Read more \u0026raquo;](src/README.md)\n- `vendor/` - third-party libraries. [Bower](http://bower.io) will install\n  packages here. Anything added to this directory will need to be manually added\n  to `build.config.js` to be picked up by the build\n  system.\n- `.bowerrc` - the Bower configuration file. This tells Bower to install\n  components into the `vendor/` directory.\n- `bower.json` - this is our project configuration for Bower and it contains the\n  list of Bower dependencies we need.\n- `build.config.js` - our customizable build settings; see \"The Build System\"\n  below.\n- `Gruntfile.js` - our build script; see \"The Build System\" below.\n- `package.json` - metadata about the app, used by NPM and our build script. Our\n  NPM dependencies are listed here.\n\n### Detailed Installation\n\nThis section provides a little more detailed understanding of what goes into\ngetting `ngBoilerplate` up and running. Though `ngBoilerplate` is really simple\nto use, it might help to have an understanding of the tools involved here, like\nNode.js and Grunt and Bower.\n\nOkay, ready to go? Here it is:\n\n`ngBoilerplate` uses [Grunt](http://gruntjs.org) as its build system, so\n[Node.js](http://nodejs.org) is required. Also, Grunt by default no longer comes\nwith a command-line utility and Karma and Bower must end up in your global path\nfor the build system to find it, so they must be installed independently. Once\nyou have Node.js installed, you can simply use `npm` to make it all happen:\n\n```bash\n$ npm install\n```\n\nThis will read the `dependencies` (empty by default) and the `devDependencies`\n(which contains our build requirements) from `package.json` and install\neverything needed into a folder called `node_modules/`.\n\nThere are many Bower packages used by `ngBoilerplate`, like Twitter Bootstrap\nand Angular UI, which are listed in `bower.js`. To install them into the\n`vendor/` directory, simply run:\n\n```bash\n$ bower install\n```\n\nIn the future, should you want to add a new Bower package to your app, run the\n`install` command:\n\n```bash\n$ bower install packagename --save-dev\n```\n\nThe `--save-dev` flag tells Bower to add the package at its current version to\nour project's `bower.js` file so should another developer download our\napplication (or we download it from a different computer), we can simply run the\n`bower install` command as above and all our dependencies will be installed for\nus. Neat!\n\nTechnically, `ngBoilerplate` is now ready to go.\n\nHowever, prior to hacking on your application, you will want to modify the\n`package.json` file to contain your project's information. Do not remove any\nitems from the `devDependencies` array as all are needed for the build process\nto work.\n\nTo ensure your setup works, launch grunt:\n\n```bash\n$ grunt watch\n```\n\nThe built files are placed in the `build/` directory by default. Open the\n`build/index.html` file in your browser and check it out! Because everything is\ncompiled, no XHR requests are needed to retrieve templates, so until this needs\nto communicate with your backend there is no need to run it from a web server.\n\n`watch` is actually an alias of the `grunt-contrib-watch` that will first run a\npartial build before watching for file changes. With this setup, any file that\nchanges will trigger only those build tasks necessary to bring the app up to\ndate. For example, when a template file changes, the templates are recompiled\nand concatenated, but when a test/spec file changes, only the tests are run.\nThis allows the watch command to complete in a fraction of the time it would\nordinarily take.\n\nIn addition, if you're running a Live Reload plugin in your browser (see below),\nyou won't even have to refresh to see the changes! When the `watch` task detects\na file change, it will reload the page for you. Sweet.\n\nWhen you're ready to push your app into production, just run the `compile`\ncommand:\n\n```bash\n$ grunt compile\n```\n\nThis will concatenate and minify your sources and place them by default into the\n`bin/` directory. There will only be three files: `index.html`,\n`your-app-name.js`, and `your-app-name.css`. All of the vendor dependencies like\nBootstrap styles and AngularJS itself have been added to them for super-easy\ndeploying. If you use any assets (`src/assets/`) then they will be copied to\n`bin/` as is.\n\nLastly, a complete build is always available by simply running the default\ntask, which runs `build` and then `compile`:\n\n```bash\n$ grunt\n```\n\n### The Build System\n\nThe best way to learn about the build system is by familiarizing yourself with\nGrunt and then reading through the heavily documented build script,\n`Gruntfile.js`. But you don't need to do that to be very productive with\n`ngBoilerplate`. What follows in this section is a quick introduction to the\ntasks provided and should be plenty to get you started.\n\nThe driver of the process is the `delta` multi-task, which watches for file\nchanges using `grunt-contrib-watch` and executes one of nine tasks when a file\nchanges:\n\n* `delta:gruntfile` - When `Gruntfile.js` changes, this task runs the linter\n  (`jshint`) on that one file and reloads the configuration.\n* `delta:assets` - When any file within `src/assets/` changes, all asset files\n  are copied to `build/assets/`.\n* `delta:html` - When `src/index.html` changes, it is compiled as a Grunt\n  template, so script names, etc., are dynamically replaced with the correct\n  values configured dynamically by Grunt.\n* `delta:less` - When any `*.less` file within `src/` changes, the\n  `src/less/main.less` file is linted and copied into\n  `build/assets/ng-boilerplate.css`.\n* `delta:jssrc` - When any JavaScript file within `src/` that does not end in\n  `.spec.js` changes, all JavaScript sources are linted, all unit tests are run,\n  and the all source files are re-copied to `build/src`.\n* `delta:coffeesrc` - When any `*.coffee` file in `src/` that doesn't match\n  `*.spec.coffee` changes, the Coffee scripts are compiled independently into\n  `build/src` in a structure mirroring where they were in `src/` so it's easy to\n  locate problems. For example, the file\n  `src/common/titleService/titleService.coffee` is compiled to\n  `build/src/common/titleService/titleService.js`.\n* `delta:tpls` - When any `*.tpl.html` file within `src/` changes, all templates\n  are put into strings in a JavaScript file (technically two, one for\n  `src/common/` and another for `src/app/`) that will add the template to\n  AngularJS's\n  [`$templateCache`](http://docs.angularjs.org/api/ng.$templateCache) so\n  template files are part of the initial JavaScript payload and do not require\n  any future XHR.  The template cache files are `build/template-app.js` and\n  `build/template-common.js`.\n* `delta:jsunit` - When any `*.spec.js` file in `src/` changes, the test files\n  are linted and the unit tests are executed.\n* `delta:coffeeunit` - When any `*.spec.coffee` file in `src/` changes, the test\n  files are linted, compiled their tests executed.\n\nAs covered in the previous section, `grunt watch` will execute a full build\nup-front and then run any of the aforementioned `delta:*` tasks as needed to\nensure the fastest possible build. So whenever you're working on your project,\nstart with:\n\n```bash\n$ grunt watch\n```\n\nAnd everything will be done automatically!\n\n### Build vs. Compile\n\nTo make the build even faster, tasks are placed into two categories: build and\ncompile. The build tasks (like those we've been discussing) are the minimal\ntasks required to run your app during development.\n\nCompile tasks, however, get your app ready for production. The compile tasks\ninclude concatenation, minification, compression, etc. These tasks take a little\nbit longer to run and are not at all necessary for development so are not called\nautomatically during build or watch.\n\nTo initiate a full compile, you simply run the default task:\n\n```bash\n$ grunt\n```\n\nThis will perform a build and then a compile. The compiled site - ready for\nuploading to the server! - is located in `bin/`, taking a cue from\ntraditional software development. To test that your full site works as\nexpected, open the `bin/index.html` file in your browser. Voila!\n\n### Live Reload!\n\n`ngBoilerplate` also includes [Live Reload](http://livereload.com/), so you no\nlonger have to refresh your page after making changes! You need a Live Reload\nbrowser plugin for this:\n\n- Chrome - [Chrome Webstore](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)\n- Firefox - [Download from Live Reload](http://download.livereload.com/2.0.8/LiveReload-2.0.8.xpi)\n- Safari - [Download from Live Reload](http://download.livereload.com/2.0.9/LiveReload-2.0.9.safariextz)\n- Internet Explorer - Surely you jest.\n\nNote that if you're using the Chrome version with `file://` URLs (as is the\ndefault with `ngBoilerplate`) you need to tell Live Reload to allow it. Go to\n`Menu -\u003e Tools -\u003e Extensions` and check the \"Allow access to file URLs\" box next\nto the Live Reload plugin.\n\nWhen you load your page, click the Live Reload icon in your toolbar and\neverything should work magically. w00t!\n\nIf you'd prefer to not install a browser extension, then you must add the\nfollowing to the end of the `body` tag in `index.html`:\n\n```html\n\u003cscript src=\"http://localhost:35729/livereload.js\"\u003e\u003c/script\u003e\n```\n\nDevelopment\n-----------\n\nInstall dependencies:\n\n```bash\n$ npm install\n```\n\nLink the module:\n\n```bash\n$ npm link\n```\n\nTest it:\n```bash\n$ npm test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeviantony%2Fyeoman-angular-ngbp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeviantony%2Fyeoman-angular-ngbp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeviantony%2Fyeoman-angular-ngbp/lists"}