{"id":22214028,"url":"https://github.com/xmlking/angular-webstorm-project-setup","last_synced_at":"2025-04-11T09:01:48.853Z","repository":{"id":13862998,"uuid":"16560805","full_name":"xmlking/angular-webstorm-project-setup","owner":"xmlking","description":"Here you can find step by step instructions on how to setup pro level development environment for developing Front-end applications using AngularJS Framework ","archived":false,"fork":false,"pushed_at":"2014-02-22T03:59:27.000Z","size":1024,"stargazers_count":15,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T06:28:16.752Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/xmlking.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-02-05T22:25:31.000Z","updated_at":"2019-01-10T00:15:10.000Z","dependencies_parsed_at":"2022-08-28T16:41:45.428Z","dependency_job_id":null,"html_url":"https://github.com/xmlking/angular-webstorm-project-setup","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/xmlking%2Fangular-webstorm-project-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmlking%2Fangular-webstorm-project-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmlking%2Fangular-webstorm-project-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xmlking%2Fangular-webstorm-project-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xmlking","download_url":"https://codeload.github.com/xmlking/angular-webstorm-project-setup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248363726,"owners_count":21091433,"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:13:00.802Z","updated_at":"2025-04-11T09:01:48.826Z","avatar_url":"https://github.com/xmlking.png","language":null,"readme":"##Setup AngularJS project with Yeoman and WebStorm as IDE\n\n###Setup new OSX 10.9 Mavericks for development (one time only step)\n\n\t1. Setup developer directory structure \n\t\tcreate /Developer/Applications \u0026  /Developer/Work directories.\n\t\tInstall developer apps like WebStrom/IntelliJ or Sublime Text for frontend development and IntelliJ or eclipse/Spring STS/GGTS for Grails development in  /Developer/Applications\n\t\tYour project workspaces go in /Developer/Work\n\t2. Install Command Line Tools for OSX 10.9 Mavericks\n\t\txcode-select —install \n\t3. Install JDK\n\t\tjava -version [will redirect to Oracle]\n\t4. Install Homebrew\t\t\n\t\truby -e \"$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)”\n\t\tbrew doctor\n\t\tbrew update\n\n###Install Yeomen on fresh Mac (one time only step)\n\n\tNote: make sure you have brew installed as documented above. \n\t1. brew install node   # this will install node and npm\n\t2. npm install -g yo   # this will install yeoman, grunt and bower\n\t3. npm install -g generator-angular  # install angular generator\n\t\n\n###WebStrom setup (one time only step)\n\u003e\n1. Install WebStrom\n2. Install AngularJS plugin\n3. copy setup/Yeoman-ng_gen.xml to WebStorm's tools folder:  Windows `~/.WebStormX/config/tools/`  or Mac `~/Library/Preferences/WebStormX/tools/`\n  1. Add some Yeoman-AngularJS commands to WebStorm's [Quick List] and create a [keymap] [alt+a]. [How to Link](http://www.screenr.com/xcI8)\n  2. Following steps are needed to enable debugging JavaScript from within WebStrom.\n    1. Open Run -\u003e Edit Configurations... menu,  click + to add new Node.js configuration[name it as Yeoman Grunt] and change it as showed in the pictures below\n    ![Yeoman Grunt WebStorm debug](Yeoman-Grunt-WebStorm-debug.gif)\n    2. Install Chrome Extension 'JetBrains IDE Support' for JavaScript debugging with WebStorm [JavaScipt debugging only support on Chrome browser for now]\n4. Create empty project e.g: ConsoleUI\n5. Open [Tool\u003eOpen Terminal] and run commands from Step 2. and rest of the steps\n\n###AngularJS work flow\n\n####Scaffold out a AngularJS project\n\n\t1. mkdir ConsoleUI \u0026\u0026 cd $_\t\t            # Creating app directory. #run this if you are not using WebStrom\n\t2. yo angular                               # scaffold out a AngularJS project.\n\t   #yo angular [app-name] \t                # if you want to name of app something other then the parent directory.\n\t   \n\tNote: If you checkout a project from SCM, you may already have following components defined in bower.json. In this case just run `bower install`\n\t\n\t3. bower install --save bootstrap       \t# install bootstrap for your project from Bower. If youman didnt install bootstrap\n\t5  bower install --save angular-bootstrap   # install a angular-bootstrap\n\t6. bower install --save restangular       \t# https://github.com/mgonto/restangular#restangular\n\t7. bower install --save angular-ui-router   # lets use angular-ui-router as  angular-route  sucks\n\t8. bower install --save angular-http-auth#master   # intercepts 401 responses, and triggers login\n\t9. bower install --save angular-animate     # Angular animates\n    9. bower install --save angular-resource    # angular-resource\n    9. bower install --save angular-cookies\t\t# angular-cookies\n    9. bower install --save angular-sanitize    # anangular-sanitize\n    10. bower install --save animate.css        # http://daneden.me/animate/\n\t11. bower install --save angular-growl      # Angular notifications\n\t12. bower install --save angular-translate  #  global i18n\n\t13. bower install --save angular-translate-loader-partial #load i18n files Asynchronously\n\t14. bower install --save angular-xeditable  # http://vitalets.github.io/angular-xeditable/\n\t15. bower install --save angular-cache      # better then http://jmdobry.github.io/angular-cache/guide.html#storage\n\t16. bower install --save css-spinners       # nice spinners\n\t17. bower install --save traceur-runtime    # `traceur-compiler` offline ES6 to ES5 compile need traceur-runtime.js\n\n\n####Other bower commands\n\n\tbower install                               # Install all the dependencies declared in bower.json\n\tbower register your_module_name             # Register your module with given name\n\tbower list                                  # To list installed packages.\n\tbower update                                # Update all dependencies\n\tbower update \u003cpackage-name\u003e                 # To update a package. e.g: bower update angular\n\tbower search \u003cpackage-name\u003e                 # To search for a package.\n\tbower install --save \u003cpackage-name\u003e#3.0.0   # To install a specific version. e.g: bower install angular\\#1.2\n\tbower uninstall --save \u003cpackage-name\u003e   \t# To Uninstalling packages.\n\n\n####Bower dependencies injected automatically into your HTML(index.html) by Grunt\n\u003e\n1. Do not manually edit `\u003c!-- bower:css --\u003e \u003c!-- endbower --\u003e` and `\u003c!-- bower:js --\u003e  \u003c!-- endbower --\u003e` sections in your `index.html` file.\n2. Grunt automatically injects them for you, based on your bower.json\n3. Only exception is when providers didn't include proper bower.json in their package. e.g:\n  1. app/bower_components/angular-growl/bower.json\n4. In this case I will manually fix those bower.json files with correct 'main' section.\n\n####Other grunt commands\n    1. grunt bower-install      # To reference new js, css files in index.html\n\t2. grunt test               # Test your app\n\t3. grunt serve              # Preview your app\n\t4. grunt                  \t# Build the application for deployment\n\n####Other yo commands\n\t1. yo angular:route myRoute                    \t# To create new route, controller and view\n    2. yo angular:controller myController\n    3. yo angular:controller myController --minsafe # for Minification Safe\n    4. yo angular:controller myController --coffee  # if you are using coffeeScript\n    5. yo angular:directive myDirective\n    6. yo angular:filter myFilter\n    7. yo angular:service myService\n\n\n\n###SCM integration tips\n\n####node_modules directory\n\nAs you can see if you take a look at the generated `.gitignore` file, `node_modules` directory cannot be committed. Other developers sharing the application project have to install dependent packages by running `npm install` after cloning the repository source codes.\n\n####bower_components\n\nAs descrived above, `bower install` is required as `bower_components` is never shared by SCM as well as `node_modules`.\n\n### Code In ES6, Transpile To ES5 As A Build-step: A Workflow For Grunt\n\n\t1. In WebStorm go to Preferences  and change following setting  \n\t\t1. JavaScript \u003e select `ECMAScript Harmony`\n\t\t2. Directories \u003e exclude `node_modules` and `.tmp` directories from project. [ This is a workarround to stop endless indexing bud in WebStorm]\n\t2. npm install --save-dev grunt-traceur \n\t   // my verion which is built on traceur 0.0.24 \n       npm install --save-dev git://github.com/xmlking/grunt-traceur.git \n\t3. npm install --save-dev es6-module-transpiler // grunt-traceur or this based on your needs.\n\t4. config `Gruntfile.js` file `grunt.initConfig` and `watch` sections as follows\n\u003e\n        traceur: {\n          options: {\n              // traceur options here\n              experimental: true,\n              blockBinding: true,\n              deferredFunctions: true,\n              annotations: true,\n              types: true,\n              debug:true\n          },\n          custom: {\n              files:[{\n                  expand: true,\n                  cwd: '\u003c%= yeoman.app %\u003e/modules/',\n                  src: ['**/*.es6.js'],\n                  dest: '\u003c%= yeoman.app %\u003e/modules/',\n                  ext: '.js'\n              }]\n          }\n        },\n\n        // Watches files for changes and runs tasks based on the changed files\n        watch: {\n            traceur :  {\n              files :  [ '\u003c%= yeoman.app %\u003e/modules/**/*.es6.js' ],\n              tasks :  [ 'newer:traceur' ]\n            },\n\t\n####Remember\n\n1. When `ECMAScript Harmony` is enabled and WebStorm prompt this, don't do that. It will trigger endless indexing and hung the IDE (bug)\n\n\u003e Node.js project detected: To separate your sources from the dependencies, create \"Node.js Dependencies\" JavaScript library from node_modules folder\n\n2. when Yeoman supports traceur, remove  traceur config from `Gruntfile.js`. Check yeoman [ROADMAP](http://yeoman.io/roadmap.html) for updates.\n\t\n###Reference\n\n[ES6 Transpile]: http://addyosmani.com/blog/author-in-es6-transpile-to-es5-as-a-build-step-a-workflow-for-grunt/\n[Gruny]: http://www.sitepoint.com/writing-awesome-build-script-grunt/\n ./traceur  --out EmailService.js --script EmailService.es6.js --deferred-functions true \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxmlking%2Fangular-webstorm-project-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxmlking%2Fangular-webstorm-project-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxmlking%2Fangular-webstorm-project-setup/lists"}