I just followed a tutorial about angular on youtube but i'm not able to execute the code due to an routeProvider problem. I tried to include the good link for angular-route.js but it's still doesn't work...
I show you the code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>Tuto Angular</title>
</head>
<body>
<div>
<div ng-view=""></div>
</div>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', ['ng-route']);
demoApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/' });
});
demoApp.controller('SimpleController', function ($scope){
$scope.customers = [
{name:'John Smith', city:'Phoenix'},
{name:'John Doe', city:'New York'},
{name:'Jane Doe', city:'Chicago'}
];
$scope.addCustomer = function (){
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
When i look into the console it returns me that:
Uncaught Error: [$injector:modulerr]
If you have any idea you're welcome !
change:
var demoApp = angular.module('demoApp', ['ng-route']);
to
var demoApp = angular.module('demoApp', ['ngRoute']);
When injecting a dependency into our app module,use camelCase and not snake-case
Here, use ngRoute and not ng-route
See: https://stackoverflow.com/a/11934258/1177295
In Angular we need to use camelCase for Dependency injection and Directive definition in java Scripts files and snake-case in the HTML pages where directive is used
Lets take if you have directive myFirstDirective in Directive defination you will use
demoApp.directive(myFirstDirective, function () {
return{}
});
In the HTMl you will use
<my-first-directive></my-first-directive>
You have only included it inside the function. You have to inject the serivce into the config method and make sure the ng-route is included in the app references
Related
I've started learning Angular JS and I'm having a problem with injecting a service into a controller. I'm trying to put the ThreadFactory service into ThreadController, but I'm getting an undefined error when calling it. Any advice would be great. The error I'm getting is:
Unknown provider: $scopeProvider <- $scope <- ThreadService
app.js
angular.module('threadsApp', ['ngRoute']);
angular.module('threadsApp')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/index.html',
})
.when('/selected/:topicName', {
templateUrl: 'views/threads.html',
controller: 'ThreadController',
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
ThreadController.js
angular.module('threadsApp').controller("ThreadController",
["$scope", "$route", "$routeParams", "ThreadService", function ($scope, $route, $routeParams, ThreadService) {
$scope.test = "Hello!";
$scope.test2 = ThreadService.get();
}]);
ThreadService.js
angular.module('threadsApp').service("ThreadService", ["$scope", function ($scope) {
return {
get: function() {
return "Hello";
}
}
}]);
Order of Imports
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="components/app.js"></script>
<script src="components/bodyController.js"></script>
<script src="components/TopicController.js"></script>
<script src="components/ThreadService.js"></script>
<script src="components/ThreadController.js"></script>
You can't actually inject $scope into your ThreadService the way you're trying to. $scope isn't a typical service when you inject it into a controller. If you remove the $scope injection from Threadservice.js, I would bet the error will go away.
In the interest of not being redundant, a fuller explanation can be found here:
Injecting $scope into an angular service function()
I wrote a simple Angular application and for my routing i used ui.router, but i am getting this error:
Argument 'loginController' is not a function, got undefined
modules.js:
(function () {
'use strict';
angular.module('account', ['ui.router']);
angular.module('app', ['account', 'ui.router']);
})();
routeConfig.js:
(function () {
'use strict';
var account = angular.module('account');
account.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: '/app/components/account/login.html',
controller: 'loginController'
});
});
})();
account.js:
(function () {
'use strict';
var account = angular.module('account');
account.controller('loginController', ['$scope', loginController]);
function loginController($scope) {
$scope.Title = 'login';
};
});
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<div ui-view>
</div>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.js"></script>
<script src="app/modules.js"></script>
<script src="app/routeConfig.js"></script>
<script src="app/components/account/account.js"></script>
</body>
</html>
login.html:
<h4>{{Title}}</h4>
I'm new to ui.router, and the error come from route config.
Thanks for any help
When you use injection, that's not the way to do it.
If your function is separate from account.controller, use $inject:
account.controller('loginController', loginController);
...
loginController.$inject = ['$scope'];
function loginController($scope) {
...
}
Direct injection is only used when the body is inside account.controller.
account.controller('loginController', ['$scope', function($scope) {
...
}]);
Also, it seems your account.js file has an invalid IIFE - (function(){...}); instead of (function(){...})();
I think you need to remove $scope from the controller declaration as given below:
(function () {
'use strict';
var account = angular.module('account');
account.controller('loginController', loginController);
function loginController($scope) {
$scope.Title = 'login';
};
});
I am having issues with setting up my routing. I am getting the following error in my console. My folder 'partials' is named correctly and my files are named correctly. Any help?
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=demoApp&p1=Error%3…s%2Fthomasjanszen%2Fcodinghouse%2FAngular%2Fjs%2Fangular.min.js%3A17%3A381)
<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div ng-view=""></div>
</div>
<script src="js/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['']);
demoApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/view1', {
templateUrl: 'partials/view1.html',
controller: 'SimpleController'
}).
when('/view2', {
templateUrl: 'partials/view2.html',
controller: 'SimpleController'
}).
otherwise({
redirectTo: '/view1'
});
}]);
// demoApp.controller('SimpleController', function($scope){
// $scope.customers=[
// {name: 'name1', city: 'Cincinnati'},
// {name: 'name2', city: 'NYC'},
// {name: 'name3', city: 'Denver'},
// {name: 'name4', city: 'Chicago'}
// ];
// $scope.addCustomer = function(){
// $scope.customers.push(
// {
// name: $scope.newCustomer.name,
// city: $scope.newCustomer.city
// });
// };
// });
</script>
</body>
</html>
From angular 1.2 onwards, if you want angular routing you need to
Include the JS file : <script src="angular-route.js"></script>
You can obtain angular-route.js for your version of angular (1.3.12) here: https://code.angularjs.org/1.3.12/
provide ngRoute as a dependency, i.e.
change this:
var demoApp = angular.module('demoApp', ['']);
to this
var demoApp = angular.module('demoApp', ['ngRoute']);
For details please refer to the AngularJS Developers Doc - migration guide
You need to inject 'ng-route' as a dependency in your module
var demoApp = angular.module('demoApp', ['ng-route']);
<html ng-app="demoapp">
<head>
<script type="text/javascript" src="../angular.min.js"></script>
<script type="text/javascript">
var demoapp = angular.module('demoapp', []);
demoapp.controller('SimpleController',function ($scope){
$scope.customer = [
{name: "Deepak" , city: "Bhubaneswar"},
{name: "Sivaji" , city: "Banglore"}
];
$scope.addCustomer = function($scope){
$scope.customer.push({ name: $scope.newCustomer.name ,city: $scope.newCustomer.city});
}
});
demoapp.config(function ($routeProvider){
$routeProvider
.when('/',{
controller: 'SimpleController',
templateUrl: 'Partials/view1.html'
})
.when('/view2',{
controller: 'SimpleController',
templateUrl: 'Partials/view2.html'
})
.otherwise({redirectTo: '/'});
});
</script>
</head>
<body>
<div ng-view=""></div>
</body>
Could any please suggest me what going wrong here?Why I am getting error. I am newbie to Angular please help. I think there is some issue with the config portion. But I am not able to debug it.
Add angular-route script
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
Add ngRoute as dependency
var demoapp = angular.module('demoapp', ["ngRoute"]);
You should define controller like this.
demoapp.controller('SimpleController',["$scope", function ($scope){
$scope.customer = [
{name: "Deepak" , city: "Bhubaneswar"},
{name: "Sivaji" , city: "Banglore"}
];
$scope.addCustomer = function($scope){
$scope.customer.push({ name: $scope.newCustomer.name ,city: $scope.newCustomer.city});
}
}]);
I'm new on AngularJs.
I have trouble injecting a service into a controller in AngularJS.
I read many tutorials and topics on stackoverflow, but I can't fix my issues because the controller & service use the same module like this:
var myModule = angular.module("myModule", []);
myModule.service("myService", MyService);
myModule.controller("MyController", function($scope, myService) {
myService.doIt();
});
My project works when the service & controller use the same module, but I want each one to use its own module because many controllers should use this service.
(I try to minimize the code)
index.html :
<!doctype html>
<html lang="en" ng-app="interfaceApp">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<head>
<meta charset="utf-8">
<title>Interface de consulation</title>
<link rel="stylesheet" href="resources/css/bootstrap.css">
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/animations.css">
<script src="resources/vendors/jquery/jquery.js"></script>
<script src="resources/vendors/angular/angular.min.js"></script>
<script src="resources/vendors/angular/angular-animate.js"></script>
<script src="resources/vendors/angular/angular-route.js"></script>
<script src="resources/vendors/angular/angular-resource.js"></script>
<!--personal script-->
<script src="js/controllers/router.js"></script>
<script src="js/animations/animations.js"></script>
<script src="js/filters/filters.js"></script>
<script src="js/services/services.js"></script>
<script src="js/services/deserializer.js"></script>
<script src="js/directives/directives.js"></script>
<!-- load my controller -->
<script src="js/controllers/phoneController.js"></script>
<script src="js/controllers/specimenController.js"></script>
<script src="js/controllers/localisationController.js"></script>
</head>
<body>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div class="view-container">
<div ng-view class="view-frame"></div>
</div>
</body>
</html>
router.js:
'use strict';
/* App Module */
var interfaceApp = angular.module('interfaceApp', [
'ngRoute',
'phoneModules',
'localisationModules',
'specimenModules',
'interfaceFilters',
'interfaceDirectives',
'interfaceAnimations',
'interfaceServices',
// 'DeserializerService' // Error: [$injector:modulerr]
]);
interfaceApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'MainCtrl'
}).
when('/specimens', {
templateUrl: 'partials/specimen/list.html',
controller: 'specimenListeCtrl'
}).
when('/specimens/:specimensId', {
templateUrl: 'partials/specimen/detail.html',
controller: 'specimenDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
js/controllers/specimenController.js :
'use strict';
/* Controllers */
var specimenModules = angular.module('specimenModules', ['ngRoute']);
...
var referencedTag={"mediasSet":"#mediasSet","determinations":"#determinationID"};
specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService',
function ($scope,$http,DeserializerService) {
var request = 'http://localhost:8888/ui/specimens?limit=10&r_medias=false&orderby=d_determinationid';
$http.get(request).success(function(data) {
DeserializerService.startDeserializer(data,referencedTag);
$scope.specimens=data;
});
}
]);
js/services/deserializer.js :
var deserializerModule = angular.module('DeserializerModule', []);
deserializerModule.service('DeserializerService', function() {
***//specimenModules.service('deserializerService', function() { // work but i dont want to use specimenModules her***
this.referencedTag= [];
this.startDeserializer= function(data,refTag) {
this.referencedTag=refTag;
this.deserializer(data);
}
this.deserializer= function(data) {
...
}
});
I tried many combinations, but all failed giving error like :
Error: [$injector:modulerr]
Error: [$injector:unpr]
but i don't see where it come from on firebug ( the error dont give a line or file )
ERROR:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.17/$injector/unpr?p0=DeserializerServiceProvider%20%3C-%20DeserializerService
u/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:6:443
ec/l.$injector<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:139
c#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
ec/p.$injector<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:36:209
c#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:195
d#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:34:409
f/<.instantiate#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:35:101
Od/this.$get</<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:66:463
ngViewFillContentFactory/<.link#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:913:1
N#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:54:85
g#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:55
v/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:46:253
O/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:47:485
x#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:51:245
update#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:871:1
Yd/this.$get</h.prototype.$broadcast#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:113:355
updateRoute/<#http://localhost/rec-interface/resources/vendors/angular/angular-route.js:552:15
ze/e/l.promise.then/D#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/e/l.promise.then/D#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:99:243
ze/f/<.then/<#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:100:407
Yd/this.$get</h.prototype.$eval#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:110
Yd/this.$get</h.prototype.$digest#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:108:180
Yd/this.$get</h.prototype.$apply#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:111:449
g#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:72:113
x#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:76:463
ve/</v.onreadystatechange#http://localhost/rec-interface/resources/vendors/angular/angular.min.js:78:1
<div ng-view="" class="view-frame ng-scope">
Thanks for your help, any advice or critics are welcomed.
many thank #jcubic you are right it work !!!
it need double "injection", one for module and one for service name:
var specimenModules = angular.module('specimenModules', ['ngRoute','DeserializerModule']);
...
specimenModules.controller('specimenListeCtrl', ['$scope', '$http', 'DeserializerService', function ($scope,$http,DeserializerService) { ... }])
thanks