I'm testing AngularJS and when I try to visualize this example the browser's console shows me something like this:
Error: Argument 'mainController as mainCtrl' is not a function, got undefined
at Error (native)
at bb
I only have two files in my project
index.html
<!doctype html>
<html ng-app="my-app">
<head>
<title>Angular controllers</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- AngularJS and JQuery include. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form name="particleForm" ng-controller="mainController as mainCtrl" ng-submit="mainCtrl.addData()">
{{ mainCtrl.data.email }}
<div class="form-group">
<label for="text" class="col-sm-2 col-sm-offset-2">E-mail</label>
</div>
<div class="col-sm-10">
<input type="text" name="text" class="form-control" ng-model="mainCtrl.data.email" placeholder="Enter e-mail..."></input>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
(function (){
var app = angular.module('my-app', []);
var list = [];
app.controller ('mainController', function (){
this.data = {};
this.addData = function (){
list.push (this.data);
list.data = {};
};
});
})();
I only want to show everything I put on that input field.
The FooController as FooCtrl syntax is only available starting with AngularJS 1.1.5 (see this). You're using 1.0.8.
Related
I'm running a simple Firebase App with only 3 files. When I run in the browser I get this error when trying to connect to my firebase DB:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0/$injector/unpr?p0=%24firebaseObjectProvider%20%3C-%20%24firebaseObject
Here is my app.js:
(function() {
var app = angular.module("scheduleApp", ['firebase']);
app.controller('MainController',['$scope','$firebaseObject',function($scope, $firebaseObject) {
var ref = new Firebase("https://gajobs.firebaseio.com/");
$scope.data = $firebaseObject(ref);
}]);
})();
Here is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="scheduleApp" >
<head>
<meta charset="UTF-8">
<title>GA Jobs</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-controller="MainController">
<div class="page-header text-center">
<h1>GA Job Board</h1>
</div>
<div class="row times">
<div class="col-xs-4 text-center">
<h2>Contact</h2>
<div class="time-slot">
<input type="checkbox" id="contact">
<label for="contact">Tableu</label>
</div>
</div>
</div>
<p class="text-center">
Reset
</p>
</div>
</body>
</html>
Not sure what is wrong here, it seems to not like the $firebaseObject that I am trying t use...
As mentioned in the comments you're using an old version of AngularFire.
$firebaseObject and $firebaseArray were introduced in 1.0.
In 0.8 you have to use $firebase(ref).$asObject(), but please don't use this old version as it is not supported.
I am getting AngularJS bad argument error while running the following example, please let me know where I am doing wrong ? Actually the following code is working fine if I run outside/normally, but when I copy/paste this code in my application, it is giving the following error. (this page/tab is displaying from my application's controller like: TestController, which is available in coffeescript. but I don't need any coffeescript for this requirement, I need it in AngularJs. So, In this tab, I need to display the below code/button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApplication', []);
myApp.controller('TestController', ['$scope', function($scope){
$scope.test = function(){
alert("Success");
}
}]);
</script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="TestController">
<div class="tab-pane" id="wizards">
<button type="button" ng-click="test();">Test</button>
</div></div></div>
</body>
</html>
Error: Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined
This Plunker is working for me
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApplication">
<div ng-controller="WizardController">
<button ng-click="test()">Test</button>
</div>
</div>
</body>
For some reason, protractor is throwing the error angular never provided resumeBootstrap when navigating to the page using browser.get(). I tried switching data-ng-app to ng-app but that didn't help.
Full Error
Error: Angular could not be found on the page chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html : angular never provided resumeBootstrap
spec
var driver = browser.driver;
describe('Chrome Extension Control Page', function () {
it('Should be defined', function () {
browser.get('chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html');
expect(driver.getTitle()).toEqual("Control Page");
expect(driver.executeScript(function () {
return typeof window !== "undefined";
})).toBeTruthy();
element(by.css('input')).click();
});
});
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Control Page</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/navbar.css">
<link rel="stylesheet" href="assets/css/popup.css">
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/angular.min.js"></script>
<script src="assets/js/lib/bootstrap.min.js"></script>
<script src="assets/js/lib/ui-bootstrap-tpls.min.js"></script>
<script src="assets/js/lib/angular-bootstrap-switch.min.js"></script>
<script src="assets/js/lib/bootstrap-switch.min.js"></script>
<script src="assets/modules/translate-filter.js"></script>
<script src="assets/modules/review-box.js"></script>
<script src="assets/modules/enable-switch.js"></script>
<script src="assets/modules/navbar.js"></script>
<script src="assets/modules/extension-interface.js"></script>
<script src="assets/modules/status-monitor.js"></script>
<script src="assets/modules/state-monitor.js"></script>
<script src="assets/js/control-ui.js"></script>
</head>
<body data-ng-app="controlPage">
<div ng-controller="ControlPageCtrl">
<extension-navbar></extension-navbar>
<div class="">
<div class="jumbotron" style="background-color: transparent; margin-bottom: 0">
<status-monitor-area></status-monitor-area>
<hr>
<div>
<div class="row">
<div class="col-xs-8">
<state-message></state-message>
</div>
<div class="col-xs-4">
<enable-switch></enable-switch>
</div>
</div>
<state-progress-bar></state-progress-bar>
</div>
<state-information-box></state-information-box>
</div>
</div>
</div>
</body>
</html>
EDIT: This did not fix the problem. I have no idea why protractor isn't working.
Weird fix. It worked after I upgraded to the latest version of Angular.
I didn't consider it because the upgrade available was from v1.3.15 to v1.3.16. Seriously weird stuff, Angular.
Hi this is my first day in angular and trying to play around with some code however I am lost around with the app.js file which throws error as Uncaught SyntaxError: Unexpected token .
Here is my structure of application which I cloned from angular-seed and did some cleanup.
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Currency Converter</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="app.js"></script>
<script src="finance.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="MyAppCtrl as app">
<b>Currency Converter</b>
<div>
<input type="number" ng-model="app.amount" required >
<select ng-model="app.inCurr">
<option ng-repeat="c in app.currencies">{{c}}</option>
</select>
</div>
<div>
<input type="number" ng-model="app.amount" required >
<select ng-model="app.inCurr">
<option ng-repeat="c in app.currencies">{{c}}</option>
</select>
</div>
</div>
</body>
</html>
app.js
(function(){
'use strict';
angular.module('myApp', ['finance']);
.controller('MyAppCtrl', ['currencyConverter', function(currencyConverter) {
this.amount=1;
this.inCurr="EUR";
this.currencies=currencyConverter.currencies;
}]);
}());
finance.js
(function(){
'use strict';
angular.module('finance', []);
.factory('currencyConverter', ['$http', function($http) {
//var yahoo_finance_rest_api=https://query.yahooapis.com/v1/public/yql? q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22EURUSD%22%2C%22GBPUSD%22%2C%22EURGBP%22%2C%22CNYUSD%22%2C%22CNYGBP%22%2C%22CNYEUR%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=
var currencies = ['USD', 'EUR', 'CNY', 'GBP'];
}]);
}());
Any idea what's going wrong with this code?
angular.module('myApp', ['finance']);, the ; terminates the statement. remove it and it'll work.
I would like to start saying that I'm not that experienced with the technologies that I'm using, I'm doing this project to practice using them.
I just downloaded JetBrains Webstorm and created a Foundation Project.
I created a <textarea> and I want to bind it to a value I defined in my AngularJS controller. The controller code is very simple (it's in my main.js file):
var readerApp = angular.module("readerApp", []);
function ReaderCtrl = function($scope){
$scope.data = {
text = "Default text"
}
}
So I only have a simple text that I want to bind like this: ng-model="{{data.text}}"
Although when I do that, the <textarea> still doesn't show anything. I'll post the entire HTML page, maybe there's a small detail I'm missing, but it seems right to me
<!doctype html>
<html class="no-js" lang="en" ng-app="readerApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Speed Reader | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="large-12 columns large-text-center">
<h1>Welcome to Speed Reader!</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel" ng-controller="ReaderCtrl">
<h3>Insert your text here! </h3>
<textarea id="textarea" rows="25" ng-model="{{data.text}}"></textarea>
Start reading
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>