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.
Related
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.
retrieving the return is successful but can't seem to get the attributes individually
var myApp = angular.module('myApp', ['ngGrid', 'ngRoute', "ngAnimate", "ngAria", 'ngMaterial']);
myApp.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.
when('/:energyId/:energyChain/:resourceId/:facilityId',
{
templateUrl: '/Content/resourceTemplate.html',
controller: 'detailsController',
resolve: {
SomeData: function ($route) {
return $route.current.params;
}
}
}).
otherwise({
redirectTo: '/param1/param1/param1/param1'
});
}]);
myApp.controller('detailsController', ['$scope', '$routeParams', function ($scope,SomeData, $routeParams) {
//this doesnt work
$scope.statusLabel = SomeData.energyChain;
//but this works $scope.statusLabel = SomeData;
myApp.controller('detailsController', ['$scope','SomeData','$routeParams', function ($scope,SomeData, $routeParams)
wrong sequence of dependency
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 am unable to understand the errors of Angular JS. I am trying to build a factory but it keeps on giving me the following error in firefox console.
Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq?p0=hospitalController&p1=not%20a%20function%2C%20got%20undefined
My Code is
index
<div class="main ng-scope" ng-view="">
partial
<button data-ng-click="ShowStaff()">show</button>
app.js
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
when('/hospital', {
templateUrl: 'partials/hospital.html',
controller: 'hospitalController'
}).
when('/docter', {
templateUrl: 'partials/docters.html',
controller: 'docterController'
}).
when('/details/:itemId', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo: '/hospital'
});
}]);
controller.js
var artistControllers = angular.module('artistControllers', ['ngAnimate']);
artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
// Starting Factory for Doctor and hospital relationship
artistControllers.factory( 'StaffFactory','$http',function(){
var factory = {};
$http.get('js/hospital.json').success(function(data) {
factory.hospitals = data;
//$scope.hospitalOrder = 'name';
});
$http.get('js/docters.json').success(function(data) {
factory.doctors = data;
//$scope.hospitalOrder = 'name';
});
factory.getDocs = function(){
return factory.doctors;
};
factory.getHos= function(){
return factory.hospitals;
};
factory.getStaff = function(){
var result=[];
var endres=[];
angular.forEach(factory.hospitals, function(hospital){
result=[];
angular.forEach(factory.doctors,function(doc){
if(doc.id==hospital.id)
{
result.push(doc);
}
});
endres.push([hospital,result]);
});
return endres;
}
return factory;
});
artistControllers.SimpleController=function($scope,StaffFactory){
$scope.customers=[];
$scope.hospitals=[ ];
$scope.doctors=[];
$scope.staff=[];
init();
function init()
{
$scope.doctors=StaffFactory.getDocs();
$scope.hospitals=StaffFactory.getHos();
}
$scope.ShowStaff = function()
{
$scope.staff=StaffFactory.getStaff();
}
};
// Ending Factory for Doctor and hospital relationship
}]);
In addition to the actual error explained by #dave, if you want eror messages to be more explicit without having to follow a link, you should use angular.js instead of angular.min.js (the minimized one) for your development environment.
If you follow the link in the error, you will see
Argument 'hospitalController' is not a function, got undefined
It sounds like you have in your html somewhere:
ng-controller="hospitalController"
but you haven't created a controller with that name.
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: '/'
});
}]);