Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.

chore(bower): remove bower #425

Closed
wants to merge 1 commit into from
Closed

chore(bower): remove bower #425

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .bowerrc
View file
Open in desktop

This file was deleted.

29 changes: 9 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,20 @@ The `depth=1` tells git to only pull down one commit worth of historical data.
We have two kinds of dependencies in this project: tools and Angular framework code. The tools help
us manage and test the application.

* We get the tools we depend upon via `npm`, the [Node package manager][npm].
* We get the Angular code via `bower`, a [client-side code package manager][bower].
* We get the dependencies, and dev tools we depend upon via `npm`, the [Node package manager][npm].
* In order to run the end-to-end tests, you will also need to have the
[Java Development Kit (JDK)][jdk] installed on your machine. Check out the section on
[end-to-end testing](#e2e-testing) for more info.

We have preconfigured `npm` to automatically run `bower` so we can simply do:
To install the dependencies and dev tools, run the command:

```
npm install
```

Behind the scenes this will also call `bower install`. After that, you should find out that you have
two new folders in your project.

* `node_modules` - contains the npm packages for the tools we need
* `app/bower_components` - contains the Angular framework files

*Note that the `bower_components` folder would normally be installed in the root folder but
`angular-seed` changes this location through the `.bowerrc` file. Putting it in the `app` folder
makes it easier to serve the files by a web server.*
This will generate the folder `node_modules` in the project root with the correct version of angular and developer tools needed to run and build the app.
Inside the `app/` folder is the symlink `app/node_modules/` which points to the `node_modules/` folder that gets generated in the root.
This folder is a convenience so that the html index to load angular dependencies directly without the need to copy them or use a build tool.

### Run the Application

Expand Down Expand Up @@ -190,17 +183,14 @@ If JDK is not already installed, you can download it [here][jdk-download].

## Updating Angular

Since the Angular framework library code and tools are acquired through package managers (npm and
bower) you can use these tools to easily update the dependencies. Simply run the preconfigured
script:
Since the Angular framework library code and tools are acquired through package managers (npm)
you can use these tools to easily update the dependencies. Simply run the script:

```
npm run update-deps
npm update
```

This will call `npm update` and `bower update`, which in turn will find and install the latest
versions that match the version ranges specified in the `package.json` and `bower.json` files
respectively.
This will find and install the latest versions that match the version ranges specified in `package.json`.


## Loading Angular Asynchronously
Expand Down Expand Up @@ -279,7 +269,6 @@ For more information on AngularJS please check out [angularjs.org][angularjs].


[angularjs]: https://angularjs.org/
[bower]: http://bower.io/
[git]: https://git-scm.com/
[http-server]: https://github.com/indexzero/http-server
[jasmine]: https://jasmine.github.io/
Expand Down
10 changes: 5 additions & 5 deletions app/index-async.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="node_modules/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="node_modules/html5-boilerplate/dist/css/main.css">
<style>
[ng-cloak] {
display: none;
}
</style>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="node_modules/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script>
// include angular loader, which allows the files to load in any order
//@@NG_LOADER_START@@
Expand All @@ -28,8 +28,8 @@

// load all of the dependencies asynchronously.
$script([
'bower_components/angular/angular.js',
'bower_components/angular-route/angular-route.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'app.js',
'view1/view1.js',
'view2/view2.js',
Expand Down
10 changes: 5 additions & 5 deletions app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="node_modules/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="node_modules/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="node_modules/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
Expand All @@ -31,8 +31,8 @@
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
Expand Down
1 change: 1 addition & 0 deletions app/node_modules
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
../node_modules
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will not work on Windows and has some other issues:

  • Serving all your npm dependencies is probably not the best idea.
  • This makes it harder to deploy the app, because you have to copy both app/ and node_modules/.
  • Due to the above, this increases the size of the deploy artifacts significantly.

15 changes: 0 additions & 15 deletions bower.json
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ module.exports = function(config) {
basePath: './app',

files: [
'bower_components/angular/angular.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-mocks/angular-mocks.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/angular-mocks/angular-mocks.js',
'components/**/*.js',
'view*/**/*.js'
],
Expand Down
18 changes: 8 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@
"description": "A starter project for AngularJS",
"repository": "https://github.com/angular/angular-seed",
"license": "MIT",
"dependencies": {
"angular": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This really belongs in devDependencies.

"angular-route": "~1.5.0",
"html5-boilerplate": "^5.3.0"
},
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
Expand All @@ -17,24 +23,16 @@
"protractor": "^4.0.9"
},
"scripts": {
"postinstall": "bower install",

"update-deps": "npm update",
"postupdate-deps": "bower update",

"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1 ./app",

"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",

"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",

"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",

"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+' //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/node_mohules/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=node_modules/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+' //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
}
}