I'm creating a bower package named X who depends to angular-local-storage.
I saved angular-local-storage in my bower.json.
My module is declared as :
angular.module('X', ['LocalStorageModule']);
The service as :
angular
.module('X')
.service('XService', XService);
function XService($resource, $q, $window, LocalStorageService) {...}
When I install the package X with bower in another project, LocalStorageModule is not found.
How can I manage this dependencies ?
EDIT : the error is:
Unknown provider: LocalStorageServiceProvider <- LocalStorageService <- XService
Add 'LocalStorageModule' to your main module's list of dependencies.
Include angular-local-storage.js (or angular-local-storage.min.js) from the dist directory in your index.html, after including Angular itself.
More
I would suggest you layout your factory or service this way:
.service('ServiceName', ['$log','OtherService', function($log, OtherService){
var serviceInstance = {};
//stuff
return serviceInstance;
}]);
This has more boilerplate than you absolutely need, but it is minification safe and keeps your namespaces clean.
In order to build a bower package, you need to make sure you follow these steps:
bower package: X
prepare a bower.json with this following (minimal) configuration:
{
"name": "your-package-x",
"version": "1.0.0",
"main": "dist/your-package-x.min.js",
"dependencies": {
"angular": "1.5.0",
"angular-local-storage": "2.0.7"
...
}
}
build all the package's files into dist/your-package-x.min.js (using your favorite build tool)
if the package has HTML templates, you should build a templateCache file and append it to the built file (using your build tool):
a. exemple with grunt: https://www.npmjs.com/package/grunt-angular-templates
b. exemple with gulp: https://www.npmjs.com/package/gulp-angular-templatecache
publish to bower
External project
add your-package-x dependency to your bower.json:
{
"name": "main-project",
"version": "1.0.0",
"dependencies": {
"your-package-x": "path to repo or version"
...
}
}
install bower deps
Inject the package-x and its dependencies:
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/dist/your-package-x/dist/your-package-x.min.js"></script>
==> or use a build tool to do it for you (look for wiredep)
I hope this quick guide would help.
Related
I am using bower & npm as package manager to handle dependencies. now the bower is showing
npm WARN deprecated bower#1.8.2: ...psst!
Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn:
https://bower.io/blog/2017/how-to-migrate-away-from-bower/
So i have integrated yarn using bower-away. Now all the bower dependencies are moved into my package.json as like below
"#bower_components/angular": "angular/bower-angular#~1.6.4",
"#bower_components/jquery": "jquery/jquery-dist#>= 1.9.1"
I used wiredep to inject all the dependency libraries into index.html. It will automatically handle bower dependencies.
Now i have removed bower completely so this won't work.
Is there any other method to move dependencies into index.html. currently I am using gulp inject method to inject all the files like as below .pipe(inject(gulp.src(["./src/*.js", "./src/*.css"], {read: false})) but it's not handling for all packages. because path is completely different.
For Ex: jquery and angular folder like as below
can anyone suggest is there any other method to achieve this.
you still able to fix it using gulp inject:
gulp.task('injectfiles', function () {
var appJS= ["./src/*.js"];// pattern to match your files
var libJS= [
'(path where jquery exist)/jquery.js',
'(path where angular exist)/angular.js'
];
var jsOrder= [
'**/jquery.js',
'**/angular.js',
'(rest lib js)'
'**/app.module.js',
'**/*.module.js',
'**/*.constants.js',
'**/*.value.js',
'**/*.config.js',
'**/*.route.js',
'**/*.filter.js',
'**/*.service.js',
'**/*.controller.js',
'**/*.directive.js',
'**/*.js'
];
var src = [].concat(libJS,appJS)
return gulp
.src('index path')
.pipe(inject(src, '', jsOrder))
.pipe(gulp.dest('dest path'))
})
function inject(src, label, order) {
// var options = { read: false };
var options = {}
if (label) {
options.name = 'inject:' + label
}
return $.inject(orderSrc(src, order), options)
}
function orderSrc(src, order) {
// order = order || ['**/*'];
return gulp
.src(src)
.pipe($.if(order, $.order(order)))
}
I am facing below issue -
I have Yeomen generator and wiredep to inject bower dependencies in index.html file.
I have installed angular tree view by bower then noticed that lib files and css file of angular tree view are not getting injected in index file.
After debugging for while found that the lib file of angular tree view has one extras dot (angular.treeview.js) same with the css file as well
So how to inject that file in index.html
i have below task in inject.js file in gulp folder to inject file in index.html which is generated by yoemen
gulp.task('inject', ['scripts'], function () {
var injectStyles = gulp.src([
path.join(conf.paths.src, '/app/**/*.css')
], { read: false });
var injectScripts = gulp.src([
path.join(conf.paths.src, '/app/**/*.module.js'),
path.join(conf.paths.src, '/app/**/*.js'),
path.join('!' + conf.paths.src, '/app/**/*.spec.js'),
path.join('!' + conf.paths.src, '/app/**/*.mock.js')
])
.pipe($.angularFilesort()).on('error',conf.errorHandler('AngularFilesort'));
var injectOptions = {
ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
addRootSlash: false
};
return gulp.src(path.join(conf.paths.src, '/*.html'))
.pipe($.inject(injectStyles, injectOptions))
.pipe($.inject(injectScripts, injectOptions))
.pipe(wiredep(_.extend({}, conf.wiredep)))
.pipe(gulp.dest(path.join(conf.paths.tmp, '/serve')));
}
I am using Yeomen and gulp.
Any help would be appreciated.
It doesn't have to do anything with your gulp task.
Wiredep uses bower.json file to inject dependency in your index file.
I case of any issue, like in your current scenario you just need to override your package, like you do for bootstrap.
add below code in bower.json
"overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css",
"dist/fonts/glyphicons-halflings-regular.eot",
"dist/fonts/glyphicons-halflings-regular.svg",
"dist/fonts/glyphicons-halflings-regular.ttf",
"dist/fonts/glyphicons-halflings-regular.woff",
"dist/fonts/glyphicons-halflings-regular.woff2"
]
},
"angular-treeview":{
"main":[
"angular.treeview.js",
"css/angular.treeview.css"
]
}
}
I hope it will help you.
Happy coding :)
Probably a newbie's question, but I need to add the ngDialog module to angular.
I noticed that after installing with bower Yeoman doesn't automatically update files, so I added
<script src="bower_components/ngDialog/js/ngDialog.js"></script>
to index.html.
I went ahead and added 'ngDialog' to the main module dependencies, like this
angular.module('sigaApp', ['ngDialog'])
.controller('MainCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
I also added $scope and 'ngDialog' to my controller, like this
angular.module('sigaApp')
.controller('myNewCtrl', ['$scope', 'ngDialog',
function ($scope, ngDialog) {
$scope.open = function () {
ngDialog.open({ template: 'templateId' });
};
}
]
);
That's ALL I did. Grunt refreshes the page with no error, and the page console shows no error, but the page shows nothing, and I have just no idea why.
Should it load the dependencies automatically, and I shouldn't be adding these injections manually?
Is there another standard way to add the dependencies?
Any help is appreciated. Thanks!
Answering my own question: Removed the module and installed with bower install ng-dialog --save adding --save to the command line.
What the --save parameter does, actually is that it "Save installed packages into the project's bower.json dependencies" (quoting bower help) and as far as I'm aware of, there's where Yeoman takes the dependencies from to update index.html.
I am setting up an angular project with browserify.
I have a gulp task that take all vendor modules from bower_components directory and put them in a bundle:
gulp.task('dependencies', function () {
return browserify({
entries: [dependencies.js],
})
.transform(debowerify)
.bundle()
.pipe(source(config.filenames.release.dep))
//.pipe(streamify(uglify()))
.pipe(gulpif(release,
gulp.dest(config.paths.dest.release.scripts),
gulp.dest(config.paths.dest.build.scripts)));
The dependencies.js file contains this code:
'use strict';
// bower dependencies (can be edited in package.json)
var angular = require('angular');
require('angular-ui-router');
Everything works fine. Now I try to change the ui-router with angular-new-router.
My new dependencies.js (My gulp task doesn't change):
'use strict';
// bower dependencies (can be edited in package.json)
var angular = require('angular');
require('angular-new-router');
And for information here's my bower.json file:
{
"name": "test",
"private": true,
"dependencies": {
"angular": "~1.4.x",
"angular-new-router": "*",
"angular-ui-router": "*"
}
}
With this new config browserify return a weird error:
: Cannot find module
'./....\bower_components\angular-new-router\angular-new-router.js'
from
'D:\Devs\sharefun\WebApplication2\src\WebApplication2\client\modules'
at D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:55:21
at load (D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:69:43)
at onex (D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:92:31)
at D:\Devs\sharefun\WebApplication2\src\WebApplication2\node_modules\browserify\node_modules\resolve\lib\async.js:22:47
at Object.oncomplete (fs.js:107:15)
What I find weird is that browserify is looking for bower_components\angular-new-router\angular-new-router.js instead of bower_components\angular-new-router\index.js
you kind of have the answer, specify full path to index.js. try
require(angular-new-router/index.js);
or
import 'angular-new-router/index.js'; for ES6
to anyone who is having this problem now it might be useful to know that new router package is not updated anymore but you can get it from angular project.
the latest example working with angular 1.5, components() and child routes can be found here:
http://plnkr.co/edit/N3YP3dKMuljpZ6mWsVBT?p=preview
I am new to ng-route. I have a site called www.foo.com. And I just want to assign the template HTML (fooapi.view.html) and the controller (fooapi.controller.js) to the URLs like
www.foo.com/api?id=1&id=2&id=3
. I wonder if somebody could give some suggestion.Thanks.
First of all, you will need to install ng-route. To do so, you can either use npm or bower for the installation, or a manual way by downloading ng-route javascript file which can be found here
To install using bower
bower install angular-route
To install using npm
npm install angular-route
After, completing those steps, include the file named angular-route.min.js to your index.html, depending on where you have installed the downloaded files.
<script src="/bower_components/angular-route/angular-route.js"></script>
After doing so, include 'ngRoute' to you angular's module
angular.module('ngApp', ['ngRoute'])
Now you will have to create a angular's config module
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/foo/:id', {
templateUrl: 'fooapi.view.html'
controller: 'FooCtrl'
});
})
In your fooapi.controller.js
.controller('FooCtrl', function ($routeParams) {
//getting the id from the URL
console.log($routeParams.id);
});