I'm working on an angularjs application that is having an "app.js" file. This file contains the following code:
var app = angular.module("myApp", ['ngRoute', 'ngCookies'])
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/UserProfileInfo/:UserId', {
templateUrl: 'Views/Users/UserProfileInfo.html',
controller: 'UserProfileInfoController'
})
.otherwise({
redirectTo: "/"
});
}]);
As you can see that above code is having a "UserProfileInfo" route that receives "UserId" route paramenter.
An html page is having a link tag referencing to the "UserProfileInfo" route and the code for this:
<a ng-href="#UserProfileInfo/{{item.UserId}}" ng-hide="hideViewUser" class="glyphicon glyphicon-trash" title="View"></a>
This link is referring to
www.somedomain.com/#/UserProfileInfo/131
The controller code for this UserProfileInfo view is below:
app.controller("UserProfileInfoController", ["$scope", "$location" "$routeParams", "$q", function ($scope, $location, $routeParams, $q) {
$scope.userProfileId = $routeParams.UserId;
}]);
The problem occurrs at this line:
$scope.userProfileId = $routeParams.UserId;
The UserId from $routeParams is coming undefined.
I have used all the required scripts on Index.html page:
<script src="Content/js/jquery-1.11.3.min.js"></script>
<script src="Content/js/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-cookies.min.js"></script>
Kindly help me I'm missing anything.
Please help me in fixing this issue.
Thanks in advance.
Related
I've started learning Angular JS and I'm having a problem with injecting a service into a controller. I'm trying to put the ThreadFactory service into ThreadController, but I'm getting an undefined error when calling it. Any advice would be great. The error I'm getting is:
Unknown provider: $scopeProvider <- $scope <- ThreadService
app.js
angular.module('threadsApp', ['ngRoute']);
angular.module('threadsApp')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/index.html',
})
.when('/selected/:topicName', {
templateUrl: 'views/threads.html',
controller: 'ThreadController',
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(true);
});
ThreadController.js
angular.module('threadsApp').controller("ThreadController",
["$scope", "$route", "$routeParams", "ThreadService", function ($scope, $route, $routeParams, ThreadService) {
$scope.test = "Hello!";
$scope.test2 = ThreadService.get();
}]);
ThreadService.js
angular.module('threadsApp').service("ThreadService", ["$scope", function ($scope) {
return {
get: function() {
return "Hello";
}
}
}]);
Order of Imports
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="components/app.js"></script>
<script src="components/bodyController.js"></script>
<script src="components/TopicController.js"></script>
<script src="components/ThreadService.js"></script>
<script src="components/ThreadController.js"></script>
You can't actually inject $scope into your ThreadService the way you're trying to. $scope isn't a typical service when you inject it into a controller. If you remove the $scope injection from Threadservice.js, I would bet the error will go away.
In the interest of not being redundant, a fuller explanation can be found here:
Injecting $scope into an angular service function()
I have created a web api project and after that i am going to create single page application but getting some error so i am posting my code below:
My angularjs code:
var app = angular.module('myApp', ['ngRoute']);
app.config('$routeProvider', function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'tpl/users.html',
controller: 'myController'
})
.when('/addusers', {
templateUrl: 'tpl/addusers.html',
controller: 'addusers'
})
.when('/admin',{
templateUrl: 'tpl/admin.html',
controller: 'admin'
});
});
app.controller('myController', function ($scope) {
$scope.message = 'Home';
});
app.controller('admin', function ($scope) {
$scope.message = 'Admin';
});
app.controller('addusers', function ($scope) {
$scope.message = 'addusers';
});
and my html page:
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="myController">
Home
Admin
Add Users
<br />
<div ng-view> </div>
</body>
</html>
and getting below angularjs error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=%5Bng%3Aareq%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2Fng%2Fareq%3Fp0%3Dfn%26p1%3Dnot%2520a%2520function%252C%2520got%2520string%0AD%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A450%0ADb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A106%0AWa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A19%3A193%0Asc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A32%3A423%0Ad%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A34%3A398%0Ae%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A386%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A33%3A207%0Agc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A36%3A309%0Afc%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A170%0Afc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387%0AXc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A17%3A415%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A469%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A67%0Aoe%2Fc%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A223%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A31%3A207%0AEventListener.handleEvent*sb%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A143%3A241%0Aa%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A150%3A402%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A7%3A288%0Aa%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A149%3A381%0AS.prototype%5Bc%5D%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A154%3A57%0AS.prototype.ready%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A145%3A122%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A214%3A447%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A6%3A2%0A
Your controller definitions (dependency injection parts) is wrong.
You can follow the john papa's style guide for angular
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/',{
templateUrl: 'tpl/users.html',
controller: 'myController'
}).when('/addusers', {
templateUrl: 'tpl/addusers.html',
controller: 'addusers'
}).when('/admin',{
templateUrl: 'tpl/admin.html',
controller: 'admin'
});
}]);
app.controller('myController', ['$scope', function ($scope) {
$scope.message = 'Home';
}]);
app.controller('admin', ['$scope', function ($scope) {
$scope.message = 'Admin';
}]);
app.controller('addusers', ['$scope', function ($scope) {
$scope.message = 'addusers';
}]);
I am working on a SPA in angular as well and got the same error very recently,
This is something that i found to happen when i was using ngRoute. ngRoute works but it seems very messy to me and kept giving me this error and some other ones.
I was probably just using it wrong, but i recommend you switch to "UI-Router"
It should clean up the way you do routing and make it easier to handle objects throughout your project.
You're using the config wrong. You don't need to use '$routeProvider' as a parameter.
Incorrect
app.config('$routeProvider', function ($routeProvider) {
});
Correct
app.config(function ($routeProvider) {
});
Also, Angular no longer uses ngRoute out of the box. It's a separate file you need to include (note the version):
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js
I have MVC application, I want make routing for the following URL
http://localhost:2668/Home/User/1
I try
.config(function ($routeProvider, $locationProvider) {
//here we will write code for implement routing
$routeProvider
.when('#/Home/User/:userid', {
templateUrl: '/AngularTemplates/User.html',
controller: 'UserController'
})
.otherwise({ // This is when any route not matched
controller: 'ErrorController'
}) })
And then the UserController as below:
.controller('UserController', ['$scope','$routeParams', function ($scope,$routeParams) {
// $routeParams used for get query string value
//var loc = window.location.href;
//var id = loc.slice(loc.lastIndexOf('/'), loc.length).split('/')[1];
$scope.Message = "This is ORDER Page with query string id value =" + $routeParams.userid;
}])
But I always get "undefined" for the para $routeParams.userid
What is wrong in my code? Please help thanks!
Here is a working example:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
user 11
user 12
<div ng-view></div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config([
'$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
}).hashPrefix('!');
$routeProvider
.when('/Home/User/:userid', {
template: '<pre>{{ message }}</pre>',
controller: 'UserController'
});
}]);
app.controller('UserController', ['$scope','$routeParams', function ($scope, $routeParams) {
$scope.message = "userid = " + $routeParams.userid;
}]);
</script>
</body>
</html>
JSBin http://output.jsbin.com/geluli
You may read more about default router here (nice examples + tests) https://docs.angularjs.org/api/ngRoute/service/$route
Angular UI-Router is not working? Please see my code on plunker.
I am trying to run a very basic routing example in angular js. But welcomeView.html is not appearing on the page.
(function() {
"use strict"
var app = angular.module("plunker", ["ui.router"]);
app.config(["$stateProvider", "$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "welcomeView.html"
})
}
]);
}());
There is updated and working version
Firstly we need to add reference to app.js with our module
<head>
...
<script src="app.js"></script> // was missing
<script src="script.js"></script>
</head>
Also, we should not use ng-controller, we do not need is with UI-Router
//<body ng-controller="MainCtrl">
<body>
The app.js on the other hand, should contain controller : "..."
$stateProvider
.state("home", {
url: "/",
templateUrl: "welcomeView.html",
// declare it here
controller: "MainCtrl",
})
Then, in script.js, we cannot redefine the module plunker (using setter) - we have to just take it (using getter)
// this would redefine the app.js stuff
//var app = angular.module('plunker', []);
// just a getter to get that module
var app = angular.module('plunker');
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
check that all in action here
For some reason my Angular site isn't working. I've included all the files. but for some reason angular isn't triggered to do something.
This is how my index.html looks like:
<!DOCTYPE html>
<html ng-app="ngTest">
<head>
<title></title>
</head>
<body>
<h2>Test</h2>
<ng-view></ng-view>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/home/HomeCtrl.js"></script>
</body>
</html>
All included scripts return 200 in the developer console, so I'm sure they are loaded fine.
Then my app.js looks like this:
window.app = angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']);
app.config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.useXDomain = true;
$locationProvider.html5Mode(true);
$routeProvider
.when('/Home', { templateUrl: '/app/views/home/Home.html', controller: 'HomeCtrl' })
.otherwise({ redirectTo: '/Login' });
}]);
The HomeCtrl.js simply looks lke this:
app.controller('HomeCtrl', ['$scope', function ($scope) {
init();
function init() {
alert('aaa');
}
}]);
And the Home.html only contains a piece of text.
Then when I navigate to: localhost/#Home then I expect it to load my Home.html in the ng-view tag. But that's not happening. It only loads my index.html but no angular code seems to be triggered.
Am I still missing something?
Try:
angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']).
config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$httpProvider.defaults.useXDomain = true;
$locationProvider.html5Mode(true);
$routeProvider.when('/Home', {
templateUrl: '/app/views/home/Home.html',
controller: 'HomeCtrl'
})
.otherwise({
redirectTo: '/Login'
});
}]);
You could do that for controlers :
angular.module('ngTest.controllers', []);//Declare controllers
angular.module('ngTest.controllers').
controller('HomeCtrl',['$scope', function ($scope) {
init();
function init() {
alert('aaa');
}
}]);
By the way, with html5Mode(true) your path will be localhost/Home.