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']);
Related
I am trying to avoid the use of $scope in my angular controller (as suggested in a best practices tutorial). In the controller, I'm setting testVariable. In the directive, I'm returning the template, including testVariable, but this added variable does not output any value. This code is based on what I've found in the AngularJS documentation.
Below is my javascript code:
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
var _controller = this;
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
_controller.testVariable = "Test Variable!"
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}}<br />Address: {{customer.address}}<br />Value Here: {{ testVariable }}'
};
});
})(window.angular);
Here is the HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-directive-simple-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<div my-customer></div>
</div>
</body>
</html>
I set up a plunkr for this here.
If you use controllerAs and bindToController it will simplify your directive and then access testVariable
angular.module('docsSimpleDirective', [])
.controller('Controller', [function () {
this.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
this.testVariable = "Testing data here!"
}])
.directive('myCustomer', function () {
return {
template: 'Name: {{$ctrl.customer.name}}<br />Address: {{$ctrl.customer.address}}<br />Value Here: {{ $ctrl.testVariable }}',
controller: 'Controller',
controllerAs: '$ctrl',
bindToController: true
};
});
You can further simplify your directive if you use .component to create docsSimpleDirective
im fairly new to angular. im trying to understand why this doesnt work:
error recieved is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to:
Error: [$injector:modulerr] Failed to instantiate module phoneList due to:
TypeError: Cannot read property 'controller' of undefined
angular.
module('phoneList').
component(name, component);
var name = 'phoneList';
var component = {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['$http', function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}]
};
how can i fix this ?
i know i can do this but i prefer decomposing the object as above. please advise
angular.
module('phoneList').
component('phoneList', {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['$http', function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}]
});
Have you tried to define the name and component vars before using them in .component(name, component) ? Like:
var name = 'phoneList';
var component = {
templateUrl: 'phone-list/phone-list.template.html',
controller: ['$http', function PhoneListController($http) {
var self = this;
self.orderProp = 'age';
$http.get('phones/phones.json').then(function(response) {
self.phones = response.data;
});
}]
};
angular.
module('phoneList').
component(name, component);
this is the index.html. i already have app.module.js defining this
'use strict';
// Define the `phonecatApp` module
angular.module('phonecatApp', [
'ngRoute',
'phoneDetail',
'phoneList'
]);
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="phone-list/phone-list.module.js"></script>
<script src="phone-list/phone-list.component.js"></script>
<script src="phone-detail/phone-detail.module.js"></script>
<script src="phone-detail/phone-detail.component.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
this is not the issue. my example is straight from the angularjs tutorial with the above only difference of separating the component object from the component itself.
<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 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
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