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: '/'
});
}]);
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 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.
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 the below code. When I run my unit tests, I get that the resolve function is not code covered.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {
controller: 'HomeCtrl',
resolve: {
homePage: function (homePageLoader) {
return homePageLoader();
}
},
templateUrl: 'views/home.html'
}).
otherwise({ redirectTo: '/' });
}]);
How do I write unit tests for the resolve function?
I had a smilar situation with my app.js with routeprovider & resolve. This was solved with below:
app.js
var appModule = angular.module('myApp',['ngRoute'])
.config(['$httpProvider', '$routeProvider', '$locationProvider', '$translateProvider', function ($httpProvider, $routeProvider, $locationProvider, $translateProvider) {
$locationProvider.html5Mode(true)
$routeProvider
.when('/services/main', {templateUrl: '/services/main/html/main.html', controller: 'MainCtrl', resolve: {
myVar: function (varService) {
return varService.invokeService();
}
}})
}])
Spec file
describe("Unit Testing: config - ", function() {
var appModule;
var mockService;
beforeEach(function() {
appModule = angular.mock.module("myApp");
});
it('should test routeProvider resolve', function() {
mockService = {
invokeService: jasmine.createSpy('invokeService').andReturn('myVar')
};
module(function($provide){
$provide.value('varService', mockService);
});
inject(function($route, $location, $rootScope, $httpBackend) {
$httpBackend.expectGET('/services/main/html/main.html').respond({});
$location.path('/services/main');
$rootScope.$digest();
expect($route.current).toBeDefined();
});
});
});
this ensures the coverage for the resolve.