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
Related
I am getting Uncaught Error: [$injector:modulerr]
getting this as error reference
while I run the 'SearchCountroller' controller function in angular js.
angular js version v1.5.8
app.js
var myApp = angular.module('myApp', [
'ngRoute',
'myCountrollers'
]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'js/portal/search.html',
controller:'SearchCountroller'
});
}]);
controller.js
var myCountrollers = angular.module(myCountrollers, []);
myCountrollers.controller('SearchCountroller', function MyController($scope,$http) {
$http.get('js/data.json').then(function(response) {
$scope.artists = response.data;
$scope.myartistOrder = 'name';
});
});
index.html
<!-- script -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<body class="bg-secondary" ng-app="myApp" ng-controller="myCountrollers">
<div ng-view></div>
</body>
angular.module gets name parameter as string:
var myCountrollers = angular.module('myCountrollers', []);
Moreover, you need to use controller's name in your template (instead of module name):
<body class="bg-secondary" ng-app="myApp" ng-controller="SearchCountroller">
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
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
I'm developing html 5 mobile app using visual studio cordova, angular js and ionic framework. In that, I need to save some values to localStorage. I followed some articles but there is an error throwing when saving values to the local storage.
<!doctype html>
<html ng-app="myApp">
<head> <title>Test app</title></head>
<body ng-app="myApp" ng-controller="MainCtrl">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-local-storage.js"></script>
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
<script>
var myApp = angular.module('myApp', ['ionic', 'LocalStorageModule']);
myApp.controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
</script>
<div>
<input type="button" ng-click="test()" value="add new">
</div>
</body>
</html>
It throws ReferenceError: isUndefined is not defined at Object.addToLocalStorage
Any idea??
Here is a plunker working with your application plnkr
var myApp = angular.module('myApp', ['ionic' ,'LocalStorageModule']).config(function(localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('cars')
.setStorageType('localStorage')
.setNotify(false, false);
}).controller('MainCtrl', ['$scope', 'localStorageService', function ($scope, localStorageService) {
$scope.test = function () {
var storageType = localStorageService.getStorageType();
console.log(storageType);
localStorageService.set('test', 'val');
}
}]);
I've the same issues as in how-to-create-separate-angularjs-controller-files, but it seems to be a little bit more complicated: I want to separate my module declaration and the "MAIN-Controller" into separate files, say app.js and appCtrl.js.
app.js contains:
angular.module('app', []);
appCtrl.js contains:
angular.module('app').controller('appCtrl', function($scope){
$scope.model = { MyValue : "coucou" };
}]);
Following code is ok:
<html>
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"/>
<script src="scripts/ctrl/appCtrl.js"/>
</head>
<body ng-app="app" ng-controller="appCtrl">
My value = {{model.MyValue}}
</body>
</html>
but following code is NOT OK:
<html>
<head>
</head>
<body ng-app="app" ng-controller="appCtrl">
My value = {{model.MyValue}}
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"/>
<script src="scripts/ctrl/appCtrl.js"/>
</body>
</html>
Angular throws the Error: "[ng:areq] Argument 'appCtrl' is not a function, got undefined" Unfortunately, the latter is the recommanded way to include angular and the modules...
Is there a solution to this issue? Thank you in advance!
Try this:
app.js
var app = angular.module('app', []);
appCtrl.js:
app.controller('appCtrl', function($scope){
$scope.model = { MyValue : "coucou" };
}]);
I would use angular modules/injection functionalities :
app.js contains:
angular.module('app', ['app.controllers']);
appCtrl.js contains :
angular.module('app.controllers', [])
.controller('appCtrl', function($scope){
$scope.model = { MyValue : "coucou" };
}]);