I'm working with the Yeoman webapp generator (https://github.com/yeoman/generator-webapp) and I've added the Bower package GMAPS (https://github.com/hpneo/gmaps).
After adding Gmaps to my project I add the Google Api link in the top of my project like this
<!-- build:css(.tmp) styles/main.css -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
Problem is, when I use the Grunt Servecommand that I see my Gmaps appearing on my website that runs on my localhost. If I Grunt and build my project it always gives me an error that in my main.js file it cannot find the variable Gmaps (that is used to trigger the Gmaps-plugin).
So my question: How do I add API's to a project that is build with Grunt?
You need to copy google api link outsite the generators tags in the index.html. For example:
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- build:js(.) scripts/vendor.js -->
</script>
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
</script>
<!-- endbower -->
Related
So, I am trying to use Bootstrap in a React app. The Bootstrap CSS works properly, but anything that requires Bootstrap JS files doesn't work (dropdowns, modals, etc.) This is my code. I even tried copying the starter template and using that instead. It doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<!-- FontAwesome JS -->
<script src="https://kit.fontawesome.com/8f8a8c35a9.js" crossorigin="anonymous"></script>
</body>
</html>
What am I doing wrong? Thanks for all your help! :)))
You are using different versions of Bootstrap for CSS and JS
5.0: https://getbootstrap.com/docs/5.0/getting-started/download/#cdn-via-jsdelivr
4.6: https://getbootstrap.com/docs/4.6/getting-started/download/#jsdelivr
I have installed angular-ui-router by doing npm install angular-ui-router --save-dev but i am getting errors
Index.html:
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
I have added the script tag in index.html and have also injected in app.js
app.js
angular
.module('news1App', ['ui.router'])
But still getting the error. Any help would be appreciated.
As I can see you must be having different version of angular API loaded and bounded together. Ideally you should refer the angular API library with same version.
I'd suggest you to have all angular API version same as 1.5.8. This could solve your problem.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
DEMO
I begin to use Bootstrap. And I add js/bootstrap.min.css
to my index.html and all works.
But, when I add bootstrap.min.js to index.html ,my, for example, dropdown menu doesn't work.
But, when I add http://code.jquery.com/jquery-latest.js - my dropdown menu works.
I want to work with menu without connecting to Internet.
Why?
you should download the script at your local system and put the script at in your project JS OR Script folder and call it from there.
like that:
<script type="text/javascript" src="/Scripts/jquery-latest.js"></script>
hopefully it works :)
Thanks
Bootstrap:
http://getbootstrap.com/getting-started/
JQuery:
http://www.w3schools.com/jquery/jquery_get_started.asp
Download and link the files correctly via relative paths.
Bootstrap uses jquery, since your need to use it without internet download the jquery file and put it inside JS folder and serve it to index.html
Here we go:
1) You are using jQuery library but not bootstrap
2) if you want to download bootstrap library to local, you will get from here : enter link description here
Instead of using cdn path in your index.html like this
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
try using relative path after downloading the required files as below:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!--Latest JQuery CDN Link -->
<script src="js/jquery.js"></script>
In your case jquery-latest.js must be downloaded from given link and included in index.html using relative path.
I am trying to port an existing angularjs app to ionic. The ionic project was created with;
$ ionic start myApp tabs
Then, I combined the links from my angularjs app and ionic app together.
<!--ionic links-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel=" stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<link rel="stylesheet" href="../../bower_components/angular-material/angular-material.min.css">
<link rel="stylesheet" href="../../bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" href="css/app.css"/>
<!--<div ng-include src="'partials/header.html'"></div>-->
</head>
<body>
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../../bower_components/angular-material/angular-material.min.js"></script>
<script src="../../bower_components/angular-route/angular-route.min.js"></script>
<script src="../../bower_components/angular-moment/angular-moment.min.js"></script>
<script src="../../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../../bower_components/angular-google-chart/ng-google-chart.js"></script>
<script src="../../bower_components/ng-table/dist/ng-table.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers-func.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
I launched Chrome browser and load the URL http://127.0.0.1/ionicapp/www/
The error encountered is
Uncaught Error: [$injector:unpr] Unknown provider:
$$forceReflowProvider <- $$forceReflow <- $$animateQueue <- $animate
<- $compile <- $$animateQueue
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
This error comes from ionic.bundle.js: 8900
I suspect the problem lies with some conflicts in the links. ionic.bundle.js may already contains some angularjs code. If yes, how should the links conflict be reconciled?
The hint can be found in this documentation
http://ionicframework.com/docs/guide/starting.html
Ionic comes with ngAnimate and ngSanitize bundled in, but to use other
Angular modules you’ll need to include them from the lib/js/angular
directory.
ionic.bundle.js already comes bundled with animate module. So, your html file creates conflict when you link in the angularjs animate module.
In your html file, comment away the following lines. This should be enough to solve your problem.
<!--<script src="../../bower_components/angular/angular.min.js"></script>-->
<!--<script src="../../bower_components/angular-animate/angular-animate.min.js"></script>-->
Please note that your other js modules need to be placed in lib/js. They can be placed in sub-folders in lib/js. Otherwise, it will work well when testing on desktop browser but fail to work on the smartphone.
Rails noob here.
I've been fumbling through the process of integrating a wrapbootstrap one page parallax theme (https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) into my rails 4 app.
After unzipping the files, the index.html page works (mostly), right out of the box.
The process I've gone through in the attempt to integrate it into a new rails app:
Transfer all CSS files to assets/stylesheets folder
Transfer all JS files to assets/javascripts folder
Referenced all JS and CSS files in application.js and application.css
Transfer all images to assets/images folder
Generate new pages controller/view, and moved the previously discussed html file into this view
Assigned root to above html file
The issue I'm running into is that the all of the JS and CSS don't appear to be executing. I have JS and CSS include tags in the header.
I've tried rake assets:precompile, but that wasn't successful.
Any tips on where I'm going wrong here?
Additionally, the index.html file includes a bunch of CSS setup in the head, ie:
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- web font -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800" rel="stylesheet" type="text/css">
<!-- plugin css -->
<link rel="stylesheet" type="text/css" href="js-plugin/animation-framework/animate.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/magnific-popup/magnific-popup.css" />
<link type="text/css" rel="stylesheet" href="js-plugin/isotope/css/style.css">
<link rel="stylesheet" type="text/css" href="js-plugin/flexslider/flexslider.css" />
<link rel="stylesheet" type="text/css" href="js-plugin/pageSlide/jquery.pageslide.css" />
<!-- Owl carousel-->
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="js-plugin/owl.carousel/owl-carousel/owl.theme.css">
and a bunch of javascrip tags at the bottom of the body, ie:
<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<!-- third party plugins -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js-plugin/easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js-plugin/flexslider/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js-plugin/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.form.js"></script>
<script type="text/javascript" src="js-plugin/neko-contact-ajax-plugin/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js-plugin/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="js-plugin/parallax/js/jquery.localscroll-1.2.7-min.js"></script>
Am I correct in understanding that with the asset pipeline, these callouts aren't required in the view? Shouldn't all the CSS and JS be precompiled in application.css and application.js?
The issue was that I had brought over all CSS and JSS files that were included with the template, but the folder also contained CSS and JS that was not required, and some of these files caused conflicts when being loaded in the asset pipeline. Once I pruned out all files that weren't required, all worked as expected.
As a summary:
Move all required CSS files to assets/stylesheets
Move all required JS files to assets/javascripts
Explicitly include/require each of the CSS/JS files in their respective application.css and application.js files.