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....
Related
Please see my plunkr here
https://plnkr.co/edit/hk7Z0jMwOfoUwJZ98F7a?p=preview
In my app.js I have two controllers and a routeprovider with a resolve for TestController
var app = angular.module('app', ['ngRoute']);
app.controller('DefaultController', ['$scope', function($scope){
$scope.welcome = "Hello World";
}]);
app.controller('TestController', ['$scope', 'context', '$routeParams', function($scope, context, $routeParams){
$scope.text = "TestController loaded!"
}]);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(){return 'test';}
}
})
}])
In my html, I have an ng-include which should also load test.html in the default view
<body ng-controller="DefaultController">
<h1>{{welcome}}</h1>
<div ng-include="'test.html'" ng-controller='TestController'></div>
</body>
I cannot take the resolve out of the routeProvider as I still need it to when the user goes to '../test'
Is there any way I can resolve contextProvider from the ng-include?
or is there better ways to do this?
Any help would be greatly appreciated.
Create a factory/service and use that:
app.factory('fooResolver', function() {
return {
resolveMe: function() {
return 'test';
}
}
});
Now, use this in your router config:
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(fooResolver) {
return fooResolver.resolveMe();
}
}
})
}])
And do the same in your controller:
app.controller('TestController', ['$scope', 'fooResolver', '$routeParams', function($scope, fooResolver, $routeParams){
$scope.text = "TestController loaded!"
var context = fooResolver.resolveMe();
}]);
When I click on the Home link, the goTo function is executed. However, it redirects me to a blank page like so:
When I click on the browser's back button, it redirects me to the page I wanted to go to (firstPage).
Any suggestions on what I am doing wrong?
HTML:
<footer ng-controller = "footerLink">
Home
About us
Our Team
Blog
Services
Portfolio
Contact
Sitemap
</footer>
JS
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
}).
when('/buttonView', {
templateUrl: 'buttonView/buttonView.html',
controller: 'buttonViewCtrl'
}).
when('/firstPage', {
templateUrl: 'view2/view2.html',
controller: 'footerLink'
}).
when('/home', {
templateUrl: 'view1/view1.html',
controller: 'logo'
});
}])
.controller('footerLink', ['$scope', '$location', function($scope, $location) {
$scope.goTo = function (url) {
$location.path(url);
};
}])
UPDATE
I directly redirected the anchor to the firstPage route instead of calling another function. Here is what I changed to make it work:
<footer ng-controller = "footerLink">
Home
About us
Our Team
Blog
Services
Portfolio
Contact
Sitemap
</footer>
it is because you do not have a redirection rule or a route configuration for '/' you can redirect the user to home if there is no matching route.
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
}).
when('/buttonView', {
templateUrl: 'buttonView/buttonView.html',
controller: 'buttonViewCtrl'
}).
when('/firstPage', {
templateUrl: 'view2/view2.html',
controller: 'footerLink'
}).
when('/home', {
templateUrl: 'view1/view1.html',
controller: 'logo'
}).otherwise({redirectTo: '/home'});
}])
.controller('footerLink', ['$scope', '$location', function($scope, $location) {
$scope.goTo = function (url) {
$location.path(url);
}; // this function is not really required
}]);
and instead of creating another function to redirect user you can use the use the href on html as you are not doing any other processing there except redirecting user.
<footer ng-controller = "footerLink">
Home
About us
Our Team
Blog
Services
Portfolio
Contact
Sitemap
</footer>
HI i m try to show routing and multiple view in my anguar js code but there is not show can u please help me what is the problum and how to solve it.
Please Help me .
My Code it this
HTML File Index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<title>New Page Angular</title>
<script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
App.js Code
var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'phonecatControllers']);
phonecatApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-details.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phone'
});
}
]);
Contrller .js code
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
To complete code is here Plunker
You missed
in your index.html and you've got few spelling errors phones instead of phone ...
please see fixed version here http://plnkr.co/edit/KwxKVgVpZXVEeLVQGBNn?p=preview
var phonecatApp = angular.module('phonecatApp', ['ngRoute']);
phonecatApp.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider.
when('/phones', {
templateUrl: 'phone-list.html',
controller: 'phoneListCtrl'
}).
when('/phone/:phoneId', {
templateUrl: 'phone-detail.html',
controller: 'phoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}
]);
phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('phones.json').success(function(data){
$scope.computers = data;
});
}]);
phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.factory('Greeter', ['$resource',function($resource){
return $resource(
'http://123.com/processor-url.php',{
},{
query: {
method:'GET',
/*params: { myvar: myvarActual },*/
isArray:true
}
}
);
}]);
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
alert($routeParams.myvar);
Greeter.query(function(data) {
$scope.output = data.myvar;
});
}]);
app.controller('homeController', ['$scope', function($scope){
}])
/*Final Config After Loading Everything*/
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/appointments/:myvar', {templateUrl: 'appointments.html', controller: 'appointmentController'});
$routeProvider.when('/home', {templateUrl: 'home.html', controller: 'homeController'});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
</script>
In the above code, seems the controler is not even recognize myvar that was suppose to be included in the routeProvider's myvar. As the alert will show undefined, instead of the actually value of myvar (i.e. .../appointments/1066 ... if so I expect $routeParams.myvar = 1066, and alert($routeParams.myvar) should be 1066
$routeParams is missing from the dependency declaration so currently it's looking for myvar on Greeter which doesn't exist...
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
Should be...
app
.controller('appointmentController', ['$scope', '$routeParams', 'Greeter', function($scope, $routeParams, Greeter){
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.