In my angular app I installed angular-cookies => npm install angular-cookies.
I add the following to my angular module:
var app = angular.module('app', ['ngCookies','ngResource', 'ngRoute'])
.config(function($routeProvider, $locationProvider, $httpProvider, $cookies) {
I get the following error when I try to launch:
Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.11/$injector/modulerr?p0=...)
at https://localhost:3000/javascripts/angular.min.js:6:417 ......
I am not sure why my injection is failing
I solved the same problem this morning,
Try to get the same api version of angular and angular-cookies, your angular version is 1.3.11 and your angular-cookies is 1.4.4.
This link is the latest stable version of all components (1.5.8)
A part of my app.js :
var app = angular.module('app', ['ngCookies']);
app.controller('loginFormController', ['$scope', '$log', '$http','$cookies', function($scope, $log, $http, $cookies) {
//Your code here
}]);
A part of my index.html :
<!DOCTYPE html>
<html lang="fr" ng-app="app">
<head>
<meta charset="utf-8" />
<title>App| Login</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/login.css">
<script src="../assets/angular.min.js"></script>
<script src="../assets/angular-cookies.js"></script>
<script src="../assets/jquery-3.1.1.min.js"></script>
<script src="../controller/app.js"></script>
</head>
<body ng-controller="loginFormController as login">
</body>
</html>
I hope it will help you
Related
Below is my Angularjs routing code, but unfortunately i am getting error when i am running code.
<!DOCTYPE html>
<html ng-app="routeApp">
<head>
<title>Routing - RouteParams</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<div ng-view></div>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</body>
<script type="text/javascript">
var app = angular.module('routeApp',['ngRoute','ngSanitize']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login',
{
templateUrl:'loginformroute.html',
controller:'LoginController'
})
.otherwise({ redirectTo: '/login' });
// $locationProvider.html5Mode(true);
}]);
app.controller("LoginController", function($scope) {
$scope.login = function () {
alert(1);
};
});
</script>
</html>
and i am getting below error
$sce is included by default in angular 1.2+so you don't need sanitize anymore in order to get $sce. So use angular 1.2 or further version and remove sanitize script. Hope it will solve your problem
Move your scripts in header tag
<head>
<script src="https://code.jquery.com/jquery-1.12.1.js"></script>
<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="./vendor/angular/angular-sanitize.js"></script>
<script src="https://code.angularjs.org/1.2.10/angular-route.js"></script>
</head>
Also consider the angular.route and angular version should be the same. So use this version ( you can get it from code.angularjs.org) instead of your version
This is my Html. I have given paths like this
<html>
<head>
<script src="../../Content/Scripts/Script/angular.min.js"></script>
<script src="../../Content/Scripts/Script/Chart.js"></script>
<script src="../../Content/Scripts/Script/angular-charts.min.js"></script>
<script src="../../Content/Scripts/Script/ui-bootstrap-tpls.js"> </script>
<script src="../../Content/Scripts/Controllers/graphController.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="financeAnalyticsController" class="support-section">
{{a}}
</div>
</body>
</html>
In my script I wrote
var app = angular.module("app", [ "chart.js","ui.bootstrap", "ui.bootstrap.typeahead",]);
app.controller('financeAnalyticsController', function ($scope, $http, $filter) {
$scope.a="testing";
});
When I am using in my application it is giving error
Uncaught Error: [$injector:modulerr]
How to solve this error?
I guess you are using a different version of angular-chart.js. Try using angularCharts instead of chart.js as the dependency module name, like so ...
var app = angular.module("app", ["angularCharts", "ui.bootstrap", "ui.bootstrap.typeahead"]);
app.controller('financeAnalyticsController', function($scope, $http, $filter) {
$scope.a="testing";
});
or, use this version of angular-chart.js
see a working example
I've got a very simple angular app that I can not figure out what is wrong with. The code is on plunkr here: http://plnkr.co/edit/QQkP2HB6VGv50KDdBPag?p=preview and generates the error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: testService
The code is below
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>simple problem I can not figure out</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script type="text/javascript">
(function() {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.service('testService', function (testService) {
});
myAppModule.config(['testService',
function (testService) {
}]);
})();
</script>
</head>
<body >
<div ng-app="myApp">
<div>
myApp Here
</div>
</div>
</body>
</html>
There are multi phase in angular bootstraps process. in config phase you can just inject provider. for example you can use this code:
myAppModule.config(['testServiceProvider',
function (testServiceProvider) {
}]);
To get more information please check this link:
https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection#configuring-providers
I am using the Ionic framework to build an hybrid app with AngularJS and Cordova. Completely new to both AngularJS and JavaScript, this has not been a sweet ride.
Everything was working fine until I decided to re-organize the structure of my app with 1 file per controller/service. So I'm pretty sure that the problem is coming from there, I just can't find how to fix it.
Here's the code:
js/app.js
angular.module('app', ['ionic', 'app.controllers'])
.run(function($ionicPlatform) {
...
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
...
js/controllers/LoginCtrl.js
angular.module('app.controllers', [])
.controller('LoginCtrl', ['$scope', '$http', '$state'], function($scope, $http, $state) {});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
</body>
</html>
Tried many variations of the code above, to no avail.
Any help greatly appreciated...
Edit
I might have made some progress in finding out what the problem is (or just yet another symptom).
In my index.html file, if I switch the order of declaration of the controllers, the one declared right after app.js always gets ignored. This is the error I get when I put them in the order below
Controller 'ionNavBar', required by directive 'ionNavButtons', can't be found!
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/RegisterCtrl.js"></script>
<script src="js/controllers/LoginCtrl.js"></script>
the function of your controller has to be inside the dependencies array.
.controller('LoginCtrl', ['$scope', '$http', '$state', function($scope, $http, $state) {}]);
And i think you also have to inject $ionicPlatform in your run() and config function, like this
.run(["$ionicPlatform", function($ionicPlatform) {
...
}])
.config(["dep1", function(dep1) {}]);
I'm rebuilding this tutorial using the ionic framework, but I'm getting stuck early on with the firebase auth. When I built this tutorial app in just straight angular before, it worked, but now fitting it into ionic, I'm getting the following error:
Uncaught Error: [$injector:unpr] Unknown provider: angularFireAuthProvider <- angularFireAuth
The basic code layout is below:
app.js
'use strict';
var app = angular.module('wefeed',
[ 'ionic'
, 'wefeed.config'
, 'firebase']);
config.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('wefeed.config', [])
app.config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('/', {
url: '/',
templateUrl: 'views/default.html' });
$urlRouterProvider.otherwise("/");
})
// establish authentication
.run(['angularFireAuth', 'FBURL', '$rootScope',
function(angularFireAuth, FBURL, $rootScope) {
angularFireAuth.initialize(new Firebase(FBURL), {scope: $rootScope, name: 'auth', path: '/signin'});
$rootScope.FBURL = FBURL;
}])
// your Firebase URL goes here
// should look something like: https://blahblahblah.firebaseio.com
.constant('FBURL', 'xxxxxxxxxxxxx.firebaseIO.com');
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/v0/firebase-simple-login.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/firebase/angularFire.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
<script src="cordova.js"></script>
</head>
<body ng-app="wefeed">
<section class="container">
<ion-nav-view></ion-nav-view>
</section>
</body>
</html>