{"id":15295258,"url":"https://github.com/newaeonweb/generator-angm","last_synced_at":"2025-10-08T10:13:06.679Z","repository":{"id":24522096,"uuid":"27928179","full_name":"newaeonweb/generator-angm","owner":"newaeonweb","description":"AngularJS Yeoman Generator to help you getting started with a new project based on AngularJS and Angular Material to build large scale applications. ","archived":false,"fork":false,"pushed_at":"2019-08-19T00:00:49.000Z","size":42506,"stargazers_count":72,"open_issues_count":7,"forks_count":24,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-27T06:51:19.718Z","etag":null,"topics":["angular","angularjs","angularjs-yeoman-generator","generator-angm","subgenerator"],"latest_commit_sha":null,"homepage":"","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/newaeonweb.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":"2014-12-12T16:25:31.000Z","updated_at":"2024-01-09T20:00:02.000Z","dependencies_parsed_at":"2022-07-25T10:47:50.120Z","dependency_job_id":null,"html_url":"https://github.com/newaeonweb/generator-angm","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newaeonweb%2Fgenerator-angm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newaeonweb%2Fgenerator-angm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newaeonweb%2Fgenerator-angm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/newaeonweb%2Fgenerator-angm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/newaeonweb","download_url":"https://codeload.github.com/newaeonweb/generator-angm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741195,"owners_count":21154252,"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":["angular","angularjs","angularjs-yeoman-generator","generator-angm","subgenerator"],"created_at":"2024-09-30T17:09:14.983Z","updated_at":"2025-10-08T10:13:01.649Z","avatar_url":"https://github.com/newaeonweb.png","language":"JavaScript","readme":"# Generator-angm [![NPM Downloads](http://img.shields.io/npm/dm/generator-angm.svg)](https://www.npmjs.org/package/generator-angm) [![npm version](https://badge.fury.io/js/generator-angm.svg)](http://badge.fury.io/js/generator-angm)\n\n![AngularJS Modular Generator](./generator-angm.png)\n\n# AngularJS Yeoman Generator to help you getting started with a new project based on AngularJS/Angular Material or Bootstrap to build large scale applications. #\n\n\u003e [Modular AngularJS Applications](http://www.newaeonweb.com.br/generator-angm) with Generator-angm\n\n# Disclaimer\nThe main reason for creating this project, and do not use any other, was the need to optimize the creation time of each application from scratch.\nIt was built using the best practices of development with AngularJS and uses the latest stable version (1.5.0.).\nThe project does not intend to migrate to the new version(2.0) in a short time, we have in mind that this version is very stable and meets most web projects, so when version 2.0 is reasonably stable we do the migration.\n\n## Getting Started\n\n#### Installing Yeoman\nOpen your Terminal/Shell and type:\n\n```bash\nnpm install -g yo\n```\n\n#### Installing the ANGM Generator\n\nTo install generator-angm from npm, run:\n\n```bash\nnpm install -g generator-angm\n```\n\n#### Installing Grunt CLI\n\nTo run Grunt commands from our terminal, we'll need grunt-cli:\n\n```bash\nnpm install -g grunt-cli\n```\n\n#### Installing bower-installer\n\n```bash\nnpm install -g bower-installer\n```\n\u003e The building process will use bower-installer plugin.\n\n\n#### Starting an application\n\nFrom the command line, initiate the generator:\n\n```bash\nyo angm\n```\n\n\u003e You'll receive some prompts to fill with useful informations as Project name, author, what UI: Bootstrap or Angular Material.\n\n## Running project on development\nOpen your Terminal/Shell and type:\n\n```bash\ngrunt dev\n```\n\nAfter the command your application should start right in your default browser at `localhost:4000`.\n\n\u003e NOTE: after using **yo angm** command, we recorded some useful informations on **.yo-rc.json** file created at the project root folder. So you can't execute the generator command to create the application more than one time per folder!\n\n## Running project on production\nOpen your Terminal/Shell and type:\n\n```bash\ngrunt build\n```\n\nThe `Gruntfile.js` already have some tasks like: Concat, Uglify, Injector and template cache.\n\n\u003e NOTE: The command will concat and minify all (JS) application files and the HTML templates will be mixed in on file called `templates.js`, all this files will be injected on **index.html**.\n\n# Built in SubGenerators\nGenerator-angm have a subgenerator to create your application modules and directives.\n\n1. Modules\n2. Directives\n\n## Modules\nTo create a module just type on your Terminal/Shell:\n\n```\nyo angm:angm-module\n```\n\nAfter that, you must entry the module name and choose what files you want to include.\n\nThe subgenerator will produce the following directory structure:\n\n```\n\tmoduleName/\n\t\tmoduleName.html\n\t\tmoduleNameModule.js\n\t\tmoduleNameCtrl.js\n\t\tmoduleNameRoute.js\n\t\tmoduleNameService.js\n\t\tmoduleName-test.js\n```\n\n**Note: Subgenerators are to be run from the root directory of your application.**\n\n## Directives\nTo create a directive just type on your terminal window:\n\n```\nyo angm:angm-directive\n```\n\nAfter that you must entry the directive name and choose what dependencies you want, by default we using external templates and external controllers.\n\nThe subgenerator will produce the following directory structure:\n\n```\nshared/\n\t\tdirectives/\n\t\t\tdirectiveName/\n\t\t\t\tassets/ /* optional folder\n\t\t\t\tdirectiveName.html\n\t\t\t\tdirectiveNameCtrl.j\n\t\t\t\tdirectiveName-test.js\n```\n\n# Application files:\n## View (Html Template)\nFile: `app/modules/moduleName/moduleName.html`.\n\nCode:\n```html\n\u003cdiv\u003e\n\tContent from: \"Page = moduleName\"\n\u003c/div\u003e\n```\n---\n## Controller\n\nFile: `app/modules/moduleName/moduleNameCtrl.js`.\n\nCode:\n```javascript\n'use strict';\n\n/**\n * @ngdoc function\n * @name appName.controller:moduleNameCtrl\n * @description\n * # moduleNameCtrl\n * Controller of the appName\n */\nangular.module('appName')\n\t.controller('ModuleNameCtrl', ModuleNameCtrl);\n\n\tModuleNameCtrl.$inject = ['Array of Dependencies optional'];\n\n\tfunction ModuleNameCtrl ('Array of Dependencies is the same above') {\n\n\t}\n\n```\n---\n\n## Route\n\nFile: `app/modules/moduleName/moduleNameRoute.js`.\n\nCode:\n```javascript\n'use strict';\n\n/**\n * @ngdoc function\n * @name appName.route:moduleNameRoute\n * @description\n * # moduleNameRoute\n * Route of the appName\n */\nangular.module('appName')\n\t.config(function ($stateProvider) {\n\t\t$stateProvider\n\t\t\t.state('moduleName', {\n\t\t\t\turl: '/moduleName',\n\t\t\t\ttemplateUrl: 'appName/modules/moduleName/moduleName.html',\n\t\t\t\tcontroller: 'moduleNameCtrl',\n\t\t\t\tcontrollerAs: 'vm'\n\t\t\t});\n\t});\n```\n---\n\n## Module\n\nFile: `app/modules/moduleName/moduleNameModule.js`.\n\nCode:\n```javascript\n'use strict';\n\n/**\n * @ngdoc function\n * @name appName.route:moduleNameModule\n * @description\n * # moduleNameModule\n * Route of the appName\n */\n\n (function() {\n   'use strict';\n\n   angular.module('moduleName', []);\n\n })();\n```\n---\n\n## App starter script\n\nFile: `app/app.js`.\n\nCode:\n```javascript\n(function() {\n\t'use strict';\n\n\t/**\n\t * @ngdoc index\n\t * @name app\n\t * @description\n\t * # app\n\t *\n\t * Main module of the application.\n\t */\n\n\tangular.module('Application name', [\n\t\t'ngResource',\n\t\t'ngAria',\n\t\t 'ngMaterial',\n\t\t'ngMdIcons',\n\t\t'ngCookies',\n\t\t'ngAnimate',\n\t\t'ngSanitize',\n\t\t'ui.router',\n\t\t'home',\n\t]);\n\n})();\n\n```\n---\n\n## App config script\n\nFile: `app/app-config.js`.\n\nCode:\n```javascript\n((function () {\n\t'use strict';\n\n\t/**\n\t * @ngdoc configuration file\n\t * @name app.config:config\n\t * @description\n\t * # Config and run block\n\t * Configutation of the app\n\t */\n\n\n\tangular\n\t\t.module('ang-modular')\n\t\t.config(configure)\n\t\t.run(runBlock);\n\n\tconfigure.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider'];\n\n\tfunction configure($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {\n\n\t\t$locationProvider.hashPrefix('!');\n\n\t\t// This is required for Browser Sync to work poperly\n\t\t$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';\n\n\n\t\t$urlRouterProvider\n\t\t\t.otherwise('/dashboard');\n\n\t}\n\n\trunBlock.$inject = ['$rootScope'];\n\n\tfunction runBlock($rootScope) {\n\t\t'use strict';\n\n\t\tconsole.log('AngularJS run() function...');\n\t}\n})();\n```\n---\n\n# Gruntfile tasks\nBy default, new scripts are added to the `index.html` file. Using Grunt-injector, but only on setup configuration, after that you must run `grunt injector` or `grunt dev` every time you add a new module, directive or script.\n\n\n# Bower Components\n\nThe following packages are always installed by the angm-generator:\n\n* \"json3\"\n* \"es5-shim\"\n* \"bootstrap\"\n* \"angular\"\n* \"angular-resource\"\n* \"angular-aria\"\n* \"angular-mocks\"\n* \"angular-touch\"\n* \"angular-bootstrap\"\n* \"angular-ui-router\"\n\n\u003e NOTE: Angular Material have the following dependencies:\n* angular-material-icons\n* angular-material\n* angular-messages\n\n\nThe following modules are optional on first install:\n\n* \"angular-cookies\"\n* \"angular-animate\"\n* \"angular-sanitize\"\n\nAll of these can be updated with `bower update` as new versions of AngularJS are released. Always on first install the generator will use the last stable version of all libraries.\n\n\n# Testing\n\nWe implemented only one kind of test at this moment: Unit tests. On next weeks e2e tests will be available too.\n\n## Running Tests\n\nThe tests are written in **Jasmine**, which we run with the [Karma Test Runner][karma]. We provide a Karma configuration file pre-configured with some default options to run them.\n\n* the configuration is found at `karma.conf.js`\n* the unit tests are found on each module created named as `moduleName-test.js`.\n\nThe easiest way to run the unit tests is to use the supplied npm script on `package.json` file:\n\n```\nnpm test\n```\n\nThis script will start the Karma test runner to execute the unit tests.\n\n\n# Contribute\n\nTo submitting an issue, please check if pass on travis.\nTo submitting a bugfix, write a test that exposes the bug and fails before applying your fix.\nTo submitting a new feature, add tests that cover the feature.\n\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewaeonweb%2Fgenerator-angm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnewaeonweb%2Fgenerator-angm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnewaeonweb%2Fgenerator-angm/lists"}