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.
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
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
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.
This problem makes me a huge headache - I don't know why, but in my application i have two $rootScope, with $id "001" and "003" (each has separated variables). I checked ng-app occurrence and it's only once at main page.
Anyone have any idea why it is like that ?
Angular 1.1.5 (same on 1.0.7)
Index.cshtml
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width" />
#Cassette.Views.Bundles.RenderStylesheets()
</head>
<body id="body" class="container-fluid" ng-app="app">
<div ng-view ng-cloak class="row-fluid">
</div>
#Cassette.Views.Bundles.RenderScripts()
</body>
</html>
App.js:
var app = angular.module('app', ['ngResource', 'ngCookies'])
.config(['$locationProvider', '$routeProvider', '$httpProvider', function ($locationProvider, $routeProvider, $httpProvider) {
var access = RoutingConfig.accessLevels;
$locationProvider.html5Mode(false);
$routeProvider
.when('/',
{
redirectTo: '/Entries'
})
.when('/Login',
{
templateUrl: 'Views/Security/Login',
controller: 'LoginController',
access: access.anonymous
})
.when('/Entries',
{
templateUrl: 'Views/Entry/List',
controller: 'EntryListController',
access: access.user
});
}])
.run(['$rootScope', '$location', 'SecurityService', function ($rootScope, $location, SecurityService) {
$rootScope.$on("$locationChangeStart", function (event, next, current) {
$rootScope.error = null;
if (!SecurityService.Authorize(next.access ? next.access : RoutingConfig.accessLevels.public)) {
if (SecurityService.IsLoggedIn()) {
$location.path('/');
}
else {
$location.path('/Login');
}
}
});
}]);
Just to make sure both templates are empty. $rootScope is changing on second $locationChangeStart :(
Haven't been able to reproduce your problem - but we've seen similar trouble with double controllers / scope because we accidentally specified the controller twice - once in the routing tables ($routeProvider.when(..., controller="xyzCtrl", templateUrl="xyz.html") and again in my template (data-ng-controller="xyzCtrl"). Removing either one of them fixed the problem. Hope this is a clue in the right direction.