Tips on 30Days30Skills

TurnToJPG -->

This series is the note for learning 30days30skills, the origin web pages could be found at:
All of these operations should be done under MACOS rather than linux.

Day 1 - bower

First install nodejs from following position:
Git could be installed from APPStore.
Set npm proxy before you do everything, cause I operate under the proxy based network:

npm config set proxy
npm config set https-proxy

Install bower:

$ set2383 #(For setting the proxy)
sudo npm install -g bower

Using bower for install the jquery packages:

$ pwd
$ set2383 #(For setting the proxy)
$ bower install jquery

Query the installed package information(This need to be done after you set the git configuration on proxy, because I worked under the proxy):

Yosemite:jQuery Trusty$ bower list
bower check-new     Checking for new versions of the project dependencies..
jQuery /Users/Trusty/Code/jQuery
└── jquery#2.1.1 extraneous

Uninstall packages via:

Yosemite:jQuery Trusty$ bower uninstall jquery
bower uninstall     jquery
Yosemite:jQuery Trusty$ ls
bower_components	simpleHtml.html		simpleHtml.html~
Yosemite:jQuery Trusty$ tree
├── bower_components
├── simpleHtml.html
└── simpleHtml.html~

1 directory, 2 files

use bower init for creating packages:

Yosemite:jQuery Trusty$ bower init
? name: blog
? version: 0.0.1
? description:
? main file:
? what types of modules does this package expose?: globals
? keywords: blog written
? authors: xxx <>
? license: MIT
? homepage:
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: No

  name: 'blog',
  version: '0.0.1',
  authors: [
    'xxx <>'
  moduleType: [
  keywords: [
  license: 'MIT',
  ignore: [

Then if you installed new packages, it will automatically calculate the dependencies and write to the json.

Yosemite:jQuery Trusty$ bower install bootstrap --save

Day 2 AngularJS


Seems all of the tests has been passed expect the last one, it complains:

Error: error:areq
Bad Argument
Argument 'BookCtrl' is not a function, got undefined

The reason is because the global constructor function is not allowed to use and use it with ng-controller since Angular’s version upper than 1.3.x.


Specify the AngularJS version when installing it.

$ bower list
bower check-new     Checking for new versions of the project dependencies..
AngularJS /Users/Trusty/Code/30Days/AngularJS
├── angular#1.3.3 extraneous (1.3.4-build.3611+sha.e9b9421 available)
└─┬ bootstrap#3.3.1 extraneous
  └── jquery#2.1.1
Yosemite:AngularJS Trusty$ bower install "angular#<1.3"
bower angular#<1.3          not-cached<1.3
bower angular#<1.3             resolve<1.3
bower angular#<1.3            download
bower angular#<1.3             extract archive.tar.gz
bower angular#<1.3            resolved
bower angular#<1.3             install angular#1.2.27

Now re-view the index5.html in the browser, everything will be OK.

Another Solution

Modify the code into following:

<!DOCTYPE html>
<html ng-app>
    <title>Bookshop - Your Online Bookshop</title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

	<div class="container" ng-controller="BookCtrl">
        <h2>Your Online Bookshop</h2>
	<input type="search" ng-model="criteria">
        <ul class="unstyled">
            <li ng-repeat="book in books | filter:criteria | orderBy :'name'">
                <span>{{}} written by {{ | uppercase}}</span>

    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>

function BookCtrl($scope){
        $scope.books = [
                {'name': 'Effective Java', 'author':'Joshua Bloch'},
                {'name': 'Year without Pants', 'author':'Scott Berkun'},
                { 'name':'Confessions of public speaker','author':'Scott Berkun'},
                {'name':'JavaScript Good Parts','author':'Douglas Crockford'}
angular.module('ng').config(function($controllerProvider) {

I don’t know how to set the global for seperated js file, but the above example works.