All symbols like(.,)are displayed as question mar in angular data binding from json please help me to fix this issuethis is the json file
preview in browser
//html
< p ng - bind - html = "servicesDetails[WhichItem].descriptions" > < /p>
//controller
var MaalimServicesData = angular.module('MaalimServicesData', ["ngSanitize"]);
MaalimServicesData.controller('MaalimServicesController', ['$scope', '$http', function($scope, $http) {
$http.get('views/services.json').success(function(data) {
$scope.servicesDetails = data;
});
}]);
MaalimServicesData.controller('MaalimRoutecontroller', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
$http.get('views/services.json').success(function(data) {
$scope.servicesDetails = data;
$scope.WhichItem = $routeParams.itemId;
});
}]);
//app.js
var Maalim_web = angular.module('Maalim_web', ['ngRoute', 'MaalimServicesData']);
Maalim_web.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/services', {
templateUrl: 'views/services.html',
controller: 'MaalimServicesController'
}).
when('/details/:itemId', {
templateUrl: 'views/more.html',
controller: 'MaalimRoutecontroller'
}).
otherwise({
redirectTo: '/services'
});
}
]);
//route for peoples
Maalim_web.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/peoples', {
templateUrl: 'views/people.html',
controller: 'MaalimpeopleDataController'
}).
when('/people_details/:itemId', {
templateUrl: 'views/people_details.html',
controller: 'MaalimPeopleRouteController'
}).
otherwise({
redirectTo: '/peoples'
});
}]);
I am very new in angular.Please help me to fix this issue please see the image for more info.
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'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'm getting the classic "Module 'ngLocale' error is not available" error when angular tries to load up my module. I can't for the life of me figure out what dependency I am missing. Here's my app.js:
(function() {
var app, dependencies;
dependencies = ["ngRoute"];
app = angular.module('myapp', dependencies);
app.run(['$location', '$rootScope'], function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
$rootScope.title = current.$$route.title;
});
});
app.config(['$routeProvider'], function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'Content/views/home.html',
controller: 'homeController',
title: 'Home'
}).otherwise({
redirectTo: '/'
});
});
}).call(this);
My javascript files are loaded correctly in order. What am I missing?
you have to include the function in the array:
app.run(['$location', '$rootScope', function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
$rootScope.title = current.$$route.title;
});
}]);
and:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'Content/views/home.html',
controller: 'homeController',
title: 'Home'
}).otherwise({
redirectTo: '/'
});
}]);
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
I have Probleme with the Controller. Can you help me with this code? I have the Plugin of the Site: http://jtrussell.github.io/angular-snap.js/ the first module does not work :/
I would like to include this code of "MainCtrl" in the controller:
var roomcatApp = angular.module('roomcatApp', [
'ngRoute',
'roomcatControllers',
'roomcatFilters',
'roomcatServices'
]);
roomcatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/rooms', {
templateUrl: 'partials/room-list.html',
controller: 'RoomListCtrl'
}).
when('/rooms/:roomId', {
templateUrl: 'partials/room-detail.html',
controller: 'RoomDetailCtrl'
}).
when('/rooms/:roomId/map', {
templateUrl: 'partials/room-list.html',
controller: 'MapCtrl'
}).
otherwise({
redirectTo: '/rooms'
});
}]);
angular.module('roomcatApp', ['snap'])
.controller('MainCtrl', function ($scope) {
$scope.snapOpts = {
disable: 'right'
};
});
or do I add this part here?
var roomcatControllers = angular.module('roomcatControllers', []);
roomcatControllers.controller('RoomListCtrl', ['$scope', 'Room',
function($scope, Room) {
$scope.rooms = Room.query();
$scope.orderProp = 'age';
}]);
roomcatControllers.controller('RoomDetailCtrl', ['$scope', '$routeParams', 'Room',
function($scope, $routeParams, Room) {
$scope.room = Room.get({roomId: $routeParams.roomId}, function(room) {
$scope.mainImageUrl = room.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}]);
roomcatControllers.controller('MapCtrl', ['$scope', '$routeParams', 'Room',
function($scope, $routeParams, Room) {
$scope.rooms = Room.query();
$scope.room = Room.get({roomId: $routeParams.roomId}, function(room) {
$scope.mainImageUrl = room.images[0];
});
}]);
It seems, you forgot to include angular-snap.js.
It is specified as a dependency in your roomcatApp module:
angular.module('roomcatApp', ['snap'])
But it is not present in your index.html file. Should be included before your app.js and after angular.js
Also, you should include js/app.js after js/directives, js/controllers, js/filters, js/services.