I am trying to change the route Params in my controller using the updateParams method, but for some reason I am getting an error:
TypeError: $route.updateParams is not a function.
In my controller I have:
App.controller('AddController', ['$scope', '$routeParams', '$route',
function ($scope, $routeParams, $route)
{
$route.updateParams({child: 'all'});
}]);
And this is my routing configuration:
App.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/'
})
.when('/:page/:child*', {
templateUrl: function($routeParams) {
return 'views/'+ $routeParams.page + '/' + $routeParams.child + '.html';
},
})
.otherwise({
redirectTo: '/'
});
}]);
I have no idea why can't I use the updateParams method, or what am I doing wrong here?
For anyone that is stuck on this like I was, I had to get the 1.4.8 version of angular AND the 1.4.8 version of angular-route to use $route.updateParams
plnkr
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="routeUpdateParams">
<h1>Hello Plunker!</h1>
Click to load the test view
<div ng-view></div>
</body>
</html>
var app = angular.module("routeUpdateParams", ["ngRoute"]);
app.config(function($routeProvider ){
$routeProvider.when("/test/:testId", {
template:"<h3>test:{{testId}}</h3><button ng-click='reloadRoute()'>reloadRoute</button>",
controller: function($scope,$route,$routeParams) {
$scope.testId = $routeParams.testId;
$scope.reloadRoute = function(){
console.log($route)
$route.updateParams({ testId: 5 });
}
}
});
});
Related
Scenario is,
Im new to AngularJS and making an AngularJS with AngularFire, I have defined my routing bye using $routeProvider ,see below
var appMainModule = angular.module('appMain', [ 'firebase','ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', { templateUrl: '/Templates/CustomerLogin.html', controller: 'HomeCtrl' });
$routeProvider.when('/customer/home', { templateUrl: '/Templates/CustomerHome.html' , controller:'ForLogout'});
$routeProvider.when('/customer/singup', { templateUrl: '/Templates/CustomerSinup.html', controller: 'RegisterCtrl' });
$routeProvider.when('/dashboard/godash', { templateUrl: '/Templates/dashboard.html', controller: 'DashboardCtrl' });
$routeProvider.when('/customer/list', { templateUrl: '/Templates/CustomerList.html', controller: 'customerListViewModel' });
$routeProvider.when('/customer/detail', { templateUrl: '/Templates/CustomerDetail.html', controller: 'customerDetailViewModel' });
$routeProvider.when('/customer/googlemap', { templateUrl: '/Templates/GoogleMap.html', controller: 'MapCtrl' });
// $routeProvider.when('/customer/postdata', { templateUrl: '/Templates/CustomerPostData.html', controller: 'AddPostCtrl' });
$routeProvider.when('/customer/getdata', { templateUrl: '/Templates/CustomerGetData.html', controller: 'GetCtrl', reloadOnSearch: false });
$routeProvider.when('/victim/getdata', { templateUrl: '/Templates/RiskVictimDetail.html', controller: 'VictimGetCtrl' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
this is my login controller
appMainModule.controller('HomeCtrl', ['$scope', '$location', 'CommonProp', '$firebaseAuth', function ($scope, $location,CommonProp, $firebaseAuth) {
var firebaseObj = new Firebase("FireaseURL/");
loginObj = $firebaseAuth(firebaseObj);
$scope.user = {};
var login = {};
$scope.SignIn = function (e) {
login.loading = true;
e.preventDefault();
var username = $scope.user.email;
var password = $scope.user.password;
loginObj.$authWithPassword({
email: username,
password: password
})
.then(function (user) {
//Success callback
// alert('Authentication successful');
login.loading = false;
$location.path('/dashboard/godash')
}, function (error) {
//Failure callback
alert('Authentication failure');
});
}
}])
my problem is that, when I refresh my login page by browser refresh, it refreshes successfully, but after login when refresh any page it gives me error
Page Not Found
my HTML:
<!DOCTYPE html>
<html data-ng-app="sampleApp">
<head>
<title>My new Project</title>
<meta charset="utf-8" />
<!-- AngularJS -->
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="Scripts/App.js"></script>
<base href="/" />
</head>
<body ng-view>
</body>
</html>
If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a <base href=""> tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode():
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
From : https://docs.angularjs.org/error/$location/nobase
Be sure to check all relative links, images, scripts etc. Angular requires you to specify the url base in the head of your main html file () unless html5Mode.requireBase is set to false in the html5Mode definition object passed to $locationProvider.html5Mode(). With that, relative urls will always be resolved to this base url, even if the initial url of the document was different.
From : https://code.angularjs.org/1.3.14/docs/guide/$location
Simple example:
Index.html
<!DOCTYPE html>
<html data-ng-app="appMain">
<head>
<meta charset="utf-8" />
<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="script.js"></script>
<base href="/" />
</head>
<body ng-view>
</body>
</html>
script.js
var appMainModule = angular.module('appMain', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/Templates/CustomerLogin.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/customer/home', {
templateUrl: '/Templates/CustomerHome.html',
controller: 'ForLogout'
});
$routeProvider.when('/dashboard/godash', {
templateUrl: '/Templates/dashboard.html',
controller: 'DashboardCtrl'
});
$routeProvider.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
appMainModule.controller('HomeCtrl', ['$scope', '$location', function($scope, $location) {
$scope.godash = function(e) {
$location.path('/dashboard/godash')
}
}]);
appMainModule.controller('DashboardCtrl', ['$scope', '$location', function($scope, $location) {
$scope.home = function(e) {
$location.path('/customer/home')
}
}]);
appMainModule.controller('ForLogout', ['$scope', '$location', function($scope, $location) {
$scope.home = function(e) {
$location.path('/')
}
}]);
/Templates/CustomerLogin.html
<div>
<button ng-click="godash()">/dashboard/godash</button>
</div>
/Templates/CustomerHome.html
<div>
<button ng-click="home()">/</button>
</div>
/Templates/dashboard.html
<div>
<button ng-click="home()">/customer/home</button>
</div>
I am new to UI-Router and am struggling to get my controller invoked. I am using an abstract state as the parent and it does not seem to call the controller. Below is a simplified version of my code.
I binded $stateChangeError onto the console and am not getting an error on the console. I added onEnter and OnExit attributes to my state and only the onEnter function gets called (not included below).
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js" ></script>
<script src="app.js"></script>
</head>
<body>
<div ui-view="navbar" ></div>
<div class="container">
<div ui-view="content" ></div>
</div>
<p>We are on the homepage.</p>
</body>
</html>
App.js
var app = angular.module('plunker', ['ui-router']);
app.config(function ($stateProvider, $urlRouteProvider) {
$urlRouteProvider.otherwise("/");
$stateProvider.state('site', {
abstract: true,
views: {
'navbar#': {
template: '<p>This is the {{nav}}</p>',
controller: 'NavBarCtrl'
}
}
});
});
app.config(function($stateProvider) {
$stateProvider
.state('home', {
parent: 'site',
url: '/',
views: {
'content#': {
template: '<p>This is the {{content}}</p>',
controller: 'MainCtrl'
}
}
});
});
app.controller('NavBarCtrl', function($scope) {
$scope.nav = 'Navbar'
});
app.controller('MainCtrl', function($scope) {
$scope.content = 'content'
});
There is a working example
There are two issues. Firstly we have to reference correct module:
// instead of this
// var app = angular.module('plunker', ['ui-router']);
// we need this
var app = angular.module('plunker', ['ui.router']);
And we have to use proper names of the '$urlRouterProvider'
// instead of this
app.config(function ($stateProvider, $urlRouteProvider) {
$urlRouteProvider.otherwise("/");
// we need this
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
Check it working here
I am getting undefined for $routeParams. Here is my code:
var ngAddressBook = angular.module('ngAddressBook', ['ngRoute']);
ngAddressBook.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/list.html',
controller: 'ngAddressListController'
}).
when('/add', {
templateUrl: 'views/add.html',
controller: 'ngAddressListController'
}).
when('/details/:id', {
templateUrl: 'views/details.html',
controller: 'ngAddressDetailsController'
});
}]);
// add a controller to it
ngAddressBook.controller('ngAddressListController', ['$scope', function ($scope)
{
$scope.contacts = [
{id:1,first_name:'Jane', last_name:'Doe','Phone':'123-456789','Email':'jane#example.com'},
{id:2,first_name:'Jhon', last_name:'Doe','Phone':'123-456789','Email':'jhon#example.com'}
];
$scope.getTotalContacts = function () {
return $scope.contacts.length;
};
}]);
ngAddressBook.controller('ngAddressDetailsController', ['$scope', function ($scope,$routeParams)
{
alert($routeParams);
$scope.id = $routeParams.id;
}]);
index.html
<!doctype html>
<html ng-app="ngAddressBook">
<head>
<title>Ng Addressbook</title>
<link href="main.css" rel="stylesheet" media="screen" />
</head>
<body>
<div ng-controller="ngAddressListController">
<div id="container">
<h1>Ng Address Book</h1>
<div id="content" ng-view>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script src = "angular-route.min.js"></script>
<script src="main.js"> </script>
</body>
</html>
There is a problem in controller parameter injection. You have not added $routeParams in your array injection list.
ngAddressBook.controller('ngAddressDetailsController', ['$scope','$routeParams', function ($scope,$routeParams)
{
alert($routeParams);
$scope.id = $routeParams.id;
}]);
As I found this on top on google:
apart from the missing injection - asign the object $routeParams and not the Key $routeParams.id
I found the explination here (from Sander Elias)
ngAddressBook.controller('ngAddressDetailsController', ['$scope','$routeParams', function ($scope,$routeParams)
{
$scope.id = $routeParams
alert($routeParams);
}]);
I am new to Angular and learned the basics about it recently.
In my current project, I am developing a single page application. As of now, my HTML/JS setup is as per below:
HTML:
<body>
<ng-include src='"src/includes/home.html"'></ng-include>
<!-- home.html is the HTML template with static data -->
</body>
app.js:
'use strict';
var app = angular.module('MyApp',['home']);
angular
.module('home', [])
.directive('homeDir', function(){
return {
replace: true,
restrict: 'E',
templateUrl: 'src/includes/home.html'
};
});
This code is working fine but I would like to introduce routing to have better control over the pages, instead of using ng-include.
So now, my HTML looks the same and I actually dont know what to change in it while using routing.
My app.js now looks like this:
'use strict';
var app = angular.module('MyApp',['home']);
// trying to introduce routing:
angular
.module('home', ['ngResource', 'ngRoute'])
.config(['$routeProvider', '$locationProvider'],
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'src/includes/home.html',
controller: 'homeCtrl'
}).
when('/drawer', {
redirectTo: 'src/includes/home.html#drawer',
controller: 'drawerCtrl'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
);
app.controller('homeCtrl', function($scope){
$scope.message = "some message";
console.log("homeCtrl called");
});
app.controller('drawerCtrl', function($scope){
$scope.message = "some other message";
console.log("drawerCtrl called");
});
However, I am getting an error:
Error: error:modulerr
Module Error
As per the link following the error:
This error occurs when a module fails to load due to some exception.
Why is it not loading? What am I missing? What should I change the HTML to?
UPDATE:
After including angular-route.min.js, I am getting the error:
Error: whole is undefined
beginsWith#file:///D:/projects/svn/trunk/src/libs/angular.js:8729:1
LocationHtml5Url/this.$$parse#file:///D:/projects/svn/trunk/src/libs/angular.js:8772:9
$LocationProvider/this.$get<#file:///D:/projects/svn/trunk/src/libs/angular.js:9269:5
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
registerDirective/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:5316:21
forEach#file:///D:/projects/svn/trunk/src/libs/angular.js:322:7
registerDirective/<#file:///D:/projects/svn/trunk/src/libs/angular.js:5314:13
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
addDirective#file:///D:/projects/svn/trunk/src/libs/angular.js:6363:28
collectDirectives#file:///D:/projects/svn/trunk/src/libs/angular.js:5801:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5666:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compile#file:///D:/projects/svn/trunk/src/libs/angular.js:5603:1
bootstrap/doBootstrap/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:1343:11
$RootScopeProvider/this.$get</Scope.prototype.$eval#file:///D:/projects/svn/trunk/src/libs/angular.js:12077:9
$RootScopeProvider/this.$get</Scope.prototype.$apply#file:///D:/projects/svn/trunk/src/libs/angular.js:12175:11
bootstrap/doBootstrap/<#file:///D:/projects/svn/trunk/src/libs/angular.js:1341:9
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
bootstrap/doBootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1340:8
bootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1353:5
angularInit#file:///D:/projects/svn/trunk/src/libs/angular.js:1301:37
#file:///D:/projects/svn/trunk/src/libs/angular.js:21050:5
jQuery.Callbacks/fire#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1037:1
jQuery.Callbacks/self.fireWith#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1148:7
.ready#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:433:38
completed#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:103:4
file:///D:/projects/svn/trunk/src/libs/angular.js
Line 9511
Edit:
Here are my HTML imports:
<head>
<title></title>
<!-- External libraries -->
<link rel="stylesheet" type="text/css" href="src/css/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="src/css/headers.css">
<link rel="stylesheet" type="text/css" href="src/css/drawer.css">
<link rel="stylesheet" type="text/css" href="src/css/custom.css">
<script type="text/javascript" src="src/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="src/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="src/libs/angular.js"></script>
<script type="text/javascript" src="src/libs/angular-resource.js"></script>
<script type="text/javascript" src="src/libs/angular-ui-router.js"></script>
<script type="text/javascript" src="src/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="src/libs/angular-pull-to-refresh.js"></script>
<script type="text/javascript" src="src/libs/nprogress.js"></script>
<script type="text/javascript" src="src/libs/ng-modal.js"></script>
<script type="text/javascript" src="src/libs/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.core.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.utils.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.slider.js"></script>
<script type="text/javascript" src="src/js/app.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
Config section is incorrect. Instead of
.config(['$routeProvider', '$locationProvider'], function($routeProvider, $locationProvider) { ... });
it should be
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { ... }]);
Note, that function definition belongs to array object.
Another mistake is in redirectTo property of the drawer route, currently it doesn't make sense. You want probably this instead:
.when('/drawer', {
templateUrl: 'src/includes/drawer.html',
controller: 'drawerCtrl'
})
Ensue that you have added the angular-route.js file to the html file.
And you are missing the ngRoute module here -
var app = angular.module('MyApp',['ngRoute','ngResource' ]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){... }]);
dfsq is correct. There are syntax errors in the code.
I'm just getting started with Angular and seem to have fallen down at the first hurdle. I wanted to build a simple skeleton app to start with. I pretty much copied the code of the angularjs.org site and am getting an error talking about injection... Sorry to code dump, but I have no clue where the bug is.
<!DOCTYPE html>
<html ng-app="triangular">
<head>
<title>Angular Skeleton</title>
<link rel="stylesheet" href="/style/bootstrap.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.0/angular-route-segment.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = angular;
var t = a.module('triangular', ['ngRoute']);
t.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'app/modules/test/partials/partial1.html',
controller: 'Page1Ctrl'
}).
when('/page2', {
templateUrl: 'app/modules/test/partials/partial2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/page1'
});
}]);
t.controller('Page1Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test';
}]);
t.controller('Page2Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test2';
}]);
</script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
I'm getting this error: Error: [$injector:modulerr].
The link it's providing isn't that useful. It told me to include the route segment js file, which I did, but the error persisted.
try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.min.js" type="text/javascript"></script>
to your head right below where you include angular. I had a similar issue and this fixed it right away.