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' });
}])
Related
I downloaded Angular-Express-Bootstrap seed from https://github.com/jimakker/angular-express-bootstrap-seed. I would like to perform routing through angular js which is performed perfectly. But now I am facing some problem on calling 'controller' in controllers.js.
I can call my MyCtrl1 by this way and working perfectly:
function MyCtrl1() {
alert('calling Myctrl1..')
}
MyCtrl1.$inject = [];
But whether I call like this:
var app = angular.module('myApp.controllers', []);
app.controller('MyCtrl1', ['$scope', function($scope) {
$scope.greeting = 'MyCtrl1';
alert('calling'+ $scope.greeting+"..")
}]);
The above controller call back function not working and shows this error: Uncaught Error: [$injector:modulerr] MyCtrl1 is not defined
Routing Config in app.js:
var app = angular.module('myApp', ['myApp.filters','myApp.controllers','myApp.services', 'myApp.directives','ngRoute'])
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider)
{
$routeProvider
.when('/view1', {
templateUrl: 'partial/1',
controller: MyCtrl1
})
$locationProvider.html5Mode(true);
}]);
I don't know why it is not working. Any help would be greatly appreciated.
Finally I got the solution, I missed the quotes to the controller name in $routeProvider
Soln : controller: 'MyCtrl1'
This is my first attempt to create a sample angular application.
In app.js I defined the following -
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
I have created corresponding sample.js for controller, sample.html for template and sampleModel.js for model.
In grunt console, it throws app is not defined in controller and model file
Here is the controller file -
'use strict';
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
All the files are included in index.html and the resources are loading correctly which I checked by chrome developer tool but I can't find the reason why it says app not defined. Is there anything I am missing?
As they are separate files and grunt/jshint will not know that the variable is available in other files. Instead of that it would be a best practice to use it in this way:
Instead use this:
angular.module('myTestApp')
.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
Another general pattern you might have noticed in most the other's code, wrapping the code inside an IIFE.
(function() {
"use strict";
var app = angular.module('myTestApp')
app.controller('SampleCtrl', function ($scope,
$location,
$routeParams,
SampleModel) {
console.log('this is a test controller');
});
})();
In this app will not pollute the global namespace and it's local to that function.
Here if you've noticed, I've not used [] while using angular.module(), it means that we're just getting that module.
So in your app.'s alone, it will be with [] and in other files without []
(function() {
"use strict";
var app = angular.module('myTestApp', ['ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch']);
app.config(function ($routeProvider) {
$routeProvider
.when('sample', {
templateUrl: 'views/sample.html',
controller: 'sampleCtrl'
})
});
})();
If everything else is fine, this line is causing the issue in your code -
app.config(function ($routeProvider) {
routeProvider
you should instead use -
app.config(function ($routeProvider) {
$routeProvider
And yes, if var app is not working, try using
angular.module('myTestApp')
.controller('SampleCtrl',...
I am following a video tutorial on AngularJS. On the part related to $routeProvider, I got an error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective
and no content is displayed. Everything works however on instructor demo.
I noticed that when I substitute my angular libraries:
angular.min.js (v1.2.26)
angular-route.min.js (v1.3.11)
with instructor's older libraries:
angular.min.js (v1.2.9)
angular-route.min.js (v1.2.10)
everything works perfect.
I understand there must have been some updates to the way $routeProvider behaves with newer versions of AngularJS, so I would definitely prefer to follow these. Could anyone help me adapt the current code so that it works with most recent libraries?
my app.js:
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
}]);
and my controllers.js:
var artistControllers = angular.module('artistControllers', []);
artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);
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?
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