I've tried multiple solutions found on SO but I'm obviously missing something fundamental as no matter what I try I cannot get the particle view to change on submission of a form (or click of a button).
Here's the code:
propertyControllers.controller('HomeCtrl', ['$scope', 'SearchData', '$location',
function($scope, SearchData, $routeParams, $location) {
SearchData.set('postcode', $scope.postcode);
SearchData.set('radius', $scope.radius);
SearchData.set('minBeds', $scope.minBeds);
SearchData.set('minPrice', $scope.minPrice);
$scope.submit = function() {
$location.path('/properties');
}
}]);
And in the home.html partial
<input type="submit" class="topcoat-button--cta" value="Search">
My routing config
var propertyApp = angular.module('propertyApp', [
'ngResource',
'ngRoute',
'propertyControllers'
]);
propertyApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/properties', {
templateUrl: 'partials/property-list.html',
controller: 'PropertyListCtrl'
}).
when('/properties/:propertyId', {
templateUrl: 'partials/property-detail.html',
controller: 'PropertyDetailCtrl'
}).
otherwise({
redirectTo: 'home'
});
}]);
Could someone point me in the right direction? The docs seem overly complex and all the simple examples I've found do what I'm doing...
The parameters in string form and the actual parameters don't match:
controller('HomeCtrl', ['$scope', 'SearchData', '$location',
function($scope, SearchData, $routeParams, $location)
You forgot to add '$routeParams' in the array, before '$location'.
Related
I have url like this:
http://localhost:3000/details/59567bc1de7ddb2d5feff262
and I want to get the parameter id
59567bc1de7ddb2d5feff262
But for some reasons routeParam always returns undefined
My controller is:
task.controller('ctrla', function($rootScope, $scope, $http, $timeout, $routeParams){
$scope.first = 1;
console.log($routeParams);
});
routes :
task.config(function ($routeProvider, $locationProvider){
$routeProvider.when('/details/:id', {
templateUrl: "details.html",
controller: "ctrla"
})
});
any help will be a life save.
Make sure you have defined the route urls as mentioned below,
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
template: "HI this is home Screen",
controller: 'ctrla'
})
.when('/details/:id', {
templateUrl: "template.html",
controller: 'profileController'
})
.otherwise({
redirectTo: '/home'
})
}]);
DEMO
If yu have route deinition defined as
$routeProvider.when('/details/:id', {
templateUrl: "partial.html",
controller: "ctrla"
})
Then in controller you should get its value as
task.controller('ctrla', function($rootScope, $scope, $http, $timeout, $routeParams){
$scope.first = 1;
console.log($routeParams.id);
});
I have the following div in my index.html, whose controller is MainCtrl. This is the div used to load views from different controllers.
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
And these are my controllers:
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).
when('/about', {
templateUrl: 'views/about.html',
controller: 'MainCtrl'
}).
when('/services', {
templateUrl: 'views/services.html',
controller: 'ServicesCtrl'
}).
when('/contact', {
templateUrl: 'views/contact.html',
controller: 'ContactCtrl'
}).
otherwise({redirectTo: '/main'})
}])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('data/services.json').then(function(response){
$scope.services = response.data;
});
}])
.controller('ServicesCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('data/services.json').then(function(response){
$scope.services = response.data;
});
}])
.controller('ContactCtrl', ['$scope', '$http', function($scope, $http) {
$http.get('data/locations.json').then(function(response){
$scope.locations = response.data;
});
}]);
It all works fine, but I do not understand how do all the views from different controllers get loaded automatically inside the <div ng-controller="MainCtrl"> ?
So for example if I go to mysite/services, it loads services.html, even though its controller is ServicesCtrl.
It seems logical to me that it should only load the view from MainCtrl, which is main.html and about.html, yet it loads them all irrespective of controller names, how come?
There shouldn't be an ng-controller="MainCtrl" because the controllers for each route are defined in your routing configuration.
If you have this in your page then when about or main load you will actually initialize 2 instances of MainCtrl. One instance will be invoked by the router and the other by ng-controller and this can be problematic.
That being said you could have an outer controller but it wouldn't be the same as the ones used in the routes
I'm new to angular and I'm trying to modularlize my app.
My main module gets some other module and I want to use the controller of the injected module in my route definition.
Some simple example would be very helpful!
This does not work:
var app = angular.module('Contacting_App', ['LeadLookup']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main',
{controller: 'MainCtrl',
templateUrl: 'apex/f42_Contacting_Main'}
).
when('/lead',
{module: 'LeadLookup',
controller: 'LeadLkpCtrl',
templateUrl: 'apex/f42_Lead_Lookup'}
).
otherwise(
{redirectTo: '/main'}
);
}]);
This tutorial page may point you in the correct direction docs.angularjs.org/tutorial/step_07
The main things you should look at are:
Module
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
routeProvider
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Controllers
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);
I've been struggling with using ng-view for my subview of my application. I've followed multiple tutorials and have even checked the routeProvider and locationProvider attributes to ensure that they were pointing to the correct path.
index.html
<html ng-app="elephantApp">
...
<div id="view" ng-view>{{$scope.message}}</div>
...
</html>
application.js
/*
Main AngularJS for Elephant Blog App
*/
var elephantApp = angular.module("elephantApp", ["ngRoute", "ui.bootstrap"]);
elephantApp.config(function ($routeProvider, $locationProvider){
$routeProvider
// Home
.when('/', {
templateUrl: "app/partials/home.html",
controller: "ElephantController"
})
.when('/about', {
templateUrl: 'partials/about.html',
controller: 'PageCtrl'
}) ;
$locationProvider
.html5Mode(true);
});
elephantApp.controller("ElephantController", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.message = {message: "Hi"};
});
elephantApp.controller("PageCtrl", function($scope, $route, $routeParams, $location){
$scope.contentClass = 'content';
$scope.model = {message: "Hey!"};
});
/*
function ElephantController($scope, $route, $routeParams, $location){
$scope.contentClass = 'content-home';
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.model = {message: "Hey"};
}
*/
So I have no idea what's going on at all.
I have even tried to do code like:
// Pages
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
.when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"})
.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
// Blog
.when("/blog", {templateUrl: "partials/blog.html", controller: "BlogCtrl"})
.when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"})
// else 404
.otherwise("/404", {
templateUrl: "partials/404.html",
controller: "PageCtrl"
});
I would like to use the above code as it is what I mainly want to do. Though it isn't working. The ng-includes work but not my ng-views. Am I missing something?
Thanks.
By default, a route in angular is the hash in the URI path after #, for example http://app/#/about. By setting $locationProvider.html5Mode to true how you done, we can write without # http://app/about, but need that server always returning index.html. For this purposes you can use, for example, Express server: http://www.seankenny.me/blog/2013/08/05/angularjs-in-html5-mode-with-expressjs/
this is my app.js
var cricketapp = angular.module('cricketapp', ['ngCookies']).
config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){
$routeProvider.
when('/', {
templateUrl: '/partials/games-pending-entry.html',
controller: HomeCtrl
}).
when('game/:gameId',{
templateUrl: 'partials/shortlist.html',
controller: ShortlistCtrl
}).
otherwise({redirectTo: '/'});
//$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
}]);
and controllers.js
function HomeCtrl($scope, $http){
$http.get('/api/games-pending-entry').success(function(data){
$scope.games_pending_entry = data;
});
}
function ShortlistCtrl($scope, $http, $routeParams){
$scope.gameId = $routeParams.gameId;
$http.get('api/get-players').success(function(data){
$scope.players = data;
})
}
and in my html, i am calling the link as
<a class='btn btn-warning' href='#/game/{{ game.id }}'>Enter Shortlist</a>
when i click on this link, i am redirected back to /#/
where am i going wrong?
Your $routeProvider rules are wrong:
when('game/:gameId',{
should become
when('/game/:gameId',{
As the route isn't recognized, it redirects to '/'. Changing that will most likely solve the problem.
Also, you may find ngHref useful, to avoid having links broken, before the {{model}} bindings resolved: http://docs.angularjs.org/api/ng.directive:ngHref