Generate Angular directive or service with gh-pages git branch for demo, typically for packaging as a bower module.
Yeoman Generator for AngularJS module builder (aimed at making Bower components with Github Pages for the demo(s)). Based off of Brian Ford's excellent post on AngularJS modules with Bower.
Install Yeoman Yo, Bower, & Grunt if you haven't already:
$ npm install -g yo bower grunt-cli
Install this generator:
$ npm install -g generator-angular-module
NOTE: Before creating a new module, CHECK / SEARCH to see if one already exists! And check the name on Bower since you must create one with a UNIQUE name.
Finally, naviagate to a (new) directory where you want to create your AngularJS module and initiate the generator:
$ yo angular-module
After you've followed the Yeoman prompts and your project has been scaffolded out for you, you'll have TWO Git branches,
master (where the final bower component code will live) and
gh-pages (where the development and demo takes place). You'll start in the
gh-pages branch - use the files created for you to actually build your module and a demo (which you'll use to manually test as you're building).
npm install && bower install- this installs grunt and any dependencies such as AngularJS
staticPathvariable - this assumes an
angular-directivesfolder off the root of your server but just set that path to be relative to your server root for the demo to work locally.
index.htmlfor you (i.e. for a WAMP server with root in the
wwwfolder, if your code is in
http://localhost/angular-directives/angular-module-testin a browser and your demo page should come up).
TODOtext is placed in files for places for you to write code / change things
HomeCtrl.js) - you can also create additional pages/routes as well (i.e. one page per demo - ideally demo different configurations and examples/options)
gruntto build your
main.cssfile and any other build files
app.jsand uncomment the second
staticPathline that has a
gh-pagescomment in it so it will work on gh-pages
git commityour changes to the
gh-pagesbranch and push it to your new Github repository, to the
git push origin gh-pages)
gh-pagesbranch AFTER pushing master since whichever is pushed first to Github will be the default branch (though you can change this with the settings for the repo on Github) - you want the
masterbranch to be the default on Github.
angular-module-test.lessfiles as well as the
angular-module-test.min.jsfile that Grunt generates for you) from
gh-pageswith the command
git checkout gh-pages angular-module-test.js angular-module-test.min.js angular-module-test.less(replace
angular-module-testwith your module name).
README.mdfile and any other files for the core bower module (
CHANGELOG.mdshould already be ready for v1.0.0 but may need to update these)
git tag v1.0.0) then push to Github with
git push origin master --tags- make sure to push your tags since that's how Bower does versions!
bower register angular-module-test [github repo location]
You're done! You now have a bower component for an AngularJS module (directive or service) with one or more demos on Github!
More info: Again, see Brian Ford's excellent post on AngularJS modules with Bower, where this was inspired from.
Trick question. It's not a thing. It's this guy:
Basically, he wears a top hat, lives in your computer, and waits for you to tell him what kind of application you wish to create.
Not every new computer comes with a Yeoman pre-installed. He lives in the npm package repository. You only have to ask for him once, then he packs up and moves into your hard drive. Make sure you clean up, he likes new and shiny things.
Yeoman travels light. He didn't pack any generators when he moved in. You can think of a generator like a plug-in. You get to choose what type of application you wish to create, such as a Backbone application or even a Chrome extension.
Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced.