docs(tutorial): clarify bower usage

This commit is contained in:
Peter Bacon Darwin
2014-04-24 10:59:04 +01:00
parent 8377e81827
commit eda00ce23f
4 changed files with 58 additions and 30 deletions

View File

@@ -112,12 +112,7 @@ node --version
</a>.
</div>
To install bower:
```
npm install -g bower
```
Once you have Node.js and Bower installed on your machine you can download the tool dependencies by running:
Once you have Node.js installed on your machine you can download the tool dependencies by running:
```
npm install
@@ -130,8 +125,14 @@ This command will download the following tools, into the `node_modules` director
- [Karma][karma] - unit test runner
- [Protractor][protractor] - end 2 end test runner
Running `npm install` will also automatically run `bower install`, which will download the Angular
framework into the `bower_components` directory.
Running `npm install` will also automatically use bower to download the Angular framework into the
`bower_components` directory.
<div class="alert alert-info">
Note the angular-phonecat project is setup to install and run these utilities via npm scripts.
This means that you do not have to have any of these utilities installed globally on your system
to follow the tutorial. See **Installing Helper Tools** below for more information.
</div>
The project is preconfigured with a number of npm helper scripts to make it easy to run the common
tasks that you will need while developing:
@@ -141,6 +142,28 @@ tasks that you will need while developing:
- `npm run protractor` : run the Protractor end 2 end tests
- `npm run update-webdriver` : install the drivers needed by Protractor
### Install Helper Tools (optional)
The Bower, Http-Server, Karma and Protractor modules are also executables, which can be installed
globally and run directly from a terminal/command prompt. You don't need to do this to follow the
tutorial, but if you decide you do want to run them directly, you can install these modules globally
using, `sudo npm install -g ...`.
For instance to install the Bower command line executable you would do:
```
sudo npm install -g bower
```
*(Omit the sudo if running on Windows)*
Then you can run the bower tool directly, such as:
```
bower install
```
### Running Development Web Server
While Angular applications are purely client-side code, and it is possible to open them in a web

View File

@@ -34,15 +34,15 @@ We are using [Bower][bower] to install client side dependencies. This step upda
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-mocks": "~1.2.15",
"angular-mocks": "~1.2.x",
"bootstrap": "~3.1.1",
"angular-route": "~1.2.15"
"angular-route": "~1.2.x"
}
}
```
The new dependency `"angular-route": "~1.2.15"` tells bower to install a version of the
angular-route component that is compatible with version 1.2.15. We must tell bower to download
The new dependency `"angular-route": "~1.2.x"` tells bower to install a version of the
angular-route component that is compatible with version 1.2.x. We must tell bower to download
and install this dependency.
If you have bower installed globally then you can run `bower install` but for this project we have

View File

@@ -33,25 +33,27 @@ We are using [Bower][bower] to install client side dependencies. This step upda
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-mocks": "~1.2.15",
"angular-mocks": "~1.2.x",
"bootstrap": "~3.1.1",
"angular-route": "~1.2.15",
"angular-resource": "~1.2.15"
"angular-route": "~1.2.x",
"angular-resource": "~1.2.x"
}
}
```
The new dependency `"angular-resource": "~1.2.15"` tells bower to install a version of the
angular-resource component that is compatible with version 1.2.15. We must tell bower to download
and install this dependency.
If you have bower installed globally then you can run `bower install` but for this project we have
preconfigured npm to run bower install for us:
The new dependency `"angular-resource": "~1.2.x"` tells bower to install a version of the
angular-resource component that is compatible with version 1.2.x. We must ask bower to download
and install this dependency. We can do this by running:
```
npm install
```
<div class="alert alert-info">
If you have bower installed globally then you can run `bower install` but for this project we have
preconfigured `npm install` to run bower for us.
</div>
## Template

View File

@@ -37,30 +37,33 @@ We are using [Bower][bower] to install client side dependencies. This step upda
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-mocks": "~1.2.15",
"angular-mocks": "~1.2.x",
"bootstrap": "~3.1.1",
"angular-route": "~1.2.15",
"angular-resource": "~1.2.15",
"angular-route": "~1.2.x",
"angular-resource": "~1.2.x",
"jquery": "1.10.2",
"angular-animate": "~1.2.15"
"angular-animate": "~1.2.x"
}
}
```
* `"angular-animate": "~1.2.15"` tells bower to install a version of the
angular-animate component that is compatible with version 1.2.15.
* `"angular-animate": "~1.2.x"` tells bower to install a version of the
angular-animate component that is compatible with version 1.2.x.
* `"jquery": "1.10.2"` tells bower to install the 1.1.2 version of JQuery. Note that this is not an
Angular library, it is the standard JQuery library. We can use bower to install a wide range of 3rd
party libraries.
We must tell bower to download and install these dependencies. If you have bower installed globally
then you can run `bower install` but for this project we have preconfigured npm to run bower install
for us:
We must ask bower to download and install this dependency. We can do this by running:
```
npm install
```
<div class="alert alert-info">
If you have bower installed globally then you can run `bower install` but for this project we have
preconfigured `npm install` to run bower for us.
</div>
## How Animations work with `ngAnimate`