I am trying to do routing in angular Js in mvc but I am not able to find solution for this errors.
$injector:modulerr this Error i am getting
Uncaught ReferenceError: controller is not defined
<html lang="en" ng-app="APP">
<head><script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script>
var app = angular.module('APP', ['ngResource']).
config(function ($routeProvider) {
$routeProvider.
When('/', { templateUrl: '/Project/Template/RouteTemplate.html', controller: 'directoryController'}),
When('/view', { templateUrl: '/Project/Template/Home.html' })
});
controller('directoryController', ['$scope', '$http', function ($scope, $htp) {
alert("hai");
}])
</script>
</head>
<body>
<div class="">
<div ng-controller="directoryController">
<div ng-view>
</div>
</div>
</div>
you need app.controller and it is $http not $htp
controller('directoryController', ['$scope', '$http', function ($scope, $htp) {
should be:
app.controller('directoryController', ['$scope', '$http', function ($scope, $http) {
Your not chaining, after the end of .config remove the ; and add another . to chain the controller call:
angular.module('APP', ['ngResource']).config({}).controller()
^^ MISSING THIS
Related
I can't figure out why i've this "controller is not registered" error in angular 1.6.4.
Controller:
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
Index:
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/formCtrl.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<div ng-view>
</div>
</body>
</html>
App:
app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/:id", {
templateUrl: './partials/main.html',
controller: 'formCtrl'
});
})
This is because you're actually creating a new module for the controller, instead of reusing the existing app module.
To fix this you simply change your controller code to this:
angular.module('app').controller("formCtrl", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
});
You only need to specify the second argument of angular.module() when you intent to create a new module. If you want to register controllers, components, services, etc. for your application, you only apply the first argument: angular.module('app').
Note, make sure your controller js file is loaded after the app js file.
try this :
var app = angular.module('app', ['ngRoute']);
app.controller("formCtrl",["$scope", "$rootScope", "$stateParams", function($scope, $rootScope, $stateParams) {
$scope.id = $stateParams.id;
}]);
I tried every solution on stackoverflow to make this error go but all to vain..
I am trying to use ngRoute to make SPA.
angular.js:14328 Error: [$controller:ctrlreg] The controller with the name 'loginCtrl' is not registered.
Here is my code
/* route file called controoler.js */
var app = angular.module('mainApp', ['ngRoute']).
config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login/views/loginView.html',
controller: 'loginCtrl'
})
.when('/reward', {
templateUrl: 'rewardManagement/views/reward.html'
})
.otherwise({
redirectTo: '/'
});
}
]);
// loginCtrl in login/controllers/loginCtrl.js
var app = angular.module('mainApp', []);
app.controller('loginCtrl', ['$scope', '$location', function($scope, $http, $location) {
$scope.changeView = function(view) {
$location.path(view); // path not hash
};
}]);
<!-- -------index.html--------- -->
<!DOCTYPE html>
<html lang="en" class="body-full-height" ng-app="mainApp">
<head>
<script src="/controller.js"></script>
<script src="../login/controllers/loginCtrl.js"></script>
</head>
<body>
<div ng-controller="loginCtrl"></div>
<ng-view></ng-view>
</body>
</html>
<!-- -------loginView.html--------- -->
<script src="../login/controllers/loginCtrl.js"></script>
<div ng-controller="loginCtrl">
<button ng-click="changeView('/reward')">Please Bypass this for now</button>
</div>
Please suggest a solution, in my project I will have many links which when clicked should change the ng-view according to the route. And I don't think putting all the .js scripts in index.html is a good idea, shouldn't each partial contain its own .js which also contains the controller?
Here is the working Plunkr
Just did some little changes in your controller code:
app.controller('loginCtrl', ['$scope', '$location', function($scope, $location) {
$scope.changeView = function(view) {
$location.path(view); // path not hash
};
}]);
Also you don't need to add the script again in your loginView.html
So I have my index page:
<!DOCTYPE html>
<html ng-app="application" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<!-- Place where the page will be rendered at -->
<div ng-view>
</div>
</body>
</html>
The application looks like this:
var application = angular.module('application', ["ngRoute"]);
application.config(["$routeProvider", "$locationProvider",
function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/ListContactsForm/lcTemplate.html",
controller: "HomeController"
})
.otherwise({
redirectTo: "/home"
});
//$locationProvider.html5Mode(true);
}]);
application.controller("HomeController",
["$scope", "$location", "DataService",
function ($scope, $location, DataService) {
alert("home hit!");
}]);
The lcTemplate.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>aaaa</title>
</head>
<body>
I'm here!!
</body>
</html>
The problem is that the lcTemplate is rendered, i get the "I'm here!!" message, but he HomeController function is never called. Why is that so?
The problem was in injecting the DataService which did not exist (I removed the service).
Error: [$injector:unpr] http://errors.angularjs.org/1.3.12/$injector/unpr?p0=DataServiceProvider%20%3C-%20DataService%20%3C-%20HomeController
Changes which needed to be done were all in the application code:
var application = angular.module('application', ["ngRoute"]);
application.config(["$routeProvider", "$locationProvider",
function ($routeProvider, $locationProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/ListContactsForm/lcTemplate.html",
controller: "HomeController"
})
.otherwise({
redirectTo: "/home"
});
//$locationProvider.html5Mode(true);
}]);
application.controller("HomeController",
["$scope", "$location",
function ($scope, $location) {
alert("home hit!");
}]);
You have to remove the complete HTML definition from the template because the view is rendered inside
<div ng-view>
</div>
lcTemplate.html: should be like
<div>I'm here!!</div>
You have not declare "DataService". for example: I have my services in model_services.js
var services = angular.module('ModelServices');
services.factory('DataService', ['$resource', function($resource){
var DataService = $resource('/api/data/:id', {id: "#id" });
return DataService;
}]);
This method is for call to any consuming services. '/api/data/:id' is your API Rest path.
After that you have to add your module in your config application, for this example 'ModelServices'
var application = angular.module('application', ["ngRoute", "ModelServices"]);
Now you can call your "DataService" from the controller
application.controller("HomeController",
["$scope", "$location", "DataService",
function ($scope, $location, DataService) {
console.log("home hit!");
}]);
I have not idea if you can call "alert" from controller but I'm sure can you use console.log instead.
As you say #omegasbk "The problem was in injecting the DataService which did not exist (I removed the service)." if you have not declare your module that contain your "DataService" object in your application then you can not use this in your controller.
I am using two controllers(In diffrent js files) for different views.
My main HTML
================================================================================
<html ng-app="MyApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="/JS/utilityJS/angular.min.js"></script>
<script type="text/javascript" src="/JS/utilityJS/angular-route.js"></script>
<script type="text/javascript" src="/JS/app.js"></script>
<script type="text/javascript" src="/JS/controllerLocation.js"></script>
<script type="text/javascript" src="/JS/controllerItem.js"></script>
</head>
<body>
<div id="populateDiv" >
<div id="header" ng-include src="'/pages/header.html'"></div>
<div id="footer" ng-include src="'/pages/footer.html'"></div>
<div id="groceryBg" class=" mainContentBg" style=""> </div>
<div ng-view=""></div>
</div>
</body>
</html>
App.js // main js file
angular.module('controllersModule', []);
var AppModule = angular.module('MyApp', ['ngRoute','controllersModule']);
AppModule
.service('locationService', function ($http) {
......
}
AppModule .config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/Load/', {
templateUrl: 'location.html',
controller: 'locationCtrl'
}).
when('/Items/', {
templateUrl: 'items.html',
controller: 'itemsCtrl'
}).
otherwise({
redirectTo: '/Load/'
});
}]);
controllerLocation.js // location controller
angular.module('controllersModule').controller('locationCtrl', ['$rootScope', '$scope','$route', '$http','$location','locationService', '$routeParams',
function($rootScope, $scope, $route,$http,$location,locationService, $routeParams)
{
$location.path("/Items");
}
controllerItem.js // Item controller
angular.module('controllersModule').controller('itemsCtrl' ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
function($rootScope, $scope, $route, $http, locationService, $routeParams)
{
console.log("Scope id Items is:- " + $scope.$id);
}
location.html // Location html
<html>
<head>
</head>
<body>
<div>
Location.....
</div>
</body>
</html>
items.html
<html>
<head>
</head>
<body>
<div>
Items.....
</div>
</body>
</html>
================================================================================
When I am calling /Load and debugging its showing the location.html content and loading controllerLocation as well. But after $location.path("/Items"); its loading items.html but not loading controllerItem and throwing erroenter code herer http://errors.angularjs.org/1.2.22/ng/areq?p0=itemsCtrl&p1=not%20aNaNunction%2C%20got%20undefined.
Can you please help in finding what is the problem?
You forgot a comma and a closing square bracket in the declaration of itemsCtrl
angular.module('controllersModule').controller('itemsCtrl', ['$rootScope', '$scope', '$route', '$http', 'locationService', '$routeParams',
function($rootScope, $scope, $route, $http, locationService, $routeParams)
{
console.log("Scope id Items is:- " + $scope.$id);
}]);
I have 2 js files in different directories for each module. if i start my app, i get the error, that the controller SubAppCtrl cannot be found ... can anyone tell me, why do i get this error message?
Code in mainAPP:
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/test', {templateUrl: 'components/test/test-list.html', controller: SubAppCtrl});}]);
Code in subAPP:
var myapp = angular.module('subAPP', []);
myapp.controller('SubAppCtrl', ['$scope', '$rootScope', '$translate', function ($scope, $rootScope, $translate){ .... ]);
html
<!doctype html>
<html ng-app="mainAPP" lang="en">
<head>
...
<script src="lib/angular/angular.js"></script>
<script src="components/test/subAPP.js"></script>
<script src="js/mainAPP.js"></script>
...
</head>
<body>
<div ng-view></div>
</body>
</html>
mainApp should read
var myModule = angular.module('mainAPP', ['subAPP']);
myModule.config([
/******/ '$routeProvider',
function ($routeProvider) {
$routeProvider.when('/test', {
templateUrl: 'components/test/test-list.html',
controller: 'SubAppCtrl'
});
}
]);
note quotes around the controller name.