The error listed in the title is driving me crazy. Why is angular so picky? What is wrong with my syntax? I'm trying to define a controller & sub controller, with a route.
plunker is here
// Declare app level module which depends on filters, and services
var mmm = angular.module('mdp',['ngRoute', 'mmm.controllers']);
mmm.config(['$routeProvider','$locationProvider','$compileProvider','$httpProvider', function($routeProvider, $locationProvider,$compileProvider,$httpProvider) {
$routeProvider
.when('/', {
redirectTo: '/commission',
controller: 'mmmController'
})
.when('/commission', {
templateUrl: 'form.html',
controller: 'commCtlr'
})
.otherwise({
redirectTo: '/commission'
});
$compileProvider.debugInfoEnabled(false);
$httpProvider.useApplyAsync(true);
}])
angular.module('mmm.controllers',[]);
var mmmControllers = angular.module('mmm.controllers');
mmmControllers.controller('mmmController', ["$scope","$rootScope","$http","$location","$route","$log"],function ($scope,$rootScope, $http,$location,$route,$log) {
});
mdpControllers.controller('commCtlr',["$scope"], function($scope) {
});
You had wrong controller registration, ] was in wrong place.
mmmControllers.controller('mmmController', ["$scope","$rootScope","$http","$location","$route","$log",
function ($scope,$rootScope, $http,$location,$route,$log) {
}]);
mdpControllers.controller('commCtlr',["$scope",
function($scope) {
}]);
Related
I want pass the value to one nerds controller to geek controller but unable to pass in ng-router.
<button type="Submit" ng-click="showUser()">Show Details</button>
.when('/geeks', {
templateUrl: 'views/geek.html',
controller: 'GeekController'
})
.when('/nerds', {
templateUrl: 'views/nerd.html',
controller: 'NerdController'
})
In Nerds controller I have this function
$scope.showUser=function(){
$rootScope.$broadcast('btnName',{message:"msg"})
}
In geek controller I receiving the value on page load itself but i am not getting the value pls help me to find the solution
$rootScope.$on('btnName',function(event,args){
$scope.msg=args.message;
console.log("$scope.message nnnn",$scope.msg)
})
The NerdController and the GeekController are in two separate pages, only one of the controllers can be active at a time, since angular has only one page open in the tab. So what I suggest is, pass the variable as a parameter to the route, you can see this in the example below.
JSFiddle Demo
JS:
var routingExample = angular.module('Example.Routing', []);
routingExample.controller('NerdController', function ($scope, $location) {
$scope.showUser = function(){
console.log("show");
$location.path('/geek/1');
}
});
routingExample.controller('GeekController', function ($scope, $routeParams) {
$scope.id = $routeParams.id;
});
routingExample.config(function ($routeProvider) {
$routeProvider.
when('/nerds', {
templateUrl: 'home.html',
controller: 'NerdController'
}).
when('/geek/:id', {
templateUrl: 'blog.html',
controller: 'GeekController'
}).
otherwise({
redirectTo: '/nerds'
});
});
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);
});
How to pass a fields variable to directive in ng route configuration, Or in another phase?
.when('/test',{template:"<my-directive fields=field></my-directive>"})
How to assign param to directive in routing phase?
Make sure to include your directive when defining the module dependencies:
var app = angular.module('sampleApp', [
'ngRoute',
'myDirective' // here, you need to include your directive module
]);
Then, define your routes:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', { template: "This is the default Route" })
.when('/test', {
template: '<my-directive fields="field"></my-directive>',
controller: 'testController'
})
.otherwise({ redirectTo: '/' });
}]);
And a controller:
app.controller('testController', ['$scope', function($scope) {
$scope.field = { your: "data here" };
}]);
I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?
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: '/'
});
}]);