I have the following directory structure:
bower_components
node_modules
src
index.html
bower.json
package.json
gulpfile.js
.gitignore
I have a gulp task to inject the bower dependencies as follows :
gulp.task('bower-inject', function () {
gulp.src('./index.html')
.pipe(wiredep())
.pipe(gulp.dest('./'));
});
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="src/assets/images/favicon.ico">
<title>ABC</title>
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- this is done with gulp inject which works as expected -->
<!-- endinject -->
</head>
<body ng-controller="AppController as appVm">
<div ui-view></div>
<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- done via gulp-inject and works as expected -->
<!-- endinject -->
</body>
bower.json
"devDependencies": {
"angular": "1.4.0",
"angular-bootstrap": "~0.13.0",
"angular-ui-router": "~0.2.15",
"bootstrap": "~3.3.4",
"modernizr": "~2.8.3",
"font-awesome": "~4.3.0"
}
This is what I see when I run the task :
[00:24:50] Starting 'bower-inject'...
[00:24:50] Finished 'bower-inject' after 14 ms
Any idea what I am missing here?
This is what finally worked for me:
gulp.task('inject', function () {
var target = gulp.src('./index.html');
var sources = gulp.src(['src/**/*.js', 'src/**/*.css'], {read: false});
return target
.pipe(wiredep({
devDependencies: true
}))
.pipe(inject(sources))
.pipe(gulp.dest('./'));
});
Wiredep will inject script tags when you install your packages as dependencies, not dev-dependencies.
So runing bower install --save angular angular-bootstrap angular-ui-router bootstrap modernizr font-awesome and then running your gulp build should do it.
Note: some packages need overrides configuration on bower.json. Check here for information on bower overrides if you need.
Related
I am trying to create a progressive web app using angular 1.5 with help of gulp.
I have created a service worker(sw.js) using sw-precache module in npm.
this is my index.html
<!doctype html>
<html ng-app="ngapp">
<head>
<meta charset="utf-8">
<title>sfxInstantPay</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#CA3F39">
<link rel="manifest" type="text/css" href="app/manifest.json">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
<script type="text/javascript">
if ('serviceWorker' in navigator) {
// Path is relative to the origin, not project root.
navigator.serviceWorker.register('scripts/sw.js')
.then(function(reg) {
console.log('Registration succeeded. Scope is ' + reg.scope);
})
.catch(function(error) {
console.error('Registration failed with ' + error);
});
}
</script>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ui-view="app" layout-fill></div>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- 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 -->
</body>
</html>
I am using UI router to make route changes . my router.js is
(function() {
'use strict';
angular
.module('ngapp')
.config(routerConfig);
/** #ngInject */
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/index.html',
views:{
'app#':{
templateUrl: 'app/dashboard/xx/views/xx.html',
controller: 'xxController',
controllerAs: 'xCtrl'
}
}
});
$urlRouterProvider.otherwise('/index.html');
}
})();
and my manifest.json is
{
"name": "Hello Mobile",
"icons": [
{
"src": "assets/images/angular.png",
"sizes": "100x100",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "#e0e0e0"
}
in gulp build file I am generating sw.js file by below code
gulp.task('generate-service-worker-dist', function(callback) {
var path = require('path');
var swPrecache = require('sw-precache');
var rootDir = path.join(conf.paths.dist,'');
swPrecache.write(path.join(rootDir+'/scripts', 'sw.js'), {
staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
stripPrefix: rootDir
}, callback);
});
After I ran gulp buld application is running normal service worker is created and in Application tab developer console I can see service worker activated and running. but When I goto offline and refresh the page it is not opening
Please tell me where is my mistake.
The reason is because the sw can't fetch the request the browser is asking for.
Verify the following:
Place the sw in the same scope as the main page (index.html), probably this is the error, because the sw scope is http://localhost:3000/scripts and the main request is http://localhost:3000/index.html
Look in the cache storage (chrome) if there is an entry for your main request, e.g. http://locahost:3000/ or http://locahost:3000/index.html depending on your main entry point.
This two points should be true in order to the application can go offline.
I first tried to install ionic from npm and require it with
require('ionic')
It does not work, the npm ionic version in bundled in an browserify unknown path.
Then I installed it from bower, and added some browser-shim :
package.json
"browserify-shim": {
"ionic": "ionic"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"ionic": "./libs/ionic/release/js/ionic.js"
...
libs is my bower folder.
It looks like ionic is found by browserify. But I have the following ionic error:
Uncaught TypeError: Cannot read property 'navigator' of undefined
ionic.js is complaining that window object is null.
Do you know what I am missing for requiring correctly ionic ?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="styles/ionbio.css" media="screen" title="no title" charset="utf-8"> -->
<title>BIO by Ionic</title>
</head>
<body ng-controller="baseCtrl">
<ion-side-menus>
<h1 class="title">{{ionbio.title}}</h1>
</ion-side-menus>
<script src="js/main.js"></script>
</body>
</html>
js/main.js
'use strict';
require('ionic');
The error is due to window object which is null. And this is because of babel who is adding at some points a "use strict".
"this" is then equal to undefined.
So I disabled babel transformation as a workaround.
I'm working on AngularJS single page app which is designed to hit API endpoint writing in laravel 5. The API developed by other team. The project run smooth until the design change (by client request). They want to put the Angular app in the same domain with Laravel. I've found many articles to help me integrate angular with laravel. The most visible solution I found is user Alias comment in laracast.
I developed the angular app with Yeoman gulp-angular generator (it does scaffolding, minify, and serve the app on browser. so I can focus on writing app instead of importing dependencies files and refreshing browser ).
Now the app already 80% complete, i have to integrate my dev folder with laravel. In other word i have to develop the rest of the app inside laravel realm. I don't want to get rid the yeoman gulp-angular generator from my workflow because it's really helpful. But in the other hand i need to make laravel serve my app when i hit a url (for example : laravelapp/my/app).
So i did the following things (based on user alias comment on laracast):
I put my dev folder inside laravel public/myapp folder
I create a laravel route to return a my app view.
I create a laravel view that should serve my app.
But how can I call my app from the laravel view? The app already have its own index.html file (provided by yeoman gulp-angular generator) and it's already contain its own angular ui-view element, and some cryptic code to inject my app dependencies out of the box. any advice guys? Thank you.
My directory structure:
LaravelAPI
|
---- Resources
| |----------views
| |--------MyApp.php // laravel view for myapp
|
|----Public
|----------index.php
|----------pos // this is my app
|------bower_components, gulp, etc // generated by yeoman
|------ ....
|------src // my src
|----- index.html // this file is what i want to be called from laravel view
|------ dist // minified/production version of my app
My Laravel view (MyApp.php)
The following is the laravel view i created by copy and paste index.html from myapp. The index html i pasted here is the after compiled version of yeoman gulp-angular generator. My application name is pos, so i prefixed all dependencies with it.
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>fortunixPos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="pos/bower_components/angular-material/angular-material.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="pos/src/app/index.css">
<!-- endinject -->
<!-- endbuild -->
</head>
<body><script type='text/javascript' id="__bs_script__">//<![CDATA[
// document.write("<script async src='/browser-sync/browser-sync-client.1.7.3.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ui-view></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
// (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
// function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
// e=o.createElement(i);r=o.getElementsByTagName(i)[0];
// e.src='//www.google-analytics.com/analytics.js';
// r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
// ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<script src="pos/bower_components/jquery/dist/jquery.js"></script>
<script src="pos/bower_components/angular/angular.js"></script>
<script src="pos/bower_components/angular-animate/angular-animate.js"></script>
<script src="pos/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="pos/bower_components/angular-touch/angular-touch.js"></script>
<script src="pos/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="pos/bower_components/lodash/dist/lodash.compat.js"></script>
<script src="pos/bower_components/restangular/dist/restangular.js"></script>
<script src="pos/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="pos/bower_components/angular-aria/angular-aria.js"></script>
<script src="pos/bower_components/hammerjs/hammer.js"></script>
<script src="pos/bower_components/angular-material/angular-material.js"></script>
<script src="pos/bower_components/angular-utils-pagination/dirPagination.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<script src="pos/src/app/index.js"></script>
<script src="pos/src/components/navbar/navbar.controller.js"></script>
<script src="pos/src/app/pos/terminalSession.js"></script>
<script src="pos/src/app/pos/shoppingCart.js"></script>
<script src="pos/src/app/pos/pos.controller.js"></script>
<script src="pos/src/app/pos/payment.js"></script>
<script src="pos/src/app/pos/itemlist.js"></script>
<script src="pos/src/app/pos/initCash.controller.js"></script>
<script src="pos/src/app/main/main.controller.js"></script>
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
And this is the actual HTML from yeoman gulp-angular generator which is do nothing when i put it in laravel view:
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>fortunixPos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp wiredep` to automaticaly populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automaticaly insert here -->
<!-- endinject -->
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ui-view></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
// (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
// function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
// e=o.createElement(i);r=o.getElementsByTagName(i)[0];
// e.src='//www.google-analytics.com/analytics.js';
// r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
// ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp wiredep` to automaticaly populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automaticaly insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
This might be late a little bit. Put all of your resources (*.html) generated by yeoman in laravel partial views. Create the angular routes like following then put your partial in custom template. It worked for me.
myPartial.blade.php
<h1>Home</h1>
<h3>{{message}}</h3>
your angular route file:
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'HomeController'
})
});
your app.blade.php :
<body>
<script type="text/ng-template" id="pages/home.html">
#include('myPartial')
</script>
Home
</body>
I have one AngularJS project using yeoman, grunt and bower. It is working fine. I am using one of WrapBootstrap themes with the application. So I don't need the default JQuery and Bootstrap from AngularJS.
In my index.html page, I have the following to include CSS styles.
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<link href="styles/pagestyle.css" media="all" rel="stylesheet"
type="text/css" />
<!-- / bootstrap [required] -->
<link href="assets/stylesheets/bootstrap/bootstrap.css" media="all"
rel="stylesheet" type="text/css" />
<!-- / theme file [required] -->
<link href="assets/stylesheets/jquery/jquery_ui.css" media="all"
rel="stylesheet" type="text/css" />
<link href="assets/stylesheets/light-theme.css" media="all"
id="color-settings-body-color" rel="stylesheet" type="text/css" />
<!-- / coloring file [optional] (if you are going to use custom contrast color) -->
<link href="assets/stylesheets/theme-colors.css" media="all"
rel="stylesheet" type="text/css" />
I am not including any CSS from bower_components directory.
But when I do grunt serve:dist, it is adding bootstrap.css from bower_components/dist directory to the buld:css part. I don't want to add that. So I removed JQuery and bootstrap dependency from bower.json file. This is my bower.json file now
{
"name": "app-web-client",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.15",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"angular-resource": "1.2.15",
"angular-cookies": "1.2.15",
"angular-sanitize": "1.2.15",
"angular-bootstrap": "0.11.0",
"angular-route": "1.2.15"
},
"devDependencies": {
"angular-mocks": "1.2.15",
"angular-scenario": "1.2.15"
}
}
Then I tried doing grunt serve:dist. and I removed build:css block and was working fine.
But when I tried adding all those assets css styles inside build:css block, and doing a grunt dist, all the styles are gone and the block becomes empty. It will be only this much,
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
And when opening in browser no styles are applied because its empty.
How to avoid this? I tried adding some other css inside that block. But it is replacing with empty block, and giving me this error. How to remove vendor.css from index.html. I tried
The build:css block is actually a directive for Grunt to follow. Remove these four lines from your index.html:
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
And re-run grunt. You should no longer have a reference to vendor.css in your index.html.
Trying out Yeoman (1.0.4). Generated an Angular app with yo angular; entered No to installing Bootstrap with Sass, as I wanted Bootstrap v 3 with LESS.
After scaffolding, to get Bootstrap 3, I entered:
bower install bootstrap
That installed bootstrap into bower_components/bootstrap folder. But it did not link/include Bootstrap's CSS or JS in index.html file. Why?
The index.html file does have Angular js files from bower_components folder:
<!-- 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>
<!-- endbuild -->
But not bootstrap files. Why? Do I have to add/link to them manually? What am I doing wrong? How can I add Bootstrap after generating a scaffold for my app?
According to yeoman's Getting Started guide:
# Install it and save it to bower.json
>bower install jquery-pjax --save
# If you're not using RequireJS...
>grunt bower-install
This is supposed to inject your dependencies into your index.html file.
Note:
There is some setting up that needs to be done, before being able to use bower-install.
See, here for more details.
You must edit the index.html. Yeoman generator builds the base index.html. Bower only downloads dependencies as packages... but that's all, it doesn't know anything else about your app and how are you going to use the packages it downloaded. You must add the desired files by yourself.
With https://github.com/stephenplusplus/grunt-bower-install, if you have the following in your index.html
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<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-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
Then bower install will add the vendor files to your html whenever it runs. Otherwise, yes.
Using yeoman, you install dependencies with the --save flag to update the bower.json file.
After that, you run $ bower update(optional) and do a $ grunt wiredepto inject the dependencies into your index.html.
If you look at the comments in your index.html generated by Yeoman, you will see something like:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<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-animate/angular-animate.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-block-ui/dist/angular-block-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->
It is within those comments that the dependencies will be injected
Wiredep does it without depending on Grunt or any other build tool: https://github.com/taptapship/wiredep
npm install --save wiredep
Insert placeholders in your code where your dependencies will be injected:
<html>
<head>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
Let wiredep work its magic:
$ node
> require('wiredep')({ src: 'index.html' });
Since Bootstrap version 3.3.5, the bootstrap.css file has been removed from Bootstrap's package manager json. Thus, I had to roll back to version 3.3.4 before running wiredep.
bower install --save bootstrap#3.3.4