Useful webdesign / bootstrap / CSS resources

Spin.js
Pure CSS implementation of loading spinners

Angular Full Stack / Bootstrap / Express setup and dev

Requirements:

• http://yeoman.io/
• sudo npm install -g yo
• sudo npm install -g grunt
• sudo npm install -g grunt-cli
• sudo npm install -g bower
• sudo npm install -g grunt-contrib-imagemin
• https://github.com/yeoman/generator-karma (wasn't included with yo)
• sudo npm install -g generator-karma
• https://github.com/DaftMonk/generator-angular-fullstack
• npm install -g generator-angular-fullstack

Creation process:

1. Create a folder, then add scaffolding
1. mkdir my-new-project && cd $_
2. yo angular-fullstack [app-name]
1. Select bootstrap
2. Select standard angular modules
2. run 'bower install'
3. run 'grunt serve'
1. This should open up in a browser window to see service running.

Build

1. Run 'grunt serve:dist' to dynamically serve production code
2. Run 'grunt build' to build app

Adding features
Run yo --help to see a full list. Most common:

• yo angular-fullstack:controller <controller name> (excluding Ctrl, this is added for you)
• yo angular-fullstack:view <view name> (excluding .html, i.e. list, creates partials/list.html)

Example

Adding API listing to the app

1. yo angular-fullstack:controller ApiList
1. Edit it to call the GET /api/apis endpoint
2. set $scope.apis to the result
2. yo angular-fullstack:view apilist
1. Update the view to control the navbar and the result from the api call
   <div ng-include="'partials/navbar'"></div>
   <div class="row marketing">
       <div ng-repeat="api in apis">
           <h4>{{api.name}}</h4>
           <p>{{api.info}}</p>
       </div>
   </div>
3. Edit app/scripts/controllers/navbar and add a new navbar item
   {
        'title': 'Apis',
         'link': '/apiList'
   }
4. Update app/scripts/controllers/apilist.js to call the /api/apis endpoint
5. Add another route to the /app/scripts/app.js route provider
6. Add API call into lib/routes.js

Adding angular-ui bootstrap

1. Add "angular-bootstrap": "0.10.0" to your bower.json file
2. bower install
3. Update index.html file and add dependency there
4. Add the dependency to your module, i.e.
   1. angular.module('myApp', [...,  'ui.bootstrap'])