I have an angular js sample code, that is working nice on my localhost:
<span ng-bind="formData.name"></span>
but the expressions like this:
{{ 5 + 5 }}
or
The name is: {{ formData.name }}
NOT. What is the probleme here? I just copied this from the W3 site:
https://www.w3schools.com/angular/default.asp
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formData = {"name":"asd", "mail":"mail", "message":"msg"};
...
Is it a probleme when I using JQUERY vs ANGULAR JS in one html file?
I am using Jekyll
Either Angular is not bootstrapped properly or your html is not contained within a tag that has an angular module or controller associated with it. It may be because it's not loading for a variety of reasons such as a typo or invalid path to angular. You may be missing the ng-app="" on your first div. There are far better resources for angular than w3schools.com.
Guys I think I got the solution:
http://alwayscoding.ca/momentos/2013/10/09/angular-and-liquid-expressions-in-jekyll/
app.config([
'$interpolateProvider', function($interpolateProvider) {
return $interpolateProvider.startSymbol('{(').endSymbol(')}');
}
]);
I'm a noob to single page applications, Foundation for Apps (F4A), and Angular.js. This is the first time I've tried to add an Angular module to the framework and while it seems easy something isn't working. The problem is the Angular part of the html is displayed on the rendered page
{{ user.name || "empty" }}.
However, that isn't happening for the directives from F4A. They are not visible on the page. I haven't coded the controllers yet, just laying out the html. This module is for user inline editing of pages such as profiles so I don't have to have one profile page for data entry and another for display.
Help figuring this out would be deeply appreciated! Also, I could not find related guidance anywhere on the Web and I can't be the first person to screw this up.
I'm following the Getting Started instructions here.
1) The Bower installation went well and the module now lives in /bower-components/xeditable.
2) I've inserted the suggested css link in the index.html header.
3) I inserted the suggested js script in the header but also tried near the top of the Gulpfile where I think it should be:
// These files include Foundation for Apps and its dependencies
foundationJS: [
'bower_components/*', //add a bunch more like this.
//Angular-xeditable module
'bower_components/angular-xeditable/dist/js/xeditable.js'
],
4) This bit is already in Zurb's index.html at the top:
<html ng-app="app">
5) The instructions tell me to do this:
var app = angular.module("app", ["xeditable"]);
However, I put it at the top of app.js:
(function() {
'use strict';
angular.module('pfApp', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations',
//angular-xeditable directive
'xeditable'
])
6) Step 6 wants this code in a template so I put it in a template that already has Angular {{ }} that isn't causing a problem:
<div ng-controller="Ctrl">
{{ user.name || "empty" }}
</div>
7) Lastly, I copied this controller into app.js:
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
};
});
I found a coder on Upwork.com, Natalya Ivanyak, who got this to work. I've shown only the key parts as an example, not the whole form.
In projects-profile.html partial:
<form editable-form name="addProjectForm" novalidate ng-controller="projectFormCtrl">
<div class="small-12 columns">
<a href="" ng-click="$form.$show()" e-placeholder="Describe the project in one or two short paragraphs." editable-textarea="project.description" e-name="description" e-rows="40" e-cols="40">
<pre class="textarea-field">{{project.description || 'Describe the project in one or two short paragraphs.'}}</pre>
</a>
</div>
In controllers.js:
angular.module('pfApp').controller('projectFormCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.project = {
pitch: '',
description: '',
whatEverElseYouWant: ''
};
Hope this helps someone!!
Consider the piece of code below:
part of html file:
<body ng-app>
<div ng-controller="MainCtrl">{{name}}</div>
</body>
part of js file:
function MainCtrl($scope) {
$scope.name = "John";
}
I always put my controllers in some module, whose name I define in ng-app. How it works when I don't define any module ?
I just started with angular js and faced the above scenerio.
Declare your app in the DOM with a name:
<html ng-app="myApp">
Next, register your app as a module in your JavaScript:
angular.module("myApp", []);
Note the array as the 2nd argument; this means you're registering a new module, rather than accessing a previously defined module.
Finally, register your controller(s) onto your app:
angular.module("myApp")
.controller("MyCtrl", ["$scope", function($scope) {
// controller code goes here
}]);
Note the lack of the 2nd argument this time, as you're getting the previously defined myApp module.
Your question is answered in the 2nd step of the Angular tutorial. If you're new to Angular, I suggest you start here (at step_00).
I am writing a sample application using angularjs. i got an error mentioned below on chrome browser.
Error is
Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined
Which renders as
Argument 'ContactController' is not a function, got undefined
Code
<!DOCTYPE html>
<html ng-app>
<head>
<script src="../angular.min.js"></script>
<script type="text/javascript">
function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}
</script>
</head>
<body>
<h1> modules sample </h1>
<div ng-controller="ContactController">
Email:<input type="text" ng-model="newcontact">
<button ng-click="add()">Add</button>
<h2> Contacts </h2>
<ul>
<li ng-repeat="contact in contacts"> {{contact}} </li>
</ul>
</div>
</body>
</html>
With Angular 1.3+ you can no longer use global controller declaration on the global scope (Without explicit registration). You would need to register the controller using module.controller syntax.
Example:-
angular.module('app', [])
.controller('ContactController', ['$scope', function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}]);
or
function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);
It is a breaking change but it can be turned off to use globals by using allowGlobals.
Example:-
angular.module('app')
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Here is the comment from Angular source:-
check if a controller with given name is registered via $controllerProvider
check if evaluating the string on the current scope returns a constructor
if $controllerProvider#allowGlobals, check window[constructor] on the global window object (not recommended)
.....
expression = controllers.hasOwnProperty(constructor)
? controllers[constructor]
: getter(locals.$scope, constructor, true) ||
(globals ? getter($window, constructor, true) : undefined);
Some additional checks:-
Do Make sure to put the appname in ng-app directive on your angular root element (eg:- html) as well. Example:- ng-app="myApp"
If everything is fine and you are still getting the issue do remember to make sure you have the right file included in the scripts.
You have not defined the same module twice in different places which results in any entities defined previously on the same module to be cleared out, Example angular.module('app',[]).controller(.. and again in another place angular.module('app',[]).service(.. (with both the scripts included of course) can cause the previously registered controller on the module app to be cleared out with the second recreation of module.
I got this problem because I had wrapped a controller-definition file in a closure:
(function() {
...stuff...
});
But I had forgotten to actually invoke that closure to execute that definition code and actually tell Javascript my controller existed. I.e., the above needs to be:
(function() {
...stuff...
})();
Note the () at the end.
I am a beginner with Angular and I did the basic mistake of not including the app name in the angular root element. So, changing the code from
<html data-ng-app>
to
<html data-ng-app="myApp">
worked for me. #PSL, has covered this already in his answer above.
I had this error because I didn't understand the difference between angular.module('myApp', []) and angular.module('myApp').
This creates the module 'myApp' and overwrites any existing module named 'myApp':
angular.module('myApp', [])
This retrieves an existing module 'myApp':
angular.module('myApp')
I had been overwriting my module in another file, using the first call above which created another module instead of retrieving as I expected.
More detail here: https://docs.angularjs.org/guide/module
I just migrate to angular 1.3.3 and I found that If I had multiple controllers in different files when app is override and I lost first declared containers.
I don't know if is a good practise, but maybe can be helpful for another one.
var app = app;
if(!app) {
app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
I had this problem when I accidentally redeclared myApp:
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);
After the redeclare, Controller1 stops working and raises the OP error.
Really great advise, except that the SAME error CAN occur simply by missing the critical script include on your root page
example:
page: index.html
np-app="saleApp"
Missing
<script src="./ordersController.js"></script>
When a Route is told what controller and view to serve up:
.when('/orders/:customerId', {
controller: 'OrdersController',
templateUrl: 'views/orders.html'
})
So essential the undefined controller issue CAN occur in this accidental mistake of not even referencing the controller!
This error might also occur when you have a large project with many modules.
Make sure that the app (module) used in you angular file is the same that you use in your template, in this example "thisApp".
app.js
angular
.module('thisApp', [])
.controller('ContactController', ['$scope', function ContactController($scope) {
$scope.contacts = ["abcd#gmail.com", "abcd#yahoo.co.in"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}]);
index.html
<html>
<body ng-app='thisApp' ng-controller='ContactController>
...
<script type="text/javascript" src="assets/js/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
If all else fails and you are using Gulp or something similar...just rerun it!
I wasted 30mins quadruple checking everything when all it needed was a swift kick in the pants.
If you're using routes (high probability) and your config has a reference to a controller in a module that's not declared as dependency then initialisation might fail too.
E.g assuming you've configured ngRoute for your app, like
angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });
Be careful in the block that declares the routes,
.when('/resourcePath', {
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});
Declare secondModule as a dependency after 'ngRoute' should resolve the issue. I know I had this problem.
I was getting this error because I was using an older version of angular that wasn't compatible with my code.
These errors occurred, in my case, preceeded by syntax errors at list.find() fuction; 'find' method of a list not recognized by IE11, so has to replace by Filter method, which works for both IE11 and chrome.
refer https://github.com/flrs/visavail/issues/19
This error, in my case, preceded by syntax error at find method of a list in IE11. so replaced find method by filter method as suggested https://github.com/flrs/visavail/issues/19
then above controller not defined error resolved.
I got the same error while following an old tutorial with (not old enough) AngularJS 1.4.3. By far the simplest solution is to edit angular.js source from
function $ControllerProvider() {
var controllers = {},
globals = false;
to
function $ControllerProvider() {
var controllers = {},
globals = true;
and just follow the tutorial as-is, and the deprecated global functions just work as controllers.
I was following the angular docs and other links in order to create a "component" with angular inside a rails-based project.
The problem is that I can't correctly initialize the app, and instead I got two identical errors
Uncaught Error: No module: testApp0
Uncaught Error: No module: testApp0
In the following jsfiddle I try to show you my point http://jsfiddle.net/d8Lyu/
I'm pretty new in angular and the official documentation isn't very helpful
You are almost here! Just remember angular is modular and every module need to be declared with an angular.module('my_module_name', ['my_modules_dependency']).
Just refactor your code like that :
angular.module( //this is your app module
'testApp0',
['testApp0.controllers'] //your app need your controller as a dependency to works
);
angular.module( //this is your controller module
'testApp0.controllers',
[]
).controller('sliderCtrl', ['$scope', function($scope) {
$scope.greeting = "hellow" //you pass a gretting variable to your template
}
])
An other thing : you declare a gretting variable in your controller but acces it with user.hellow in your template. Just put {{ gretting }}.
One last thing, in the
frameworks and extensions
of fiddle change 'onLoad' to 'in body', you don't want your angular app to be ready before the DOM.
If you plan to use angular, look at : angular-app. The tutorial app can't be trusted for serious angular developement.
Use this jsfiddle as a reference: http://jsfiddle.net/joshdmiller/HB7LU/
You need to add an external resource, change settings in the 'fiddle options' section and the 'frameworks and extensions' section.
Once everything is setup you can create your angular in the javascript pane likeso:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}