I'm just getting started with Angular and seem to have fallen down at the first hurdle. I wanted to build a simple skeleton app to start with. I pretty much copied the code of the angularjs.org site and am getting an error talking about injection... Sorry to code dump, but I have no clue where the bug is.
<!DOCTYPE html>
<html ng-app="triangular">
<head>
<title>Angular Skeleton</title>
<link rel="stylesheet" href="/style/bootstrap.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.3.0/angular-route-segment.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = angular;
var t = a.module('triangular', ['ngRoute']);
t.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'app/modules/test/partials/partial1.html',
controller: 'Page1Ctrl'
}).
when('/page2', {
templateUrl: 'app/modules/test/partials/partial2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/page1'
});
}]);
t.controller('Page1Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test';
}]);
t.controller('Page2Ctrl', ['$scope', '$http', function($scope, $http)
{
$scope.placeholder = 'Test2';
}]);
</script>
</head>
<body>
<div ng-view=""></div>
</body>
</html>
I'm getting this error: Error: [$injector:modulerr].
The link it's providing isn't that useful. It told me to include the route segment js file, which I did, but the error persisted.
try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-route.min.js" type="text/javascript"></script>
to your head right below where you include angular. I had a similar issue and this fixed it right away.
Related
I'm working on my first app. When I open it in the webbrowser I get this error: Uncaught ReferenceError: controller is not defined
at app.js:3
at app.js:15
I got this error after I created the app.js file and tried to link my controller.js to it. Also the routeProvider doesn't seem to work yet. And my placeholders stopt working, which did work before.
I simplified my code to keep it readable. I've got more html files and use bootstrap in combination with JQuery and CSS. Does someone know what's going wrong here?
app.js
(function(){
var myApp = angular.module('myApp', ['ngRoute']).controller('controller', controller)
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: '../main.html',
controller: 'controller'
})
.otherwise({redirectTo: '../main'});
});
})();
controller.js
(function() {
angular.module('controller', ['ngRoute'])
.controller('controller', ['$scope', function ($scope) {
}]);
})();
index.html
<!DOCTYPE html>
<html data-ng-app = "myApp">
<head>
<meta charset="utf-8"/>
<title> Who Brings What </title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
/*more code here */
</nav>
</div>
<div data-ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular- route.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular- route.js"> </script>-->
<script src = "../controller.js"></script>
<script src = "../app.js"></script>
</body>
</html>
main.html
<div>
Main Body
</div>
There are few issues with your code,
(i)Since you have defined controller separately in a single file, you can safely remove it from the initial module.
function(){
var myApp = angular.module('myApp',['ngRoute'])
myApp.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/main', {
templateUrl: './main.html',
controller: 'controller'
})
.otherwise({redirectTo: '/main'});
});
})();
(ii) You do not need to have ngRoute injected twice, You can just use the globally declared module
(function() {
app.controller('controller', ['$scope', function ($scope) {
}]);
})();
DEMO
So I've been looking at this for way too long. Really hope someone could help me out :) I'm just trying to create a module that creates a directive and controller for my site header in AngularJS. I don't get any error and the log in my code won't show up. This is the code related to the header module:
header/header.js
'use strict';
angular.module('myApp.header', [])
.directive("headerBar", [function(){
return {
restric: "E",
templateUrl: "header/header.html",
controller: 'HeaderCtrl'
};
}])
.controller('HeaderCtrl', ['$log', function($log) {
$log.log('test header controller');
}]);
app.js
angular.module('myApp', [
'ngRoute',
'myApp.header'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
index.html
<script src="header/header.js"></script>
<header-bar></header-bar>
I see a typo on your directive definition:
Should be restrict: "E", you're currently missing the 't'
You need to call the app.js and angular.js reference scripts in your index page
Some think like below
//Jquery Scripts
//Angular.js library scripts
<script src="header/header.js"></script>
**<script src="app.js"></script>**// Please refer here your app.js script
<header-bar></header-bar>
This works for me.Please check that you are including all files.
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="header/header.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp.header" ng-controller="HeaderCtrl">
<header-bar></header-bar>
</body>
</html>
I am new to Angular and learned the basics about it recently.
In my current project, I am developing a single page application. As of now, my HTML/JS setup is as per below:
HTML:
<body>
<ng-include src='"src/includes/home.html"'></ng-include>
<!-- home.html is the HTML template with static data -->
</body>
app.js:
'use strict';
var app = angular.module('MyApp',['home']);
angular
.module('home', [])
.directive('homeDir', function(){
return {
replace: true,
restrict: 'E',
templateUrl: 'src/includes/home.html'
};
});
This code is working fine but I would like to introduce routing to have better control over the pages, instead of using ng-include.
So now, my HTML looks the same and I actually dont know what to change in it while using routing.
My app.js now looks like this:
'use strict';
var app = angular.module('MyApp',['home']);
// trying to introduce routing:
angular
.module('home', ['ngResource', 'ngRoute'])
.config(['$routeProvider', '$locationProvider'],
function($routeProvider, $locationProvider){
$routeProvider.
when('/', {
templateUrl: 'src/includes/home.html',
controller: 'homeCtrl'
}).
when('/drawer', {
redirectTo: 'src/includes/home.html#drawer',
controller: 'drawerCtrl'
})
.otherwise({
redirectTo: '/'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}
);
app.controller('homeCtrl', function($scope){
$scope.message = "some message";
console.log("homeCtrl called");
});
app.controller('drawerCtrl', function($scope){
$scope.message = "some other message";
console.log("drawerCtrl called");
});
However, I am getting an error:
Error: error:modulerr
Module Error
As per the link following the error:
This error occurs when a module fails to load due to some exception.
Why is it not loading? What am I missing? What should I change the HTML to?
UPDATE:
After including angular-route.min.js, I am getting the error:
Error: whole is undefined
beginsWith#file:///D:/projects/svn/trunk/src/libs/angular.js:8729:1
LocationHtml5Url/this.$$parse#file:///D:/projects/svn/trunk/src/libs/angular.js:8772:9
$LocationProvider/this.$get<#file:///D:/projects/svn/trunk/src/libs/angular.js:9269:5
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3752:1
registerDirective/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:5316:21
forEach#file:///D:/projects/svn/trunk/src/libs/angular.js:322:7
registerDirective/<#file:///D:/projects/svn/trunk/src/libs/angular.js:5314:13
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
createInjector/instanceCache.$injector<#file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13
getService#file:///D:/projects/svn/trunk/src/libs/angular.js:3725:11
addDirective#file:///D:/projects/svn/trunk/src/libs/angular.js:6363:28
collectDirectives#file:///D:/projects/svn/trunk/src/libs/angular.js:5801:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5666:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compileNodes#file:///D:/projects/svn/trunk/src/libs/angular.js:5682:1
compile#file:///D:/projects/svn/trunk/src/libs/angular.js:5603:1
bootstrap/doBootstrap/</<#file:///D:/projects/svn/trunk/src/libs/angular.js:1343:11
$RootScopeProvider/this.$get</Scope.prototype.$eval#file:///D:/projects/svn/trunk/src/libs/angular.js:12077:9
$RootScopeProvider/this.$get</Scope.prototype.$apply#file:///D:/projects/svn/trunk/src/libs/angular.js:12175:11
bootstrap/doBootstrap/<#file:///D:/projects/svn/trunk/src/libs/angular.js:1341:9
invoke#file:///D:/projects/svn/trunk/src/libs/angular.js:3762:7
bootstrap/doBootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1340:8
bootstrap#file:///D:/projects/svn/trunk/src/libs/angular.js:1353:5
angularInit#file:///D:/projects/svn/trunk/src/libs/angular.js:1301:37
#file:///D:/projects/svn/trunk/src/libs/angular.js:21050:5
jQuery.Callbacks/fire#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1037:1
jQuery.Callbacks/self.fireWith#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1148:7
.ready#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:433:38
completed#file:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:103:4
file:///D:/projects/svn/trunk/src/libs/angular.js
Line 9511
Edit:
Here are my HTML imports:
<head>
<title></title>
<!-- External libraries -->
<link rel="stylesheet" type="text/css" href="src/css/font-awesome-4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="src/css/headers.css">
<link rel="stylesheet" type="text/css" href="src/css/drawer.css">
<link rel="stylesheet" type="text/css" href="src/css/custom.css">
<script type="text/javascript" src="src/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="src/libs/bootstrap.min.js"></script>
<script type="text/javascript" src="src/libs/angular.js"></script>
<script type="text/javascript" src="src/libs/angular-resource.js"></script>
<script type="text/javascript" src="src/libs/angular-ui-router.js"></script>
<script type="text/javascript" src="src/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="src/libs/angular-pull-to-refresh.js"></script>
<script type="text/javascript" src="src/libs/nprogress.js"></script>
<script type="text/javascript" src="src/libs/ng-modal.js"></script>
<script type="text/javascript" src="src/libs/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.core.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.utils.js"></script>
<script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.slider.js"></script>
<script type="text/javascript" src="src/js/app.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
Config section is incorrect. Instead of
.config(['$routeProvider', '$locationProvider'], function($routeProvider, $locationProvider) { ... });
it should be
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { ... }]);
Note, that function definition belongs to array object.
Another mistake is in redirectTo property of the drawer route, currently it doesn't make sense. You want probably this instead:
.when('/drawer', {
templateUrl: 'src/includes/drawer.html',
controller: 'drawerCtrl'
})
Ensue that you have added the angular-route.js file to the html file.
And you are missing the ngRoute module here -
var app = angular.module('MyApp',['ngRoute','ngResource' ]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){... }]);
dfsq is correct. There are syntax errors in the code.
I have a problem I have this piece of code:
index.html:
<!doctype html>
<html lang="nl" ng-app="tradePlace">
<head>
<meta charset="utf-8">
<link href="./helpers/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./helpers/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css">
<link href="./helpers/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<script type="text/javascript" src="./includes/routes/routes.js"></script>
<script type="text/javascript" src="./includes/services/loginService.js"></script>
<script type="text/javascript" src="./includes/controllers/indexCntrl.js"></script>
</head>
<body ng-view></body>
</html>
Routes.js:
var app = angular.module('tradePlace', ['ngRoute', 'tradeCntrls']);
app.config(['$routeProvider', '$locationProvider', function($route, $location) {
$route.
when('/', {
redirectTo: '/index'
}).
when('/index', {
templateUrl: './includes/templates/index.html',
controller: 'indexCntrl'
}).
when('/register', {
templateUrl: './includes/templates/register.php',
controller: 'indexCntrl'
}).
otherwise({
redirectTo: '/index'
});
$location.html5Mode(true);
}])
indexCtrnl.js:
var app = angular.module('tradeCntrls', []);
app.controller('indexCntrl', ['$scope' , 'loginService', function($scope, login){
$scope.login = function() {
}
}])
loginService.js
app.factory('loginService', ['', function(){
return function login(){
};
}])
So, I get this error:
Error: $injector:unpr Unknown Provider
The error page on the AngularJS docs says:
This error results from the $injector being unable to resolve a
required dependency. To fix this, make sure the dependency is defined
and spelled correctly
Well, I`m sure is spelled correctly and it should be defined. I have already tried to put a getter in the loginServices.js to get the tradePlace module and also tried to use a getter with the tradePlaceCntrls module but I still get the error.
I don`t know how to fix this.
Not sure if this is it but have you tried defining your factory like this?
app.factory('loginService', function(){
return function login(){
};
});
You don't need the array as your login service doesn't have any dependencies. That '' might be causing your issue. Try removing the array as it is not necessary in this case.
Also, you could define your login service as a service:
app.service('loginService', function(){
return function login(){
};
});
I'm trying to put together a basic angularjs web page through django (but not really using django for this example). I tried to copy an example exactly, but it's not working. The partial and the controller are not loading. The url is updated, so I know the app is loading. But I don't see it hitting my web server at all for the partial or the data. Help would be appreciated.
Here is the simplest code I could put together.
test.html:
<!doctype html>
<html ng-app="ciqApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
</head>
<body>
TEST
<div ng-view>
</div>
</body>
</html>
js/app.js
var ciqApp = angular.module('ciqApp', [
'ngRoute',
'ciqControllers'
]);
ciqApp.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/questions', {
templateURL: '/static/partials/question-list.html',
controller: 'QuestionListCtrl'
}).
otherwise({
redirectTo: '/questions'
});
}]);
js/controllers.js
var ciqControllers = angular.module('ciqControllers', []);
ciqControllers.controller('QuestionListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('/get_questions').success(function(data) {
$scope.questions = data;
});
}]);
TemplateURL should be TemplateUrl. Also, you can try to remove the first slash from your templateUrl path and see if that makes a difference: So:
templateURL: '/static/partials/question-list.html',
becomes:
templateUrl: 'static/partials/question-list.html',