I want send a "URL" as get params in AngularJS.
===
success:
example.com/purchase/loremipsum
failed(redirect to otherwise):
example.com/purchase/http%3A%2F%2Fwww.google.com
==
javascript
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/gallery', {
templateUrl: 'partials/gallery.html',
controller: 'galleryCtrl'
}).
when('/purchase/:url', {
templateUrl: 'partials/purchase.html',
controller: 'PurchaseCtrl'
});
}]);
app.controller('GalleryCtrl',function ($scope, $http, $rootScope, $routeParams, $modal, $log, $location){
$http.get(url).
success(function(data){
$scope.itemUrl = encodeURIComponent(data.url);
});
});
app.controller('PurchaseCtrl',function ($scope, $http, $rootScope, $routeParams, $modal, $log, $location){
$scope.url = $routeParams.url;
alert($scope.log);
});
gallery.html
<a ng-href="#/purchase/{{itemUrl}}">BUY</a></div>
%2F will be converted into a '/'
That means angular will try to find match for example.com/purchase/http://www.google.com, which doesn't match your pattern '/purchase/:url'
Related
I'm trying to pass the parameters to the AngularJS controller.
AngularJs Routes
$routeProvider.when('/post-ads/', {
templateUrl: "ui/view/post-ads.php",
controller: "adPostController",
controllerAs: 'vm'
})
$routeProvider.when('/post-ads/:category/:subcategory', {
templateUrl: "ui/view/ad-details.php",
controller: "adPostController",
controllerAs: 'vm'
})
AdPostController
adPostController.$inject = ['ApiService', '$scope'];
function adPostController(ApiService, $scope, $routeParams) {
console.log("im here");
console.log($routeParams.category, $routeParams.subcategory);
}
HTML a href
<a href="#/post-ads/automobile/car>click</a>
Error
TypeError: Cannot read property 'category' of undefined
I guess your have to change:
adPostController.$inject = ['ApiService', '$scope'];
function adPostController(ApiService, $scope, $routeParams) {
console.log("im here");
console.log($routeParams.category, $routeParams.subcategory);
}
To:
adPostController.$inject = ['ApiService', '$scope', '$srouteParams'];
function adPostController(ApiService, $scope, $routeParams) {
console.log("im here");
console.log($routeParams.category, $routeParams.subcategory);
}
Change to this:
adPostController.$inject = ['ApiService', '$scope', '$routeParams'];
I took an AngularJS lesson. But Angular is not understanding links to the details page, like template/1 if I click on a link from the browser. However, if I enter the URL in the address bar of the browser it works fine. How can I resolve this?
App.js
angular.module('templateStore.templates', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/templates', {
templateUrl: 'templates/templates.html',
controller: 'TemplatesCtrl'
})
.when('/template/:templateId', {
templateUrl: 'templates/template-details.html',
controller: 'TemplateDetailsCtrl'
})
.otherwise({
redirectTo: '/templates'
});
}])
.controller('TemplatesCtrl', ['$scope', function($scope) {
console.log('This is Template ');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
console.log('This is Template Details');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
console.log('This is Template Details');
}]);
Templates.html(main page)
<div class="col-md-4 template">
<h3>Template 4</h3>
<img src="img/4.jpg">
<h4>$29.99</h4>
<a class="btn btn-primary btn-block" href="#/template/1">Details</a>
</div>
Attached is the image in which I highlighted the url in the address bar after clicking it
.when('/template/:templateId', {
templateUrl: 'templates/template-details.html',
controller: 'TemplateDetailsCtrl'
})
App.controller('TemplateDetailsCtrl', ['$scope', '$http',
'$routeParams', function($scope, $http, $routeParams) {
console.log($routeParams.templateId); }]);
Demo
Yes you need #/template/2 and above its working code.
may this help you....
I have been trying to redirect my application to the following link using
$location.path('/enterprise/update/' + enterprise.id);
The current url when I click the button is http://localhost:8080/#/enterprise/view
and I would like it to be changed to http://localhost:8080/#/enterprise/update/0
(The 0 here represents the id)
The edit function is the one which is called when I click on the button to redirect.
Relevant code:
EnterpriseCtrl.js
app.controller('EnterpriseCtrl', ['$scope', 'Enterprise', '$location','$http','$route','$routeParams','$resource', function($scope, Enterprise, $http, $route, $location, $rootScope) {
$scope.enterprises = Enterprise.list({}, function (response) {
return response;
});
$scope.add = function(){
Enterprise.save($scope.enterprise,function (){});
$scope.enterprise = null;
};
$scope.delete = function(enterprise, index){
alert("Do you really want to delete an Enterprise at index " + (index+1) + "?");
//book.$remove();
Enterprise.remove(enterprise);
$scope.enterprises.splice(index, 1);
};
$scope.edit = function(enterprise){
console.log(enterprise.id);
console.log(location);
console.log($location);
$location.path('/enterprise/update/' + enterprise.id);
};
// $scope.enterprise = Enterprise.get({id: $route.current.params.id});
$scope.update = function(){
Enterprise.update($route.current.params.id);
$location.path($rootScope.history.view);
};
}]);
app.js
var app = angular.module('mpsApp', ['ngRoute','ngResource']);
app.config(['$routeProvider','$locationProvider',
function ($routeProvider,$locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html'
}).
when('/enterprise/view', {
controller: 'EnterpriseCtrl',
templateUrl: 'showEnterprise.html'
}).
when('/enterprise/add', {
controller: 'EnterpriseCtrl',
templateUrl: 'addEnterprise.html'
}).
when('/enterprise/update/:id', {
controller: 'EnterpriseCtrl',
templateUrl: 'updateEnterprise.html'
}).
otherwise({
redirectTo: '/'
});
}
]);
The error that I get is
TypeError: $location.path is not a function
at Scope.$scope.edit (EnterpriseCtrl.js:29)
at $parseFunctionCall (angular.js:12330)
at callback (angular.js:22940)
at Scope.$eval (angular.js:14381)
at Scope.$apply (angular.js:14480)
at HTMLButtonElement.<anonymous> (angular.js:22945)
at HTMLButtonElement.eventHandler (angular.js:3009)
Your dependency injection array/parameters are out of order. Should be:
[ '$scope', 'Enterprise', '$location', '$http', '$route', '$routeParams', '$resource',
function($scope, Enterprise, $location, $http, $route, $routeParams, $resource) {
Note, how each single array element service corresponds to the parameters in the function.
I am having a lot of trouble understanding how stateParams are supposed to work. Everywhere I look suggests that this should pass an item_id of 456 when I travel to the URL /#/manage/456, but instead $stateParams is an empty object. Furthermore, in the $state object that is passed to MainCtrl, I can access all of the parameters by using $state.params, however this seems to be undesirable and hackish.
angular
.module('router',['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state('manage',
{
url: '/manage',
templateUrl: '/templates/main.html',
controller: 'MainCtrl'
})
.state('manage.item_id',
{
url: '/:item_id',
templateUrl: '/templates/main.html',
controller: 'MainCtrl'
})
}])
.controller('MainCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state)
{
// empty object
console.log('$stateParams: ', $stateParams);
// shows the variables i want
console.log('$state.params: ', $state.params);
}])
What you're trying to do should work fine, see this JSFiddle: http://jsfiddle.net/ahchurch/gf7Fa/14/
<script type="text/ng-template" id="item.tpl.html">
embeded item template
</script>
<script type="text/ng-template" id="main.tpl.html">
<ul>
<li>change route</li>
</ul>
<div ui-view></div>
</script>
<div ui-view></div>
angular.module('myApp',['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise("/manage");
$stateProvider
.state('manage',
{
url: '/manage',
templateUrl: 'main.tpl.html',
controller: 'MainCtrl'
})
.state('manage.item_id',
{
url: '/:item_id',
templateUrl:'item.tpl.html',
controller: 'MainCtrl'
})
}])
.controller('mainController', function(){})
.controller('MainCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state)
{
// empty object
console.log("main controller");
console.log($stateParams);
}]);
One thing I noticed is that your template is the same file for both states, so you may just be seeing the initialization of the "manage" state, and never seeing the "manage.item_id" state.
I am currently writing my first application in Angular and have been very much enjoying all the framework has to offer so far. Like most newbies I set off building everything into a main controller, copying the tutorials. I am now seeing the error of my ways and refactoring.
My question is about services holding data that is commonly required among controllers.
I've now taken the data out of the 'main controller' and placed it into a service that I have injected into both controllers requiring access. Now though neither controller sees the functionality I've defined in the new service:
varianceService is not defined
Being new to this approach i welcome all and any help, aswell as help with my current problem, any comments on the best way to apply this approach would also be highly appreciated.
Thanks in advance.
Here is an example of the code:
var app = angular.module(
'VarianceAnalysis', ['ngRoute', 'ngAnimate', 'mgcrea.ngStrap', 'mgcrea.ngStrap.tooltip', 'mgcrea.ngStrap.helpers.dateParser', 'SharedServices']
)
.service('varianceService', function () {
var variances = {};
return {
redirect: function (path) {
$location.path(path);
},
getHttpVariances: function (month1, month2) {
var url = "/Home/GetVariances?month_1=";
url += month1;
url += "&month_2="
url += month2;
url += "&forwardBilling=true"
$http.get(url).success(function (data) {
variances = data;
return data;
});
return {};
},
getVariances: function () {
return variances;
}
};
})
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/MainPage', {
templateUrl: 'mainpage.html',
controller: 'MainPageCtrl'
}).
when('/Variance/:type', {
templateUrl: 'variance.html',
controller: 'VarianceCtrl'
}).
otherwise({
redirectTo: '/MainPage'
});
}])
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', 'varianceService', function ($scope, $http, $location) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
The problems lies in the bracket notation of injecting services in your function..
What you inject in the bracket notation must also be present in the function definition..
e.g.
controller('MyCtrl', ['$scope', '$http', 'varianceService', function($scope, $http, varianceService) {
}]);
so in relation to your code above.. it should be like this..
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', '$http', '$location', 'varianceService', function ($scope, $http, $location, varianceService) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
just as how you have ordered the injected services in your bracket notation, it must also pertain the same order in your function definition.
Change this
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
to
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])