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/
Related
I want to create an input bar where I can submit zip code that I later use to find pizzerias that deliver to that zip code. Queries aside, I have a problem with sending the zipCode. Any suggestions?
home.html
<div class="bar">
<form ng-submit=submit() ng-controller="zipCodeController">
<p><b>Wpisz kod pocztowy np. 30-069</b></p>
<input type="text" ng-model="text" name="text"/>
</form>
</div>
main.js
app.controller('zipCodeController', ['$scope', $location, function($scope, $location) {
$scope.zipCode = '';
$scope.text = 'Wpisz adres pocztowy np. 30-069';
$scope.submit = function () {
if ($scope.text) {
$scope.zipCode.push(this.text);
$scope.text = '';
}
$location.path('/pizzeriaList/'+$scope.text);
}
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
// Home
.when("/", {templateUrl: "partials/home.html", controller: "PageCtrl"})
// Pages
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"})
.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})
.when("/pizzeriaList", {templateUrl: "partials/pizzeriaList.html", controller: "PageCtr"})
.when("/p/:id", {templateUrl: "partials/pizzeria.html", controller: "PageCtrl"})
.when("/p/:id/:pid", {templateUrl: "partials/addPizza.html", controller: "PageCtrl"})
.when("/cart", {templateUrl: "/partials/cart.html", controller: "PageCtrl"})
.when("/pizzeriaList/:zipCode", {templateUrl: "/partials/pizzeriaList.html", controller: "PizzeriaListCtrl"})
.otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
app.controller('PizzeriaListCtrl', function($scope){
$scope.zipCode = $routeProvider.zipCode;
})
This is what services are for, they can be injected into each component that needs to share data.
app.service('zipCodeService', function() { return { zipCodes:[] }; });
add it to your dependency list in your component
app.controller('zipCodeController', ['$scope', '$location', 'zipCodeService', function($scope, $location, zipCodeService)
and now add zipCode to the service not your scope
zipCodeService.zipCodes.push(this.text);
Any other component you want to access that array from you inject the service and it is the same instance of the array.
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'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 have a tab I want to be activated by a link like this:
http://localhost:8020/client#/content
Therefore I have this list-element:
li ng-show="showContentItemsTab" ng-class="{active: isActive('/content')}">Content</li>
But I also want it to be active when sublinks are called:
http://localhost:8020/client#/content/531443caeb3f95600ef92e3f
Is there a way to apply all sublinks after /content ?
Something like:
li ng-show="showContentItemsTab" ng-class="{active: isActive('/content/*')}">Content</li>
Following the official angular js tutorial, you can set up routing as follows.
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'
});
}]);
The controller will be
var phonecatControllers = angular.module('phonecatControllers',[]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
});
}]);
So your can be fetched by using $routeParams
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