Use ons.enableAutoStatusBarFill in in onsen ui with angularjs - javascript

i am completely new to Angularjs trying to understand how can i use ons.enableAutoStatusBarFill(); this so i my menus wont over take the status bar.
here is how i have my controller setup.
var mod = ons.bootstrap('app', ['onsen']);
mod.controller('MyControler', function($scope) {
ons.ready(function() {
// code inside...
});
});
Any suggestions will be helpful. I am using this reference http://onsen.io/guide/overview.html#UtilityAPIs
I tried to solve it this way
var module = ons.bootstrap('my-app', ['onsen', 'ngSanitize']);
var module = ons.enableAutoStatusBarFill();
It seems like working but its not finding my controllers now. Getting this error
Uncaught TypeError: Cannot read property 'controller' of undefined

I got it solved. Actually the cordoda file was at the bottom of my page. Due to which the page was not able to load properly.
Now i added in this pattern in my index.html and got it resolved.
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="lib/onsen/js/angular/angular-sanitize.min.js"></script>
<script src="cordova.js"></script> //This should be added first before the main custom.js file which starts my module.
<script src="js/custom.js"></script>
Thank you for all your support!

Related

Which files are need from Kendo core to use Mobile and Angular?

I have seen similar questions to this, but I haven't been able to find an answer. Anyway, I am experimenting using Kendo (open source core for now) in a Visual Studio Cordova project. Taking Cordova out of the equation to start with, I am just trying to get a very simple view with the following to work..
...
<script src="lib/kendo-ui-core/js/jquery.min.js"></script>
<script src="lib/angularjs/angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.core.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.loader.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.view.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.pane.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.application.js"</script>
</head>
<body kendo-mobile-application ng-app="foo">
<kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div>{{hello}}</div>
</kendo-mobile-view>
<script>
angular.module("foo", [ "kendo.directives" ])
.controller("MyCtrl", function($scope) {
$scope.hello = "Hello World!";
});
</script>
<script src="scripts/index.js"></script>
</body>
</html>
I added each Kendo file to try and get rid of each error (initially just started with kendo.core.js)
At this stage, when I try to run this (just opening index.html in Chrome, out side of Visual Studio), I get
Uncaught TypeError: kendo.ViewContainer is not a function
Observable.extend.init # kendo.mobile.view.js:469
Widget.extend.init # kendo.mobile.pane.js:102
startHistory # kendo.mobile.application.js:171
So this is occuring at the line
that.viewContainer = new kendo.ViewContainer(that.container);
in the file kendo.mobile.view.js.
I don't seem to be able to find where ViewContainer is declared.
If I use a CDN of like <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"> then this works fine, so I need to know which references to use from the core library.
I found the doco that explains what I need here.
I added everything for the "Application" section (in the exact order listed), and then put
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
at the end.

How to add more than one dependency module in AngularJS

Hi I am new to angularjs, I want to add more than one dependency module in the app.
Here is my code:
var NBModule = angular.module('NBModule', ['ui.router','ngDraggable']);
I even tried
var NBModule = angular.module('NBModule', ['ui.router'],['ngDraggable']);
and finally
var NBModule = angular.module('NBModule', ['ui.router']);
angular.injector(NBModule, ['ngDraggable']);
i am getting this error:
[$injector:modulerr]
http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=undefined&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js%3A38%3A146)
The first option you tried is the correct one:
var NBModule = angular.module('NBModule', ['ui.router','ngDraggable']);
I'm guessing the problem is that you didn't add the script tag in the html.
you need to add:
<script src="path/to/uiRouter.js"></script>
<script src="path/to/draggable.js"></script>
You must add the script tags of these dependencies in your HTML like this:
<script src="angular.js"></script>
<script src="ui.router.js"></script>
<script src="ng-draggable.js"></script>
If that don't work, then ui-router might be depending on ng-draggable might be

Getting [$injector:modulerr] on a very simple page; can't figure out why

I'm very much a noob to Angular. And I'm getting an error that I just can't figure out (even after much Googling and fiddling around).
Here's my code (and here it is on CodePen):
<!DOCTYPE html>
<html ng-app="ergo">
<title>Ergo</title>
</html>
<body ng-controller="ErgoController as ergo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script>
( function() {
var app = angular.module( "ergo", [] );
app.controller( "ErgoController", function() {
// TODO
} );
} );
</script>
</body>
</html>
The code above produces this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=ergo&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js%3A17%3A339)
(Here's a link to the full URL from that error message.)
A few places on the web say that this can happen if the ngRoute module fails to load - it was formerly part of the Angular core, but was split out into its own module in 1.2.
Now, I'm not using ngRoute anywhere in this very simple page, so I don't understand how that could be the problem - but hey, I'll give it a shot. Here's my revised page (and the corresponding CodePen) - I've added another tag to load the ngRoute module, and also added 'ngRoute' as a dependency when instantiating my module:
<!DOCTYPE html>
<html ng-app="ergo">
<title>Ergo</title>
</html>
<body ng-controller="ErgoController as ergo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script>
( function() {
var app = angular.module( "ergo", ['ngRoute'] );
app.controller( "ErgoController", function() {
// TODO
} );
} );
</script>
</body>
</html>
I still get the same error.
Help? I was doing pretty much the exact same thing the other day, and it was working fine. (Unfortunately, I don't have that code handy to examine.)
Secondary question: if you look at the errors in Chrome's JavaScript console after loading either of these pages, you'll see that the stack trace is full of references to this JavaScript file:
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js
Which is bizarre, because the URL I'm actually loading in my <script> tag is this:
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js
(one URL contains .min; the other does not)
I looked at the network console to see whether angular.min.js was loading angular.js dynamically (for some bizarre reason), or maybe the .min URL was simply redirecting to the unminified version. Neither seems to be the case. So, why is the console showing references to a JavaScript file that, as far as I can tell, isn't even being loaded on this page?
It looks like you aren't invoking your function that sets up your angular app.
Try invoking that function and you should be good to go:
<script>
(function() {
var app = angular.module( "ergo", ['ngRoute'] );
app.controller( "ErgoController", function() {
// TODO
} );
})();
</script>

AngularJS app not loading when using angulartics for Piwik

I'm trying to use this: http://luisfarzati.github.io/angulartics and running into some issues. I am not able to debug it and I am not finding any info about it anywhere.
In app.js, I am adding the Angularitics dependencies (to my existing ones):
var app = angular.module('shiftSwap', [
'ui.router'
, 'infinite-scroll'
, 'angulartics'
, 'angulartics.piwik'
]);
In my index.html, I have:
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-ui-router.min.js"></script>
<script src="js/lib/ng-infinite-scroll.min.js"></script>
<script src="js/lib/angulartics-piwik.js"></script>
<script src="js/app.js"></script>
When I load the app, I get the following error.
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-
beta.8/$injector/modulerr?p0=shiftSwap&p1….angularjs.org%2F1.3.0-
beta.8%2F%24injector%2Fmodulerr%3Fp0%3Dangulartics%...<omitted>...7)
This error links to this page, which gives me no information. https://docs.angularjs.org/error/$injector/modulerr?p0=shiftSwap&p1=undefined.
Would anyone have any idea of what may be happening?
Thank you!!!
I see in Angulartics repository that there are the following files:
angulartics.min.js
angulartics-piwik.min.js
angulartics-ga.min.js
angulartics-....min.js
So maybe did you forget to include angulartics.min.js? It doesn't appear in the index.html you posted above.

Resources not responding in AngularJS

I'm calling several resources in my Angular App like so:
angular.module('myApp', ['infinite-scroll', 'chieffancypants.loadingBar', 'ngResource'])
And then in the html:
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/lib/ng-infinite-scroll.js"></script>
<script type="text/javascript" src="js/lib/loading-bar.js"></script>
But then, both the loading bar and the infinite scroll don't seem to respond.
Am I missing something?
Here's a working Plunker.
Your directives.js is redefining the myApp module when I think you mean to add to the existing module.
angular.module('myApp') // call without second parameter to retrieve the existing module

Categories