I'm new to AngularJS and I'm trying to declare a second controller to a new view in my page. I have a logincontroller and when I succeed the login I get to the Home.html.
When opening Home.html I get the following error below..It looks like it can't recognize my ModelController/ModalService..What am I missing here?
Error: [$injector:unpr] http://errors.angularjs.org/1.5.0-beta.1/$injector/unpr?p0=ModalServiceProvider%20%3C-%20ModalService%20%3C-%20ModalController
Index.html:
<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-cookies.min.js"></script>
<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>
</body>
</html>
Home.html:
<div class="container" ng-controller="ModalController">
<div class="col-xs-2">
<button class="btn btn-group-justified" ng-init="testfunc()">press me</button>
</div>
</div>
MyApp.js:
angular.module('MyApp', [
'Authentication',
'Modal',
'ngRoute',
'ngCookies'
])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
.when('/Home', {
controller: 'ModalController',
templateUrl: 'Home.html'
})
.otherwise({
redirectTo: '/Login'
});
}
]);
ModalController.js:
angular.module('Modal')
.controller('ModalController',
['$scope', 'ModalService',
function ($scope, ModalService) {
$scope.testfunc = function() {
alert('weeee');
}
}]);
ModalService.js:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService'
['$http',
function ($http) {
var service = {};
return service;
}
]);
You need to include app.js after including services and controllers. And controllers after services.
it should be like this:
<script src="Scripts/Services/ModalService.js"></script> <!--ModalService is being defined here -->
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script> <!-- ModalService is being injected here -->
<script src="Scripts/MyApp.js"></script> <!-- All of the things are set in place here -->
In fact, the best practice is to include all of them in the bottom of your <body>.
I found the answer..The problem was that I was missing a comma :(
ModalService.js should look like this:
angular.module('Modal', []);
angular.module('Modal')
.factory('ModalService', <------ COMMA MISSING :(
['$http',
function ($http) {
var service = {};
return service;
}
]);
Related
I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.
My html code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<button ng-click="changeview()">ClickMe</button>
<h1>MainPage</h1>
</body>
</html>
My Code
var app = angular.module("app", ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Details', {
templateUrl: 'details.html'
}).
when('/Main', {
templateUrl: 'main.html'
}).
otherwise({
redirectTo: '/Main'
});
}]);
app.controller("Controller", function($scope,$routeParams,$location){
//$scope.ProductId = $routeParams.id;
$scope.changeview = function () {
console.log('in function changeview');
$location.path('/Details');
}
})
Here is my plunkr
Please help.
You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates
<div ng-view></div>
Working plunker
You need to have ng-view directive in index.html
<div class="viewWrapper">
<div ng-view></div>
</div>
WORKING DEMO
I'm getting the following error:
Error: $injector:unpr Unknown Provider
Unknown provider: _planetsProvider <- _planets <- SearchController
.API get request is working fine and my SearchController.js is also triggered, but I'm still getting the error above. I have tried almost all suggestions from StackOverflow and official document. How can I fix it?
Here's my code: (Plunker link)
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config( function($routeProvider) {
$routeProvider
.when('/', { templateUrl: '/views/home.html',
controller: 'HomeController' })
.when('/login', { templateUrl: '/views/login.html',
controller: 'LoginController' })
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
resolve:{
_planets: function(myService)
{
console.log("asdas");
return myService.getRequestForPlanets();
}
}
})
});
SearchController.js
angular.module('myApp').controller('SearchController', function($scope, myService, _planets, $rootScope) {
$scope.message = 'This is Show orders screen';
$scope.planets=_planets;
console.log(_planets);
});
myService.js
angular.module('myApp').service('myService', function($http, $rootScope, $location, $q)
{
$rootScope.loading = false;
this.getRequestForPlanets=function()
{
$rootScope.loading = true;
var deferred = $q.defer();
$http.get('https://swapi.co/api/planets')
.then(function(response){
$rootScope.loading = false;
console.log(response.data.results);
deferred.resolve(response.data.results);
})
.catch(function(response){
deferred.reject(response);
});
return deferred.promise;
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body ng-app="myApp">
<!-- ng-controller="myController" -->
<div class="spinner" ng-show="loading">
<div class="loader" ></div>
</div>
<div ng-view></div>
<section class="imgDiv">
<div class="container-fluid">
<!-- <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" style="width: 100%;"> -->
<div class="sn_scroll_btn slideInDown ">
<img src="images/scroll.png" alt="" class="test">
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers/LoginController.js"></script>
<script type="text/javascript" src="controllers/SearchController.js"></script>
<script type="text/javascript" src="services/myService.js"></script>
<script type="text/javascript" src="controllers/HomeController.js"></script>
</body>
</html>
Based on the plnkr link you provided: https://plnkr.co/edit/WRh3z5HTGby6nT1G8ovi?p=preview
Your controller is being instantiated twice, once in your routes, in app.js here:
.when('/search', { templateUrl: '/views/search.html',
controller: 'SearchController',
...
and again in your view in search.html here:
<div ng-controller="SearchController">
<p>{{message}}</p>
...
Since the SearchController has already been injected into the app by your routes, the second time it's instantiated in the view, it throws the Unknown Provider error.
If you remove ng-controller="SearchController" from search.html it should fix the issue that you're having.
Hope that helps!
I am making a small application in angular to study, but the directive and the view are not being rendered, I already investigated my code, but I did not find anything, code can be seen below:
Index.html
<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">
<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>
<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>
<!-- My Directives -->
<script src="js/directives/header.js"></script>
<title>Music</title>
</head>
<body>
<header-menu></header-menu>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
main.js
angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){
});
header.js
angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
restrict: "AE",
templateUrl: "views/directives/header.html"
};
return ddo;
});
once the module injected to the angular.module no need to inject them again. Just get the reference only.
remove the 'musicasController' from the module injector. Controllers don't need to inject to the modules
angular.module('rdi_music', ['ngRoute', 'ngResource',
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/musicas',{
templateUrl: 'views/musicas/index.html',
controller: 'musicasController'
});
});
index-controller.js
angular.module('rdi_music')
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});
musicas-controller.js
angular.module('rdi_music')
.controller('musicasController', function($scope){
});
Demo
I have a simple controller (logincontroller) which gets initiated twice when loading login.html, however I do not know why that happens.
MyApp.js:
angular.module('PVM', [
'Authentication',
'Modal',
'ngRoute'
])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
.when('/Home', {
controller: 'ModalController',
templateUrl: 'Home.html'
})
.otherwise({
redirectTo: '/Login'
});
}
]);
LoginController.js:
angular.module("Authentication")
.controller("LoginController",
[
"$scope", "$rootScope", "$location", "AuthenticationService",
function($scope, $rootScope, $location, AuthenticationService) {
AuthenticationService.ClearCredentials();
$scope.login = function() {
var foo = "bar"; //Breakpoint hits here twice when loading login.html
};
}
]);
index.html:
<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div>
<div ng-view></div>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-cookies.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>
</body>
</html>
Login.html:
<div class="container centeredDiv" ng-controller="LoginController">
<p>Login page</p>
</div>
Because your controller gets executed at 2 places.
From login.html - ng-controller
<div class="container centeredDiv" ng-controller="LoginController">
<p>Login page</p>
</div>
From controller associated with route - /Login
.when('/Login', {
controller: 'LoginController',
templateUrl: 'Login.html'
})
How to fix? You should remove the ng-controller attribute from login.html
You do not need the ng-controller in your template login.html because it is in your route. Simply remove it and that should do the trick.
I'm trying to pull some data out of url to pass into a controller for use in the controller. I've been trying to do it via Angular Routing.
<!DOCTYPE html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
<html ng-app>
<head>
<meta name="viewport" content="width=device-width" />
<title>Edit</title>
<script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-controller="SearchController" >
<input type="text" ng-model="SearchText" />
</div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController'
});
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
$scope.SearchText = $routeParams.sometext;
}
SearchController.$inject = ['$scope'];
</script>
</body>
</html>
$routeParams in the controller is always null. Why?
Secondly, the url of the page that this is used on will be something like this: http://www.blah.com/angularroute/edit/32432 Is this an appropriate use of Angular routing?
Hi it looks like you miss reference to angular-route.js script please see example here: http://plnkr.co/edit/RZxt3t9dNQxbyW94V9jQ?p=preview
JS:
var app = angular.module('app', ['ngRoute']);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when('/angularroute/edit/:sometext', {
controller: 'SearchController',
templateUrl: 'http://run.plnkr.co/d8ZBAv3VEkfIJI4h/search.html'
});
$locationProvider.html5Mode(true);
});
app.controller('firstCtrl', function($scope) {
});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);
function SearchController($scope, $routeParams) {
console.log($routeParams);
$scope.SearchText = $routeParams.sometext;
}
html:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl">
Search for elephant<br/>
Search for horse<br/>
Search for tigger<br/>
</div>
<div ng-view="">
</div>
</body>
</html>
Had the same problem with AngularJS 1.3.0, updating to 1.3.13 fixed it.