Angular.js controller that uses multiple services - javascript

I can't seem to figure how to inject multiple services into a controller.
I have listed my files here:
index.html file:
<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>
<script src='./app/app.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/controls/questions.js'></script>
<script src='./app/services/questionsdata.js'></script>
<script src='./app/services/getsong.js'></script>
console.log error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=getsongProvider%20%3C-%20getsong%20%3C-%20QuestionsCtrl
at Error (native)
at http://localhost:8000/static/angular/angular.min.js:6:416
at http://localhost:8000/static/angular/angular.min.js:43:7
at Object.d [as get] (http://localhost:8000/static/angular/angular.min.js:40:270)
at http://localhost:8000/static/angular/angular.min.js:43:69
at d (http://localhost:8000/static/angular/angular.min.js:40:270)
at e (http://localhost:8000/static/angular/angular.min.js:41:1)
at Object.instantiate (http://localhost:8000/static/angular/angular.min.js:41:364)
at http://localhost:8000/static/angular/angular.min.js:87:42
at link (http://localhost:8000/static/angular-route/angular-route.js:977:26) <section class="container-fluid ng-scope" id="main" ng-view="">
My app.js file:
(function(){
'use strict';
angular.module('myApp', ['ngRoute', 'myApp.welcome', 'myApp.questions' ])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
redirectTo: '/welcome'
})
.when('/welcome', {
templateUrl: 'static/app/welcome/welcome.html',
controller: 'WelcomeCtrl'
})
.when('/questions', {
//templateUrl: 'static/app/questions/questions.html',
templateUrl: 'static/app/views/questions.html',
//controllerAs: 'question',
controller: 'QuestionsCtrl'
})
.otherwise('/')
});
})();
My controller file:
(function () {
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(questionsdata,getsong) {
var vm = this;
var data = {
params: "1,1"
};
....
My questionsdata (first service) file:
(function () {
'use strict';
angular
.module('myApp.questions')
.factory('questionsdata', questionsdata);
function questionsdata() {
var service = {
getQuestions: getQuestions
};
return service;
.....
My get song (second service) file
(function () {
'use strict';
angular
.module('myApp.questions')
.factory('getsong',getsong);
function getsong($http, $window, $interval) {
var service = {
getId: getId,
getMySong: getMySong
};
return service;
....
That's ain't working.
When I change my controller file to use only the questionsdata service as follows:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(questionsdata) {
It's working well. But when trying to use only the get song service as follows:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
function QuestionCtrl(getsong) {
It ain't working as well.
Weird, right? What am I missing?

Try using the inject method:
'use strict';
angular
.module('myApp.questions', ['ngRoute', 'ngSanitize'])
.controller('QuestionsCtrl', QuestionCtrl);
QuestionCtrl.$inject = ['getsong', 'questiondata'];
function QuestionCtrl(getsong, questiondata){

Try this in index.html:
<script src="'./angular/angular.min.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-sanitize.js"></script>
<script src="'./angular-route/angular-route.js'></script>
<script src='./app/controls/questions.js'></script>
<script src='./app/welcome/welcome.js'></script>
<script src='./app/app.js'></script>
<script src='./app/services/getsong.js'></script>
<script src='./app/services/questionsdata.js'></script>
Because myApp depends on myApp.welcome and myApp.questions, so you have to put them first.

Related

Error: $controller:ctrlreg The controller with the name '{0}' is not registered

app.js
(function(){
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.html',
controllerAs: 'vm'
})
}
})();
home.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
$rootScope.bodylayout ='main_page_que';
var vm = this;
}
})();
home.js
var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
$scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
$scope.userBlue = false;
}
$scope.HideRed = function() {
$scope.userRed = false;
}
$scope.OpenBlue = function() {
$scope.userBlue = !$scope.userBlue;
$scope.userRed = false;
};
$scope.HideBlue = function() {
$scope.userBlue = false;
};
});
home.html
<div ng-controller="RedCtrl">
Show Red
<div hide-red="HideRed()" class="loginBox" ng-show="userRed"></div>
Show Blue
<div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"></div>
</div>
Index.html
<html lang="pl" ng-app="app">
<body class="{{bodylayout}}">
<div class="content">
<div ng-view style="margin:auto"></div>
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>
<script src="home.js"></script>
<script src="app.js"></script>
<script src="authentication.service.js"></script>
<script src="flash.service.js"></script>
<script src="user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
</body>
</html>
Hey, this is part from application when I use ngRoute and dynamically add home.html, but I think I have wrong app.js or home.controller.js beacuse when I add external file home.js (when is ng-controller=""RedCtrl. I get error [$controller:ctrlreg] RedCtrl is not register. Have you ideas why? I am new in Angular and I think the main reason is lack of my knowledge.
You are overwriting app module in home.js thus getting the error
Use
var app = angular.module('app'); //Get previously defined module
instead of
var app = angular.module('app', []); //It declares new module
You also need to change the sequence of JavaScript files
<script src="app.js"></script>
<script src="home.js"></script>

"Unknown Provider" error when using Angular ui-router when using service in controller

I am trying to use a Service (rates service) in my Controller (rates controller) and get an "Error: Unknown Provider". Does anyone have any suggestions on how to fix this? Cheers!
rates.contoller.js
(function () {
'use strict';
angular.module('print.module').controller('ratesCtrl', ['$http', '$scope', '$rootScope', 'ratesService', function ($http, $scope, $rootScope, ratesService) {
ratesService.getRatesDataService();
}]
)})();
rates.service.js
(function () {
'use strict';
angular.module('print.module').service('ratesService', ['$scope', '$http', function ($scope, $http) {
vm = this;
function getRatesDataService() {
console.log("test");
return this.$http.get("api/Rates/GetRates");
}
//}
}]
)
})();
print.module.js
(function () {
"use strict";
var module = angular.module('print.module', [
'ui.router',
]);
module.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/print');
$stateProvider
.state('print', {
url: '/print',
templateUrl: "Public/scripts/sharedViews/printNavbar.html"
})
.state('print.rates', {
url: "/rates",
controller: 'ratesCtrl',
templateUrl: "Public/scripts/rates/rates.view.html",
controllerAs: 'vm'
})
$locationProvider.html5Mode(true);
});
}());
view (scripts tags only for reference)
<body ng-app="print.module">
<div ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script type="text/javascript" src="~/public/scripts/print.module.js"></script>
<script type="text/javascript" src="~/public/scripts/books/books.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/terms/terms.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/rates/rates.service.js"></script>
<script type="text/javascript" src="~/public/scripts/rates/rates.controller.js"></script>
<script type="text/javascript" src="~/public/scripts/services/modals.service.js"></script>
</body>
You can't use $scope inside Service

AngularJS Routing Function is not working

My Angular Routing Function is not working - There is a page load, but without the 'home.html' file. This is my code:
Index.html
<html ng-app="App" class="no-js" lang="en" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-cloak>
<div ng-controller="main">
<div ng-view></div>
</div>
</body>
</html>
app.js
(function () {
'use strict';
angular
.module('App', ['ngRoute'])
.controller('$routeProvider', router)
.controller('main', main);
function router($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '_pages/home.html',
controller: 'main'
});
};
function main ($scope) {
console.log("done");
}
Angular $providers working just in config state.
Eg:
angular
.module('App', ['ngRoute'])
.config(['$routeProvider', router]);
function router($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '_pages/home.html',
controller: 'main'
});
};
The route configuration is done in config and not controller. Change your code as below:
(function () {
'use strict';
angular
.module('App', ['ngRoute'])
.config(router)
.controller('main', main);
function router($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '_pages/home.html',
controller: 'main'
});
};
function main ($scope) {
console.log("done");
}
});

AngularJS 1.2.9 ngRoute "unknown provider $routeProvider error with requireJS

I'm using angularJS-1.2.9 and angular-route-1.2.9 to set up routes for my application , i'm using requireJS as the dependency loader and modularize the code . I have added the ngRoute dependency into the AngularJS config , but still getting this following error in the chrome console Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:Error: [$injector:unpr] Unknown provider: $routeProvoider
Here is my code
main.js
require.config({
baseUrl: './js',
paths: {
angular: 'libs/angular-1.2.9',
angularRoute: 'libs/angular-route-1.2.9'
},
shim: {
'angularRoute': {
deps: ['angular'],
exports: 'angularRoute'
},
'angular': {
exports: 'angular'
}
}
});
require(['angular', 'angularRoute'], function (angular, angularRoute) {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
app.controller('indexController', function ($scope, $http) {
console.log('inside index');
});
app.config(
function ($routeProvoider) {
$routeProvider.
when('/', {
templateUrl: 'index_content.html',
controller: 'indexController'
})
});
});
Here are my html files
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
index_content.html
<p>inside Index content</p>
<h1>testing the ang routes
Whats the issue here ?? Why is it still giving away the above mentioned error ?? How to fix this ??
There is a typo error on $routeProvider in the code I have rectified and placed the code below:
Code Snippet:
require(['angular', 'angularRoute'], function (angular, angularRoute) {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
angular.element(document).ready(function () {
angular.bootstrap(document, ['myApp']);
});
app.controller('indexController', function ($scope, $http) {
console.log('inside index');
});
app.config(
function ($routeProvider) { //One typo here
$routeProvider.
when('/', {
templateUrl: 'index_content.html',
controller: 'indexController'
})
});
});
app.config(
function ($routeProvider) {
$routeProvider.
when('/ResourceItem/:RE_RestoId',{
templateUrl:'./partials/state-view.html',
controller: function ($routeParams, ResourceService) {
this.params = $routeParams;
var that = this;
ResourceService.getResourceItem(this.params.RE_RestoId || "").success(function (data) {
that.items = data;
})
this.addItemTo = function (resource)
{
if(!resource.items)
{
resource.items = [];
}
resource.items.push({TA_Code: this.newResourceItem });
this.newResourceItem="";
};
},
controllerAs:'ResourceItemCtrl'
});
});

Error: $injector:modulerr Module Error! AngularJS

I've encountered a problem that I can't seem to fix and I hope someone out there can help me out!
I keep getting this error:
Failed to instantiate module musicApp due to:
{1}
This is the function I'm using:
'use strict';
var angular = angular
.module('angular', ['ngResource', 'ngRoute'])
.config (function ($RouteProvider){
$RouteProvider
.when ('/', {
templateULR: '/templates/list-artists.html'
})
.when ('/add-artist', {
templateUrl: '/add-artist.html'
})
.when ('/artist-details/:id', {
templateUrl: 'artist-details.html'
})
.otherwise ({redirectTo: '/'});
})
.constant ('author', 'Sekret Doge'
This is where I'm calling this function:
'use strict';
angular.controller('ListArtistsController',
function ListArtistsController($scope, artistData) {
$scope.artists = artistData.getAllArtists();
});
And this is my html file, that's supposed to show the information I require:
<div class="jumbotron" ng-controller="ListArtistsController">
<div class="row">
<div ng-repeat="artist in artists">
<div class="col-md-4" text-center>
<h2> {{ artist.name }}</h2>
</div>
</div>
</div>
</div>
I'll even give the script sources because some people are having problems thanks to them:
<script src="lib/jquery-2.1.0.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/PageController.js"></script>
<script src="js/controllers/ListArtistsController.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/ui-bootstrap-tpls-0.9.0.min.js"></script>
If there are anymore codes or files missing from this post that you need to look at, just tell me to edit the post!
getAllArtists function:
'use strict';
angular.factory('artistData', function ($resource) {
var resource = $resource('/data/artist/:id', {id: '#id'});
return {
getArtist: function (id) {
return resource.get ({id: id});
},
saveArtist: function (artist) {
artist.id = 999;
resource.save (artist);
},
getAllArtists: function() {
return resource.query();
}
}
});
PageController:
'use strict';
angular.controller('PageController',
function PageController($scope) {
$scope.author = "Sekret Doge";
$scope.date = {
year: 2014,
month: 4,
day: 4
}
}
);
app:
'use strict';
var angular = angular
.module('angular', ['ngResource', 'ngRoute'])
.config (function ($RouteProvider){
$RouteProvider
.when ('/', {
templateUrl: '/templates/list-artists.html'
})
.when ('/add-artist', {
templateUrl: '/add-artist.html'
})
.when ('/artist-details/:id', {
templateUrl: 'artist-details.html'
})
.otherwise ({redirectTo: '/'});
})
.constant ('author', 'Sekret Doge');
Thanks for helping out!
It looks like you aren't loading the ngRoute javascript. It's in a separate file.
http://docs.angularjs.org/api/ngRoute
The following library in the script tag in your HTML needs included in your .js.
lib/ui-bootstrap-tpls-0.9.0.min.js
at the top of app.js add ui.bootstrap.
var angular = angular
.module('angular', ['ngResource', 'ngRoute', 'ui.bootstrap'])

Categories