I'm trying to use AngularJS in my webapp so dynamically create a menu and then populate the page based on the selection. I have created all the components needed, however it seems that since I split out my controllers I'm getting the following error. Any ideas why?
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MenuCtrl&p1=not%20a%20function%2C%20got%20undefined
The code I have is as follows:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myWebApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densitySpi=device-dpi, initial-scal=1.0" />
<link href="css/MainStyles.css" rel="stylesheet" type="text/css" media="screen">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js" type="text/javascript"></script>
<!-- AngularJS Controllers -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/home.js"></script>
<title>
Page Title
</title>
</head>
<body>
<div id="menu_bar" ng-controller="MenuCtrl">
<ul>
<li ng-repeat="menuItem in menuItems">
{{menuItem.name}}
</li>
</ul>
</div>
<div id="page_content">
<div ng-view></div>
</div>
</body>
js/app.js
var myWebApp = angular.module('myWebApp', [
'ngRoute',
'myWebAppControllers'
]);
myWebApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
redirectTo: '/home'
}).
when('/home', {
templateUrl: '/partials/home.html',
controller: 'HomeCtrl'
}).
otherwise({
templateUrl: '/partials/404.html',
});
}]);
js/controllers.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('MenuCtrl', function ($scope, $location) {
$scope.menuItems = [
{
'name': 'Home',
'path': '#/home'
}
];
});
js/controllers/home.js
var myWebAppControllers = angular.module('myWebAppControllers', []);
myWebAppControllers.controller('HomeCtrl', function ($scope, $location) {
$scope.title = "Home"
});
You are defining the same module twice (and by that overriding the first one), once in controllers.js and the other in controllers/home.js. If you want both controllers to be under the same module, you need to define it once with
var myWebAppControllers = angular.module('myWebAppControllers', []);
And in other places only retrieve it:
var myWebAppControllers = angular.module('myWebAppControllers');
Related
I've been learning Angular and now that I have a while learning it I decide to make an small app to test my knowledge, but the links on my app and the nested views doesn't seem to work for a reason I can't understand yet, I've using angular-ui-router because it's pretty awesome to handle routes and that sort of things.
the problem: I'm trying to load the templates of the routes into the div that contains the ui-view but it doesn't work.
I have this three js files:
first config.route.js
'use strict';
angular.module('weekobApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'app/layout/header.html',
},
'content': {
templateUrl : 'app/layout/dashboard.html',
controller : 'DashboardController'
},
'footer': {
templateUrl : 'app/layout/footer.html',
}
}
});
});
dashboard.js
'use strict';
angular.module('weekobApp', [])
.controller('DashboardController', ['$scope', function ($scope) {
$scope.myname = "Dashboard";
}]);
and finally the html file:
<!DOCTYPE html>
<html ng-app="weekobApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- build:css content/styles/style.css -->
<link href="content/styles/style.css" rel="stylesheet" />
<!-- endbuild -->
</head>
<body>
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
<!-- build:js app/main.js -->
<script src="../../bower_components/angular/angular.min.js"></script>
<script src="../../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../../bower_components/angular-resource/angular-resource.min.js"></script>
<!-- Dashboard modules -->
<script src="app/dashboard/config.route.js"></script>
<script src="app/dashboard/dashboard.js"></script>
<!-- endbuild -->
</body>
</html>
You should only declare the module dependency list once:
angular.module('weekobApp', ['ui.router']);
angular.module('weekobApp')
.config(function($stateProvider, $urlRouterProvider) {
angular.module('weekobApp')
.controller('DashboardController', ['$scope', function ($scope) {
The first line creates the module. The other two add components to the module. Your code was overwriting the previous component.
In the code below, the the #test button works, but the #calendarButton does not. There must be some reason that my header.html cannot access my Javascript.
index.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Lifting Analytics </title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class"container" ng-app="app">
<header ng-include="'templates/header.html'"></header>
<div ui-view></div>
</div>
<button id="test">test</button> // This button works
</body>
</html>
header.html (This button doesn't work)
...
<button id="calendarButton" class="btn btn-default">Calendar</button>
...
script.js
$(document).ready(function() {
$('#test').click(function(){
console.log("in");
alert("in");
});
$('#calendarButton').click(function(){
console.log("in");
alert("in");
});
});
app.js (not sure if this is necessary)
Also, how do I refer to this file? the router? Sorry it's my first day with angular.
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html'
})
.state('record', {
url: '/record',
templateUrl: 'templates/record.html'
})
.state('calendar', {
url: '/calendar',
templateUrl: 'templates/calendar.html',
controller: function($scope){
$scope.array = ["item 1", "item 2", "item 3"]
}
})
.state('graph', {
url: '/graph',
templateUrl: 'templates/graph.html'
})
}])
If you're routing using ng-include or ng-route, the elements within those routes don't render until the applicable route is invoked. That's why the calendar button click event isn't being captured - it doesn't exist at the time you're binding..
To get it to work, you could try this..
$('body').on('click', '#calendarButton', function() {...}); //a delegate
Though, I would not recommend doing this, as it is not the "angular" way. What would be better is something like the following..
Within your view..
<button id="calendarButton" ng-click="clickFn()"/>
Within your controller...
$scope.clickFn = function() { ... }
I have this index.html page:
<html>
<head ng-app="myApp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App/title>
<link rel="stylesheet" href="app.css">
</head>
<body ng-controller="mainController">
index2
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
And this is my app.js script:
'use strict';
var myApp = angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/index2', {
templateUrl: 'views/index2.html'
})
.otherwise({redirectTo: '/views/index2.html'});
});
myApp.controller('mainController', function ($scope) {
});
And my views/index2.html is contains only single 123 element.
When I'm clicking link on my index.html, nothing happens, no routing.
What I'm doung wrong?
upd: I run it from IntelliJ IDEA so it's nothing about webserver is missing ,I think.
You have ng-app directive applied to your head tag:
<head ng-app="myApp">
This means that ng-app will apply to head tag only. Instead you need to move it to your html tag:
<html ng-app="myApp">
I'm getting into Angular JS, and am having a bit of a an issue with routes not displaying. Here's the index file:
<!doctype html>
<html lang="en" ng-app="backupApp">
<head>
<meta charset="UTF-8">
<base href="some/subdiretory/">
<script src="//code.angularjs.org/1.2.10/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-resource.min.js"></script>
<script src="//code.angularjs.org/1.2.10/angular-route.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js">
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css">
</head>
<body ng-app="backupApp">
<div ng-view class="view-frame">
</div>
</body>
</html>
And here's my app.js. In one file, as I was debugging:
var backupApp = angular.module('backupApp', [
'ngRoute',
'backupControllers'
]);
backupApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {
controller: 'IndexCtrl'
});
}
]);
backupApp.controller('IndexCtrl', ['$location', '$window',
function($location, $window) {
console.log('hi');
debugger;
if ($window.sessionStorage.loggedin) {
$location.path('/backups');
} else {
$location.path('/login');
}
}
]);
The issue is, no redirection occurs. Not errors are throw. The console.log never displays. I can't figure out what's wrong. Any ideas?
I'm guessing there must be something obvious I have missed, this is the second angular app I am building and I have never had this issue before..
Seems both of my controllers are receiving this error. I have confirmed that controllers.js gets loaded and console.log(angcomControllers) does return an object. Other than that I am lost.
index.html:
<!doctype html>
<html class="no-js" lang="en" data-ng-app="angcomApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<!--Library/Framework JS-->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!--script src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script-->
<!--App JS-->
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-view class="view-frame"></div>
</body>
</html>
app.js
'use strict';
var angcomApp = angular.module('angcomApp',[
'ngResource',
'ngRoute',
'angcomControllers',
'angcomServices',
]);
angcomApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/items', {
templateUrl: 'partials/items.html',
controller: 'itemsController'
}).when('/categories', {
templateUrl: 'partials/categories.html',
controller: 'categoriesController'
});
}]);
controllers.js
var angcomControllers = angular.module('angcomControllers', ['angcomServices']);
angcomControllers.controller('itemsController' ['$scope', 'Items', function($scope, Items) {
}]);
angcomControllers.controller('categoriesController' ['$scope', function($scope) {
}]);
items.html
<div data-ng-controller="itemsController"></div>
If I need to post any more code please let me know, thanks!
You are missing ,:
angcomControllers.controller('itemsController', ['$scope', 'Items', function($scope, Items){
}]);