mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-04-01 22:37:41 +08:00
docs(tutorial): clarify bower usage
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user