AngularJS error with nested controllers - javascript

I have diferents controllers in my app.
player.php:
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
player.php have its respective player.js with its .controller running correctly.
Now, I have the menu bar in menu.php, where I use in player.php document, imported with:
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
<?php include('includes/menu.php'); ?>
//here some html code
</body>
</html>
Now, I am trying to create a menu.js without success. I get the next error:
Error: [ng:areq] http://errors.angularjs.org/1.2.25/ng/areq?p0=menu&p1=not%20a%20function%2C%20got%20undefined...
menu.php
<div class="navbar-fixed" ng-controller="menu2">
//some html code
</div>
menu.js:
app.controller('menu2', function($scope) {
$scope.content = '';
});
What am I doing wrong?
Thank you!

The name of the controller inside the HTML and the JS doesn't match.
In html InteractiveController and you named the contoller menu2.
This would fix the problem.
app.controller('InteractiveController', function($scope) {
$scope.content = '';
});

Have u included your menu controller in html page. Its controller name is mismatched and its not included in that page

Related

AngularJS' ng:areq Bad Argument "{controller} is not a function", with textAngular on CodeIgniter

I'm trying to implement a text editor with textAngular in a CodeIgniter view, but it keep returning this error:
angular.js:13424 Error: [ng:areq] Argument 'wysiwygeditor' is not a function, got undefined
http://errors.angularjs.org/1.5.3/ng/areq?p0=wysiwygeditor&p1=not%20a%20function%2C%20got%20undefined
Where 'wysiwygeditor' is the name on ng-controller.
I've found tens of questions about that, and all seems to be caused by the same mistakes:
Unnamed ng-app directive
Omitted second argument on module definition
angular.module('myApp', [])
Version incompatibilities on controller declaration
None of those happens to be the problem, and I'm simply copying a code that already works. It's the demo.html from textAngular-1.5.0. I copy the code to a CodeIgniter view, include all the required libraries, but still get the error. Then I noticed it's happening whenever I declare a controller with Angular JS.
To make a better example:
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js'></script>
<div ng-app="myApp">
<div ng-controller="GreetingController">
{{greeting}}
</div>
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Bom dia!';
}]);
</script>
This code gives that error on CodeIgniter, but if I put it in a simple html file, works normally.
Here is your edited working code...
Dont use editor, Its waste of your time, They are mostly not working , some time its working...
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<body>
<div ng-app="myApp" >
<div ng-controller="GreetingController">
{{greeting}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.greeting= "John";
});
</script>
</body>
</html>
My fault, my project was declaring an ng-app on a parent element, in a template file that I've forgot that existed. Removed this tag, and AngularJS stop returning that error.

Angular error Error: [ng:areq]

I'm new on Angular, I'd like to know what's wrong with my code, because the browser shows me this error: Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=HelloWorldCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
y el codigo es este:
<!doctype html>
<html ng-app>
<head>
<title>Angular Practice</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Angular Practice";
}
</script>
</body>
</html>
Thanks a lot.
Your HelloWorldCtrl isn't defined.
This is because you're not binding it as an angular module with a controller attached.
ng-controller looks for a definition like this:
angular.module('HelloWorldCtrl', [])
.controller('HelloWorldCtrl', function($scope){
$scope.helloMessage = "Angular Practice";
});
That controller also needs to be assigned to the main app, which you need to reference on that ng-app directive, i.e.
<html ng-app="helloWorldApp">
Which should point to a module you create as such:
var helloWorldApp = angular.module('helloWorldApp ', [
'HelloWorldCtrl'
])
Notice, I'm including a 'HelloWorldCtrl' reference as an item for the second parameter on that module definition. This tells angular to load that controller as a resource which you can then reference through that ng-controller directive.
EDIT:
Did a little research on my mention of adding 'HelloWorldCtrl' as an item in the array above and wanted to elaborate a little bit on why my solution is slightly different than the other answer here. The way I've set it up, is such that 'HelloWorldCtrl' is a separate module. In this case you do need to reference it in the way I have. This tells the app module that it depends on the 'HelloWorldCtrl' module. In the answer below mine is binding that controller directly to the app, in which case this isn't necessary.
Steps to make it working,
Add a ng-app directive to your <html> tag
Define your module app in the script below.
Define your controller HelloWorldCtrl as below.
Check this Plunker - http://plnkr.co/edit/w8RWm6nr1WgvhX3BbGUE?p=preview
!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
</head>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
angular.module('app', []);
angular.module('app').controller('HelloWorldCtrl', [ '$scope', function($scope) {
$scope.helloMessage = "Angular Practice";
}]);
</script>
</html>

AngularJS Error: Argument 'FirstCtrl' is not a function, got undefined

I am currently doing the egghead.io AngularJS course and have run into an issue a few others seem to have.
Any solutions I have come across here aren't working for me though.
In the second video the instructor is showing how to connect controllers to ng-apps. I have followed the video exactly, restarted a few times, and tried solutions on here.
I am given the following error console:
In the long list of errors there, I have picked out the first as as saying:
"FirstCtrl' is not a function, got undefined"
Anyone know of a solution?
Was something changed in the Angular spec in regards to assigning controllers, or is this course skipping information?
Code:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Here is your exemple working (Run the exemple ...).
Add you app name.
Declare your controller using angular.controller.
angular.module('myApp', []);
angular.module('myApp').controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Angular App</title>
<link href='https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>You said:</h1>
<h3>{{data.message}}</h3>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
An Angular controller is defined like this :
var app = angular.module('myApp',[]); //Your app
//The controller in the myApp module, first param is the controller's name
//Second is the controller's dependencies
app.controller('FirstCtrl', ['$scope', function($scope) {
//Do whatever you want in this controller
$scope.data.message = 'Hello!';
}]);
Then you bind your controller to the view (your HTML) using the ng-controller attribute.
You're missing the part where you define your controller.
You can definitely have your FirstCtrl be a function. You just need to first define that the FirstCtrl is a controller.
Example:
angular.module("app").controller("FirstCtrl", FirstCtrl);
And then you have your FirstCtrl function:
function FirstCtrl($scope) {
$scope.data = {
message: "Hello"
};
}
You also need to include that file in your html scripts
<script src="mypath/firstctrl.js"></script>
I too was facing problem when defined controller just like a simple JavaScript function and then I downgraded the cdn link version for angular from "1.4.5" to "1.2.28" and it started recognising controller (A simple javascript function). Also you have to include the .js file in which you have created your controller in your html file . Actually they have deprecated the use of simple javascript function as a controller from angular 1.3 version.

AngularJS - importing controllers inside controllers

I have diferents controllers in my webpage, each controller is in a different .php document. Each .php document represents a diferent part of the webpage. (It's similar to spotify).
player.php: (Where the user can play some music with an audio player)
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
panel_admin.php: (where the user can modify its data and some data of the webpage)
<html lang="en" ng-app="decibels-admin">
<body ng-controller="AdminController as AdminCtrl" ng-init="AdminCtrl.sessionCtrl()">
player.php and panel_admin.php have its respective player.js and panel_admin.js with its .controllers running correctly.
player.js:
var decibelsInteractive = angular.module("decibels-interactive", []);
decibelsInteractive.controller('InteractiveController', function ($scope, $log) {
panel_admin.js:
var adminControl = angular.module("decibels-admin", []);
adminControl.controller("AdminController", function($scope){
Now, I have the menu bar in menu.php, where I use in player.php document, imported with:
//player.php
<html ng-app="decibels-interactive" lang="en">
<body ng-controller="InteractiveController as interactCtrl">
<?php include('includes/menu.php'); ?>
//here some html code
</body>
</html>
menu.php: (menu is a menu bar where the user have some options, and it also have its username and logout option)
<div class="navbar-fixed" ng-controller="InteractiveController as menu2">
//some html code
</div>
menu.js:
app.controller('menu2', function($scope) {
$scope.content = '';
});
The problem that I have is that as you can see, I import the document menu.php inside player.php.
I also want to import the menu.php inside panel_admin.php and be able to use some methods that I have in menu.js, so the code that I have in menu.php (ng-controller="") is not correct (or I think so). -Because when I use it in panel_admin.php it will be in conflict with ng-controller name.
Someone told me that I should use services, or that I should define menu in separate module and use it as dependency where I want.
I am new with angularJS so now I'm a little lost. I've been searching information about services and dependencies without success.
I hope to solve this problem and being able to continue programming!
Thank you!

Gracefully error out template variables in Angular JS

When there is a line of code in an Angular application that causes an error, the entire template is broken.
For example, this code (which results in an error when we try to assign a value to foo.bar):
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My App</title>
</head>
<body>
<div class="container" id="home" ng-controller="MainCtrl">
<h1>Message: {{hello_msg}}</h1>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<script>
var myApp = angular.module('myApp', ['myApp.controllers']);
angular.module('myApp.controllers', []).
controller('MainCtrl', ['$scope', function ($scope) {
var hello_msg = 'Hello!';
$scope.hello_msg = hello_msg;
// malformed JS
foo.bar = 'app breaks';
}]);
</script>
</body>
</html>
Completely breaks the page, and it looks like this:
Is there some configuration option that I can add to my Angular app so that the page erorrs out more gracefully? Specifically, the variables in the templates that are wrapped in {{ and }}, do not display them at all if there is an error in the app.
One way to error out more gracefully would be to use:
<div ng-bind-html="hello_msg">
The ugly {{hello_msg}} would not display when the foo.bar breaks the app.
Please check this plunker that proves the point
IMPORTANT NOTE
To use ng-bind-html instead of the curly brackets, you need to include ng-sanitize in your module.

Categories