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
Related
I have the following three angularjs scripts:
/config.js
/authentication/LoginCtrl.js
/authentication/loginFactoyr.js
App ristoreApp is defined in config.js.
//config.js
angular.module('ristoreApp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider, $httpProvider) {
// $httpProvider.responseInterceptors.push('httpInterceptor');
$routeProvider
.when('/login', {
templateUrl: 'authentication/login.html',
controller: 'LoginCtrl'
})
.when('/home', {
templateUrl: 'home.html',
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode(true);
});
My controller calls the app by "angular.module":
angular.module('ristoreApp', [])
.controller('LoginCtrl', ['$scope', '$location', 'loginFactory', function($scope, $location, loginFactory){
$scope.authenticate = function() {
loginFactory.login($scope.username, $scope.password)
.then(function(response) {
console.log(response);
$location.path('/home');
}, function errorCallBack(response) {
console.log(response);
$location.path('login');
});
}
}]);
Got the error "Error: ng:areq Bad Argument"
Argument 'LoginCtrl' is not a function, got undefined
Why does it say my controller is not a function? What did I do wrong?
Try this. Remove the quotes on LoginCtrl.
controller: LoginCtrl
Then, define the controller as:
var LoginCtrl = app.controller("LoginCtrl", ["$scope", function($scope) { /* etc... */}]);
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.
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
In same you can append an component to you module
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
$routeProvider.when('/view2', {
templateUrl: 'view1/view2.html',
controller: 'View2Ctrl'
});
}])
.controller('View1Ctrl', [$scope, function($scope) {
}])
.controller('View2Ctrl', [$scope, function($scope) {
}]);
Other way would be you can just store your module in some variable and do use that variable while appending angular component to angular.module
var app = angular.module('myApp.view1', ['ngRoute'])
app.config(['$routeProvider', function($routeProvider) {
//..code here
}])
app.controller('View1Ctrl', [$scope, function($scope) {
}])
app.controller('View2Ctrl', [$scope, function($scope) {
}]);
More preferred way would be to use IIFE pattern In that case there you wont store any global variable, As IIFE create a closer function that scope ends when function gets end
App.js
function(){
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
//..code here..
}])
}();
View1Ctrl.js
function(){
angular.module('myApp.view1')
.controller('View1Ctrl', [function() {
}]);
}();
View2Ctrl.js
function(){
angular.module('myApp.view1')
.controller('View2Ctrl', [function() {
}]);
}();
I've added another controller declaration, and added it to $routeProvider, see the relevant developer guide page for more info
angular.module('view1', 'view2', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
})
.when('/view2', {
templateUrl: 'view2/view2.html',
controller: 'myController'
})
}])
.controller('View1Ctrl', [function() {
}]);
.controller('myController', [function() {
}]);
note that appending multiple controllers into a single file is not a recommended practice
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 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.