I tried to include the carousel in my angular project and added the required dependencies via npm install angular-jk-carousel --save and its gets installed in node_modules folder successfully,
Src
https://github.com/juank11memphis/angular-jk-carousel
and added jkAngularCarousel as dependency to module and included the script and css file in index and its not working,
How to use the node module dependencies to include to work properly?
myproject/
--/bower-components/
--/gulp/
--/.tmp/
--/node-modules/
---/angular-jk-carousel
--/src/
---/app
----/app.module.js
----/app.run.js
----/app.route.js
----/mydev/
-------/app.mydev.module.js
-------/app.mydev.config.js
-------/app.mydev.controller.js
-------/app.mydev.tmpl.html
---/index.html
--package.json
--bower.json
--gulpfile.js
--.bowerrc
app.module.js
(function() {
'use strict';
angular
.module('app', [
'ui.router','ngAnimate', 'ngCookies', 'ngSanitize', 'ngMessages', 'ngMaterial','googlechart', 'chart.js', 'ui.calendar', 'angularMoment', 'uiGmapgoogle-maps', 'md.data.table', 'ngFileUpload','app.mydev',
'jkAngularCarousel'
])
})();
package.json
{
"name": "ABC",
"version": "2.5.0",
"private": true,
"devDependencies": {
"angular-jk-carousel": "^0.1.6",
//other dependencies
},
"engines": {
"node": ">=0.10.0"
}
}
index.html
<!doctype html>
<html class="no-js" ng-app="app">
<head>
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body translate-cloak ng-class="bodyClasses">
<div layout="row" ui-view="main"></div>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
<script src="../node_modules/angular-jk-carousel/dist/jk-carousel.min.js"></script>
<link href="../node_modules/angular-jk-carousel/dist/jk-carousel.min.css" >
</body>
</html>
console
GET http://localhost:3001/node_modules/angular-jk-carousel/dist/jk-carousel.min.js
(index):316 GET http://localhost:3001/node_modules/angular-jk-carousel/dist/jk-carousel.min.js
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module jkAngularCarousel due to:
Error: [$injector:nomod] Module 'jkAngularCarousel' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Related
I have 5 HTML files in my project and every has a useref block in the bottom like this:
<!-- build:js static/js/main.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
Common JS file in all 5 files are plugins.js . I need that JS file in every HTML file and its repeating in all my files.
My second HTML file has this block (again plugins.js is there) :
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
And my fifth HTML file has this block:
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
So in every file im using plugins.js and in some files i use some other libraries. But when i run task this three files are not concatenated into main.js. Only thing in main.js is content from plugins.js . Other libraries are not included into main.js.
Why is that so? Can i even use this plugin like that?
My gulp task:
gulp.task('compress:js:html', ['clear:dist'], function () {
return gulp.src('./*.html')
.pipe(useref())
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('./dist/'))
});
All your HTML files specify the same location for the concatenated file (static/js/main.js), but they all specify different source files that should be concatenated. Depending on the order in which your HTML files are processed you end up with a different static/js/main.js. In your case the one from your first example.
You have two options:
For each HTML file specify a different location for the concatenated file:
HTML File 1:
<!-- build:js static/js/main1.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
HTML File 2:
<!-- build:js static/js/main2.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
HTML File 3:
<!-- build:js static/js/main3.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
This will reduce the number of requests a browser has to make for each page, but it doesn't leverage browser caching.
Refer to all JS files in each HTML file, whether you need the JS file for that specific page or not. That means you have the following in all three of your HTML files:
<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->
Since browsers will cache the resulting main.js file it will only have to be downloaded once.
Here's my index.html file:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Price Tracker</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap-css/css/bootstrap.min.css" />
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap-css/js/bootstrap.min.js"></script>
<!-- endbower -->
</body>
</html>
My gulpfile picks up the bower dependencies correctly and adds them to the index. But I want gulp to pick up a custom CSS file.
Is this possible ?
Yeah you can embed any CSS file path you want, this is what I'm using htmlReplace
https://github.com/VFK/gulp-html-replace
npm install --save-dev gulp-html-replace
// Task to make the index file production ready
var htmlReplace = require('gulp-html-replace');
gulp.task('build:index', function() {
gulp.src('app/index.html')
.pipe(htmlReplace({
//'app-css' : 'assets/'+version+'/css/dashboard.css',
'app-css' : 'assets/css/dashboard.css',
}))
.pipe(gulp.dest('build/'));
});
Then in your markup
<!-- build:app-css -->
<!-- Anything between the build comments gets replaced -->
<link href="dev/assets/css/dashboard.css" rel="stylesheet">
<!-- endbuild -->
This is how you delete files, with run-sequence
https://www.npmjs.com/package/del
// Clear out all files and folders from build folder:
gulp.task('build:cleanfolder', function(cb) {
del([
'build/**'
], cb);
});
This is how you pipe different tasks together and in order
gulp.task('build', function(cb) {
runSequence(
'version', // Save new version
'build:del-assets-static', // Delete old static folder in app/assets
'build:move-files', // Move files into new static folder
'html-templates', // Generate $templateCache file of HTML partials
//'build-highcharts-css', // Minify and concat highcharts styles
'build-app-css', // Minify and concat app styles
'highcharts-js', // Minify and concat highcharts scripts
'build-app-js', // Minify and concat app scripts
'build:copy', // Deletes old build folder
'build:remove', // Copy then Remove unneeded assets from build
'build:version', // Move assets into versioned build folder
'build:index', // Replace scripts in index.html
'build:final-clean', cb); // Remove app.min.js from build folder
});
gulp-inject is probably what you are looking for. It works similar to Wiredep and lets you specify where to insert css/js tags into the html for every match found (specified by glob pattern)
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
// Gulpfile.js
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('custom', function(){
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return gulp.src('./index.html')
.pipe(inject(sources))
.pipe(gulp.dest('./build'));
})
I have used grunt and following is the current structure:
<!-- build:js scripts/vendors.min.js -->
<!-- bower:js -->
<script src="../file/path.js"></script>
<script src="../file/path2.js"></script>
<script src="../file/path3.js"></script>
<script src="../file/path4.js"></script>
<script src="../file/path5.js"></script>
<script src="../file/path6.js"></script>
<script src="../file/path7.js"></script>
<script src="../file/path8.js"></script>
<!-- endbower -->
<!-- endbuild -->
As defined it gives the output file vendors.min.js, But I want to get output files as follows:
vendors1.min.js
vendors2.min.js
vendors3.min.js
Is there a way to get this done?
Following is the sample usemin build configuration in my index.html file
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
For development version, I dont want to minify the scripts and i want each module into its own js file. So the index.html after running would be
<script src="js/one.js"></script>
<script src="js/two.js"></script>
For production version,I want to minify the scripts and concat them into a single file.So the index.html would be
<script src="js/myApp.js"></script>
I tried the following , but it is not working:
<!-- build:myApp js/myApp.js -->
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- endbuild -->
And run the use-min task like this (prod would be set to true in the prod task and false in dev task) -
usemin({
myApp: prod?[uglify({mangle:true})]:'',
js: prod?'':[uglify({mangle:false})]
}).
I can keep two index.html files and manage this.But I was wondering can this be achieved with a single index.html?
Thanks in advance for any help.
It looks like you're using the same pipeline id: js
<!-- build:js js/one.js -->
<!-- build:js js/two.js -->
Try using unique pipeline ids like so:
<!-- build:js1 js/one.js -->
<!-- build:js2 js/two.js -->
What about this? Merge all javascript files in 2 files like in your dev env. After that just merge those two files into one big?
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->
<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- build:myApp js/myApp.js -->
<script src="js/one.js"></script>
<script src="js/two.js"></script>
<!-- endbuild -->
Or even marge all files with one build?
<!-- build:myApp js/myApp.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
I'm trying to implement the angular-wizard module.
I have a angular app generated by yeoman. I used bower install angular-wizard to get the module and referenced it in my index.html right above the app.js script tag with the other modules, like angular-resource, angular-cookies etc.
The main view loads fine until I add the mgo-angular-wizard reference to the controller dependencies, when added the page loads blank with no errors in the console.
eg:
'use strict';
angular.module('merlinApp', ['mgo-angular-wizard']) // this is where everything breaks
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
My index.html has the following scripts included in this order:
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
Lodash (or Underscore) dependency ?
If still not working, try adding wizard directive in your html page.