I'm building a practice app in Angular using Yeoman. I'm trying to keep my controllers in separate files.
However, when going to my "register" route, it throws an error in Chrome dev tools:
"Error: [ng:areq] Argument 'RegisterCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.6/ng/areq?p0=RegisterCtrl&p1=not%20aNaNunction%2C%20got%20undefined".
Even though it throws an error, I'm still able to visit the register page and see the "hello world" content.
I've looked at:
AngularJS: How do I create controllers in multiple files
How to create separate AngularJS controller files?
But neither helped solve my problem, despite trying some of their recommendations.
Currently, my app is laid out as:
app
...
--scripts
---controllers
-----main.js
-----register.js
---app.js
...
When I move the contents of register.js into Main.js, it no longer throws an error.
App.js looks like this:
angular.module('angYeomanApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Main.js:
angular.module('angYeomanApp')
.controller('MainCtrl', function ($scope) {
});
Register.js:
angular.module('angYeomanApp')
.controller("RegisterCtrl", function ($scope) {
});
Any help would be much appreciated!
Is register.js referenced from index.html?
Related
I am using two app modules in this app. Why do I get this error? I define the navCtrl in my index.html file where ng-view is like this:
<body ng-app="ciscoImaDashboardApp" ng-controller="navCtrl">
Error: [ng:areq] Argument 'navCtrl' is not a function, got undefined
What am I doing wrong? Am I getting this because I define angular.module in all my js files?
Routes JS:
angular.module('ciscoImaDashboardApp', ['ciscoImaDashboardAdmin', 'ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/admin', {
templateUrl: 'views/admin.html'
})
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl'
})
.when('/overall-results', {
templateUrl: 'views/overall.html',
controller: 'overallCtrl'
})
.when('/swim-lane-results', {
templateUrl: 'views/swim-lane.html',
controller: 'swimlaneCtrl'
})
.when('/key-exemplifiers', {
templateUrl: 'views/key-exemplifiers.html',
controller: 'petalCtrl'
})
});
Second Module:
angular.module('ciscoImaDashboardAdmin',[])
.controller('minisCtrl', function ($scope) {
});
Nav JS:
angular.module('ciscoImaDashboardApp',['ciscoImaDashboardAdmin'])
.controller('navCtrl', function($scope, navService, $location, dummyData) {
});
right way :
angular.module('ciscoImaDashboarAdmin')
.controller('minisCtrl', function ($scope) {
});
remove dependency practice in the second time
from angular js documentation you can find below block check the link here
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
So I'm trying to learn how to use Angulars routing, following tutorials online, and I can't seem to figure out where I'm going wrong. I have the following code:
var app = angular.module('gamersplane', ['controllers', 'ngCookies', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList'
}).when('/pms', {
controller: 'pmList'
}).otherwise({
controller: 'pmList'
});
}])
var controllers = angular.module('controllers', []);
controllers.controller('pmList', function ($scope, $cookies, $http, $routeParams) {
console.log($routeParams);
});
However, no matter what I do, the controller doesn't get hit. I have otherwise in the router, so isn't that where it should hit if all else fails?
Yes it will hit otherwise but you can only define the redirect path into it and that redirect path will tell the url and the controller to set for the $route.current :-
redirectTo: '/pms'
Doc
You need to add a template to each route:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList',
template: 'test.html'
}).when('/pms', {
controller: 'pmList',
template: 'test.html'
}).otherwise({
controller: 'pmList',
template: 'test.html'
});
}])
squiroids suggestion regarding otherwise was correct, you won't see a change in your test application though.
Routing is meant to be used to navigate between regions of your application. You could have an app with two routes: pms which shows a list of PMs and pms/:box zu view a particular PM Box. The main task for ngRoute is to replace a placeholder in your application (ng-view) with a given template. Without using a template on the individual routes, your $routeProvider will not navigate as expected.
Given you have two views for the regions (pmBox.html and pmList.html), you could configure your $routeProvider zu setup routing like this: https://gist.github.com/kpko/bd0231ccefbaf8c415c7
I'm new to Angular and cannot figure out how to get a route working inside of phonegap. Here is my Angular code:
var app = angular.module('app', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/main.html',
controller: 'mainControl'
})
$routeProvider.when('/test' , {
templateUrl: 'app/views/test.html',
controller: 'testControl'
})
$routeProvider.otherwise({
redirectTo: '/'
});
});
app.controller('mainControl' , function(){
})
app.controller('testControl' , function(){
})
I'm trying to access '/test' with this link inside of my main.html:
<span>Click <a href='/test'>here</a> to go to the test page<span>
When I click the link inside of ripple I'm getting a 404 in the console for localhost:4400/test/
Like I said I'm new to Angular so from what I can tell both routeProviders match up but I can't get the page to load when clicked through the link.
Help is always appreciated.
I think you need a hashtag before the slash.
<span>Click <a href='#/test'>here</a> to go to the test page<span>
Hope this solves this problem.
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route
I have two moudules:
var app = angular.module('app', ["homeModule"])...
angular.module("homeModule", [])...
and if in web config property "compilation debug="true".." everything works fine.
But when I build the project in release and "compilation debug="false".."
BundleCollection collects all JS files in one I have problem.
In log console i see error
Error: Unknown provider: n from homeModule
My "app" module can not find and connect "homeModule".
What am I doing wrong? How do I properly connect the "homeModule" module ?
I think you have problem with AngularJs and minification in general. When defining dependencies you need to use array notation, for example:
angular.module("app", ["homeModule"])
.controller("UsersController", ["$scope", "usersRepository", function($scope, usersRepository) {
// ...
}]);
or use https://github.com/btford/grunt-ngmin which makes conversion for you.
I found problem in homeModule.config
Worked code:
var app = angular.module('app', ["homeModule"]);
app.config(['$routeProvider', '$locationProvider',function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
angular.module("homeModule", [])
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.when('/', { templateUrl: 'ClientApp/Home/Index.html' });
$routeProvider.when('/home', { templateUrl: 'ClientApp/Home/Index.html' });
}])