I'm fairly new to Grunt, Bower and Yoeman so please forgive me if I'm not asking the right question. I've added the angular-google-maps module to my build and set it up manually and everything looks fine. However whenever I restart my project in Webstorm or build using grunt, my google maps api reference keeps getting lost. I've added the google and lodash dependencies to the package.json file and those references are being added just fine. However, how do I add a dependency to an api or should I just be putting the reference before the bower/components block? I've been searching the web for the last day or so and nothing seems to address this that I've found.
Here's an example of the api I need to add -
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
Thanks for the help in advance!
Please make sure to put your reference outside of the <!-- bower:js --><!-- endbower --> block in your HTML. This section is overwritten by grunt-wiredep when you build your application
Related
I'm struggling with cordova plugins in my ionic app. Been googling whole day, no big win yet.
here's what I'm trying to do - open a web page inside my app with navbar present. I found that cordova-themeable might work that out
...however...
I installed it
$ cordova plugin add cordova-plugin-themeablebrowser
ok, it's present
$ cordova plugin list
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-console 1.0.3 "Console"
cordova-plugin-device 1.1.2 "Device"
cordova-plugin-splashscreen 3.2.2 "Splashscreen"
cordova-plugin-statusbar 2.1.3 "StatusBar"
cordova-plugin-themeablebrowser 0.2.15 "ThemeableBrowser"
cordova-plugin-whitelist 1.2.2 "Whitelist"
ionic-plugin-keyboard 2.2.0 "Keyboard"
now, I'm trying to use it in controller function
$scope.doStuff = function doStuff() {
cordova.ThemeableBrowser.open('http://apache.org', '_blank', {
...
and call it in my .html file
<ion-item ng-click="doStuff()">
I get the following error
ReferenceError: cordova is not defined at Scope.doStuff
in my index.html, I've got
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
please help, thanks
Can you verify the plugin is in your config.xml?
It should look something like this:
<plugin name="com.phonegap.plugins.example">
<param name="APIKey" value="12345678" />
<param name="APISecret" value="12345678" />
</plugin>
would have added this as a comment, but not enough rep and only posting as i cant see any mention of any of this.
make sure it is injected properly into your app, given the error or cordova not defined i'm assuming this might be an issue. i couldnt find any specifc references to it, but considering it is built on top of the inappbrowser, i would assume the DI would be $cordovaInAppBrowserProvider.
while reading the docs, from their gitgub FAQ "I just installed this plugin, how come it just shows a blank toolbar?
The purpose of this plugin is to allow you to style the in app browser the way you want. Isn't that why you installed this plugin in the first place? Hence, it does not come with any defaults. Every UI element needs to be styled by you, otherwise it's hidden. This also avoids polluting your resouce bundle with default images."
To add a plugin you are doing right, i.e. if you want to use cordova adomb plugin:
cordova plugin add cordova-admob
Regarding to the error: Are you debugging in browser or in real device? Normally in browser, you should use
cordova platform add browser
phonegap serve
(I recommend you to use phonegap serve insetad of cordova serve as sometimes it works better, but shouldn't make the difference)
Another way to debug apps is to use android remote debug.
I am trying to implement a 'remember me' option on my login page and have ventured down the path of using ngCookies to store a local cookie to handle this. However, in trying to follow the instructions from angular documentation I am unable to get the module working in my Web Application.
I am using AngularJS version 1.4.8 and have made sure my angular-cookies.min.js is running the exact same version. I have made sure to add my <link> tags in the correct order:
<script src="../vendor/jquery/dist/jquery.min.js"></script>
<script src="../vendor/angularjs/angular.min.js"></script>
<script src="../vendor/angularjs/angular-cookies.min.js"></script>
However, when I try to load the module into my application:
var EdgeApp = angular.module('EdgeApp', [
'ngCookies',
'ngAnimate',
....
])
I get an $injector:modulerr error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=EdgeApp&p1=Error%3A…2Fdrake-monitor%2FRestApi%2Fvendor%2Fangularjs%2Fangular.min.js%3A19%3A463)
All other modules and dependencies load correctly and work fine.
Based on the advice from #WonderGrub, I stripped my project back to the bear basics and worked from the ground up.
To start with, I installed all of my external modules correctly using Bower (something I wasn't doing before), then I added one module at a time to see if I had any conflicts.
I also reverted back to using .js files instead of .min.js files for my development to help me identify errors more accurately.
I'm unsure what the actual cause of my issue was, but going through the procedures above and the advice from my initial post has worked for me without errors.
I'm working on an Angular app using:
`<html ng-app="navops"></html>`
and we hired a designer how gave me a minified JS script and he is using:
angular.bootstrap(element,modules,config);
so this create an error:
App Already Bootstrapped with this Element '<body>'
how can I integrate the two codes??
You are bootstrapping twice, remove the ng-app from the body tag and it will work. If your code then no longer works make sure you add it as a dependency into the bootstrap() command. Presumably you would just add "myLibs" or something into the modules array
I was mess around this for a couple of days. I was trying to get browserfiy to work well with angular based app. I have tried following options but still cannot decide on a better way to do it, it will be appreciated if anyone can give any suggestion on this.
Option 1
Bundle all angular related libs, like angular, angular-animate, angular-ui-router, etc into vendor.js by using bundle.require
Bundle all app reated source files into app.js by using bundle.external
That works fine in dev environment, all modules in vendor.js could be required from app.js
But it crashed in prod environment. The minified angular files are not all CMD. Although I can browserify-shim angular.min.js and bundle.require angular-ui-router.min.js, it's kind of cubersome to do this file by file.
Option 2
Leave all angular libs into <script> and only output bundle for app files. That means in app.js, I have to refer to angular as a global var which is not good.
So what's the best practise to do this?
Even if you do require() angularjs, it still exposes the angular namespace in the context of its environment (Window object for browsers). What I usually do is simply put all angularjs modules dependencies (e.g. ui.router, ngResource and etc) below the bundled(browserified) javascript where your angularjs application resides. In my case, I use gulp-useref to concatenate all the script provided by the gulp-inject tags(this includes scripts bundled by browserify).
As you may have noticed below, the bower components(bower:js tag) are added below the bundle(inject:js tag). Since requiring the angular module will attach the angular object in the window object, then any components external to browserify can access window.angular.
The answer I provided is somehow similar to option 2 but without the disadvantage of referring angular as a global variable within your browserified code.
e.g.
<!-- build:js({./.tmp,./}) js/index.js -->
<!-- inject:js -->
<!-- endinject -->
<!-- bower:js -->
<!-- endinject -->
<!-- endbuild -->
UPDATE:
I've create a github repo that resembles the answer provided above. Try to clone it, and see what you can do with it.
I am using yeoman to build an angular js application. For this I am using google map api like this<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=weather" type="text/javascript"></script>
But after build the project using "grunt build" the file is not included in the html in the dist folder.
Can anyone suggest me how to include this file?
Thanks in advance.
Nabaraj
You have to put your Google Map <script> tag outside of the commentaries which looks like
<!-- build:js(.) scripts/vendor.js -->
The fact is that all the scripts contained inside are concatenated and minified after a build, breaking the Google Maps API since it's a CDN.