How to add more than one dependency module in AngularJS - javascript

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

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.

Use ons.enableAutoStatusBarFill in in onsen ui with angularjs

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!

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.

Gist-embed with Angular app

Trying to get gist-embed (https://github.com/blairvanderhoof/gist-embed) working within my Angular app but with no luck.
It works no problem on my homepage (which is not part of the Angular app) but when I use something like:
<code data-gist-id="<gist-id>"></code>
within the app it won't show. There are no messages in the console to explain why though.
Could someone explain why and offer a solution?
(function($) {
$(function() {
// find all elements containing "data-gist-id" attribute.
$('[data-gist-id]').each(function() {
var $elem = $(this),
id,
that lib is coded in such a way one cant really use it in angular,you'll have to look for a fork that offers a proper jquery plugin architecture you can use into a directive.That lib doesnt respect basic jQuery plugin architecture.
And no Error will show up because it's likely the .each will execute before your angular app runs.
As of June (version 1.8), the gist-embed project is now a jQuery plugin.
var $code = $('<code data-gist-id="474f6d7839fccffc4b2a"/>');
$code.appendTo('body').gist();
Basically you have to trigger "gist()" on the dom elements.
Try this, it worked for me very well.
// register trigger gist on every template include
$rootScope.$on('$includeContentLoaded', function() {
// initialize gist on new elements
angular.element(document).ready(function() {
if (typeof(angular.element(document).gist) === 'function') {
angular.element('[data-gist-id]').gist();
}
});
});
I put together a small library hoping to solve the problem.
Check it out : https://github.com/pasupulaphani/angular-gist-embed
Chekout this angular module : https://github.com/kiran3807/another-angular-gist-embed
This allows you to include the gists in your angular project in the form of a directive, one of the attributes for which is the gist-id :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="path/to/another-angular-gist-embed.js"></script>
<script>
angular.module('example',['another-angular-gist-embed']);
angular.module.controller('exampleCtrl',['$scope',function($scope){
$scope.gistId = 'a85770344febb8e30935';
}]);
</script>
</head>
</head>
<body ng-app="example">
<div ng-controller="exampleCtrl">
<!-- This loads a gist with a specific id-->
<gist-embed data-gist-id="gistId"></gist-embed>
</div>
</body>
</html>
Declaration : I am the author of this module

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