I'm unable to get my project to run. It's fine until I...
Update my controller to include the "$ionicPlatform, $cordovaToast, $cordovaLocalNotification"
.controller('MenuController', ['$scope', 'menuFactory', 'dishes', 'favoriteFactory', 'baseURL', '$ionicListDelegate', '$ionicPlatform', '$cordovaToast', '$cordovaLocalNotification',
function ($scope, menuFactory, dishes, favoriteFactory, baseURL, $ionicListDelegate, $ionicPlatform, $cordovaToast, $cordovaLocalNotification) {
I attempt to run my project and get
Error: [$injector:unpr] Unknown provider: $cordovaLocalNotificationProvider <- $cordovaLocalNotification <- MenuController
Then Angular doc and other posts I've seen suggest that that $cordovaLocalNotification has been omitted or misspelled in the dependency injection for this controller, but I'm sure they're the same.
make sure that you have included all the required JS files that is required to work $cordovaLocalNotification.
<!-- ngCordova -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
var ctrls = angular.module('notiApp.controllers', ['ionic', 'ngCordova', 'ngCordova.plugins']);
Bingo! Thanks for that. It was causing me grief...fyi. I had that script reference, but the order was wrong.
It WAS
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>//THIS is the line
I change to the following and it resolved the issue.
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>//THIS is the line
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
Related
I'm triyng to implement MDL in a simple Angular app.
The issue is that even if I put the MDL javascript file before the angular javascript files MDL components that rely on MDL doesn't work.
This is my scripts order:
<script src="js/material.min.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script src="js/functions.js"></script>
How can I make other javascript libraries work with angular?
I found this and worked for me
angular.module(...)
.run(function($rootScope, $location, $timeout) {
$rootScope.$on('$viewContentLoaded', function() {
$timeout(function() {
componentHandler.upgradeAllRegistered();
});
});
})
I'm new to Angular.js and can't seem to get ui-router to load. I've gone through a couple google searches now and haven't been able to resolve this error. Right now, I have pared down my code just to ensure that ui-router is working, but I continually get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
index.ejs:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="public/javascripts/test.js"></script>
</head>
<body ng-app="routerApp">
<!-- MAIN CONTENT -->
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view></div>
</div>
</body>
</html>
test.js:
var routerApp = angular.module("routerApp", ["ui.router"]);
routerApp.config(
["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("views/ui-views/home.html");
$stateProvider
.state("home", {
url: "/home",
templateUrl: "views/ui-views/home.html",
controller: "tmp1Controller"
});
}]);
routerApp.controller("mainCtrl", ["$scope",
function($scope) {
}
]);
Any recommendations as to how to resolve the issue?
The app is not available in the view. It should be routerApp
var app = angular.module("routerApp", ["ui.router"]);
Found the error: express did not like my path to my javascript file. Changing
<script src="public/javascripts/test.js"></script>
to
<script src="../../javascripts/test.js"></script>
seemed to do the trick.
I am getting a module not available error when trying to load 'datatables' as part of my AngularJS app.
angular.module('pricingOptionsTable', ['resources.pricingOptions', 'datatables'])
.controller('pricingDataController', ['$scope', 'poResource', 'DTOptionsBuilder', PricingDataController])
.directive('pricingDataTable', ['$http', '$templateCache', '$compile', PricingDataTable]);
`
The module's controller is defined as:
function PricingDataController($scope, poResource, DTOptionsBuilder) {
In the index.html I have:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/datatables/media/js/jquery.dataTables.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.js"></script>
I am using AngularJS 1.3.9, jQuery 2.1.3, Angular Datatables 0.4.0 and Datatables 1.10.4.
Has anyone run in to this issue with angular-datatables 0.4.0?
Just taking a quick peek at the module's definition on Github, it appears that the datatables module takes a dependency on the datatables.directives and datatables.factory defined (also in the git repository). The datatables.directives in turn has other dependencies (e.g. datatables.renderer, datatables.options, etc.
I believe your best bet in getting the main datatables module up and running is to first load the 'leaf' scripts of datatables (i.e. the scripts that have no dependencies), followed by the datatables.renderer (which only has dependencies on the 'leaf' scripts), followed by the datatables.directives script, then finally load the datatables script.
So it would look something like this:
`<script src='/some-path/datatables.util.js></script>
<script src='/some-path/datatables.factory.js></script>
<script src='/some-path/datatables.options.js></script>
<script src='/some-path/datatables.renderer.js></script>
<script src='/some-path/datatables.directive.js></script>
<script src='/some-path/datatables.js></script>`
I'm getting some variation of the following, for every single Angular module (animate, resource, route, touch etc):
Module 'ngResource' is not available! You either misspelled the module
name or forgot to load it. If registering a module ensure that you
specify the dependencies as the second argument.
I'm relatively new to Angular. I read the docs on the error but I'm not sure how to apply them. Thoughts?
Here is the code where I declare the modules:
angular
.module('juddfeudApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.when('/admin', {
templateUrl: 'views/admin.html',
controller: 'AdminCtrl'
})
.otherwise({
redirectTo: '/'
});
});
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body ng-app="juddfeudApp">
<!-- all angular resources are concatenated by Gulp in lib.js-->
<script src="build/lib/lib.js" type="text/javascript"></script>
<script src="build/main.js" type="text/javascript"></script>
</body>
</html>
You need to reference them in your html file.
So add <script src="filename.js"></script> for each module/file you want to load.
did you add this <script src="angular-resource.js"> ?
When you get an error like this, it's likely that you aren't successfully loading the Angular module scripts in your HTML file.
Some answers here suggest making sure you've referenced the scripts somewhere in your HTML file.
That is, if you're trying to add multiple Angular modules, you should have several scripts being loaded before your own JS, like this:
<script src="../bower_components/angular/angular.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="myMainJsFile.js"></script>
That may fix the problem.
You might also consider checking to make sure your scripts actually exist in the place you are referencing them -- for me, bower had not properly installed them all on the first time around, so they weren't being picked up by gulp-concat -- or ensuring that your task-runner of choice (Gulp/Grunt) is configured properly.
Please help me. This error log in console in my angular app.
My App section:
angular.module('fbApp', [
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router',
'ui.utils',
'chieffancypants.loadingBar',
'ui.date',
'angular-underscore',
'highcharts-ng'
])
My index.html from bower:
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.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>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-underscore/angular-underscore.js"></script>
<!-- endbower -->
Where is my problem?
highcharts-ng depends on hightcharts so you need to install them both.
bower install --save highcharts
bower install --save highcharts-ng
I've come across exactly same problem. I think the answer is in the documentation. Check the git hub documentation Git hub documentation
I found the solution to this. Insert the below script tag in the index above the script tag highcharts-ng.js
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/src/highcharts-ng.js"></script>
This should remove the error.
Download highcharts.js and link it in your app. You only have the angular directive highcharts-ng .
Another way to do this via bower.json; Update the following dependencies.
"highcharts" : "*",
"highcharts-ng" : "*"
Run the bower update from the command line project directory.
Use the "highcharts-ng module
var myApp = angular.module('myApp',
[
"highcharts-ng",
"ngRoute",
"myApp.view1",
"myApp.view2",
"myApp.version"
]);
Include the following in the index.html or view
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="bower_components/highcharts-ng/dist/highcharts-ng.js"></script>
It looks like highcharts.js is dependent on jQuery. Verify that jQuery is loading correctly and it's the correct version.