Lab 2

In this lab, you will see

  • Bower
  • Grunt
  • Yeoman

Some Helpful Git Commands


//make folder

git init

//add remote repo

git remote add origin https://github.com/lauraLi035/iat381.git

//add any new files

git add .

//what's happening?

git status

//tell git what i did

git commit -am 'i made a repo'

//push to the remote repo called origin from the master branch

git push -u origin master

//add a new branch that's live on github

git branch -b 'gh-pages'

//switch to the new branch (likely won't switch back)

git checkout 'gh-pages'

//add files, commit some stuff here, first time in branch use push --all -u

git add .

git commit -am 'changes'

git push --all -u

//typically once a new branch has been pushed I just have to do

git push

Using your computer as if it was the 1980s (almost)

What we're going to be doing in this lab (and possibly in the remainder of this semester) is use the terminal for a lot of our stuff.

Some basic commands.

  • cd tells BASH to change the current working directory
  • ls utility to view files that are in the current working directory
  • pwd utility to view the current working directory
  • touch <file name> create a new file (in the current working directory)
  • mkdir <folder name> create a new directory (in the current working directory)
  • cp <source file name> <destination name> copy the specified file to the destination
  • cp -r <source folder name> <destination name> copy the specified folder to the destination
  • rm <file name> delete a file
  • rm -r <folder name> delete a folder
  • rm -f <file name> force delete a file
  • rm -rf <file or folder name> force delete anything

Before moving on... We'll need to install Node.js.

Node.js allows you to run JavaScript without the browser (well, the implications of the existence of Node.js is a lot more sophisticated than that, but I'm not going to go to the details on that).

You can install Node.js by going to nodejs.org and then running the installer, or, if you're on OS X and some Linux distro, you would install nvm and then use that to manage Node.js versions.

Automatically downloading jQuery, Bootstrap, etc., using Bower

  • First (assuming you've installed Node.js), run npm install -g bower
  • Next, create a folder, change directory to it
  • As a practice, let's install jQuery. We'll run bower install jquery

Running many tasks... From a single file

If you wanted to different things in a single task, you would typically create a script file.

If you wanted many task, prior to Grunt (and the like), you would have had to create many script files.

With Grunt, you simply have one file: Gruntfile.js. And it's this file that has many tasks that you can run.

Although, we're not going to ask you to create a Grunt task, but for now, just install Grunt, by running `npm install -g grunt-cli`

Don't reinvent the wheel. Use Yeoman

Yeoman is a tool for developers to easily create code generators.

In this lab, we'll be creating a simple AngularJS application.

For now, just install Yeoman, and a generator.

  • npm install -g yo
  • npm install -g generator-angular

Generating our First Application!

  • mkdir my-app
  • cd my-app
  • yo angular myapp
  • When prompted, say no to SASS, say yes to Bootstrap, exclude angular-cookies and angular-resource, include angular-messages
  • Just wait until everything is downloaded and compiled... It will take some time
  • grunt server
  • yo angular:controller contact
  • yo angular:route contact
  • yo angular:view contact
  • grunt
  • git init && git add -A && git commit -am 'initial commit'
  • git remote add origin <your repo address>
  • git push -u origin master
  • cd .. && mkdir my-app-dist && cd my-app-dist
  • git remote add origin <your repo address>
  • git checkout --orphan gh-pages
  • cp -r ../my-app/dist .
  • git add -A && git commit -am 'initial commit'
  • git push -u origin gh-pages

Create an Angular App with a Custom View, Controller and Model

  • Create a new folder on your github repo
  • Create a basic angular app (with bootstrap or not, use yeoman or not)
  • Create a custom controller, model and view (keep is stimple: like this tutorial
  • Commit and push your ANGULAR APP with CUSTOM CONTROLLER, MODEL and VIEW to gh-pages branch of your repo
  • Link to your live Angular App, by PASTING and CREATING the link in the canvas text editor
*** MAKE SURE IT IS A LINK!!! ***