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.
Related
I just started with Angular JS (version 1), and not been able to get the interpolation running correctly. I already checked it with solved versions, and looks fine to me. I even placed a console.log inside controller and its not printing anything. Please help.
index.html
<!doctype html>
<html lang="en" np-app="LunchCheck">
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="app.js"></script>
<title>Lunch Checker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.message { font-size: 1.3em; font-weight: bold; }
</style>
</head>
<body>
<div class="container" ng-controller="LunchCheckController">
<h1>Lunch Checker</h1>
<div class="form-group">
<input id="lunch-menu" type="text"
placeholder="list comma separated dishes you usually have for lunch"
class="form-control" ng-model="food">
Content is: {{food}}
</div>
</div>
</body>
</html>
app.js
(function(){
'use strict';
angular.module('LunchCheck', [])
.controller('LunchCheckController', LunchCheckController);
LunchCheckController.$inject = ['$scope'];
function LunchCheckController($scope){
console.log("In controller");
$scope.food = 'Enter something';
}
})();
replace np-app by ng-app it will work
You've written np-app instead of ng-app
<html lang="en" np-app="LunchCheck">
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>
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
I'm including angular.min, angular-route and even angular-resource and animate...
You had wrong ng-app module, it should be ng-app="friendsList" instead of app.
The error is not due to angular versions, it is because you are injecting wrong dependency in your app mdoule. Simply you can not inject mainCtrl inside your module as its controller mainCtrl which you are going to register with your module.
var app = angular.module('friendsList', []);
Also you should have ng-controller="mainCtrl" on html.
<section ng-controller="mainCtrl">
</section>
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.
I'm getting an uncaught object error in my console when trying to load my angularjs app. I don't know if it's related to ng-route.js or not, but that's all the error tells me is uncaught object
Here's my Code
HTML
<!doctype html>
<html class="no-js" lang="en" ng-app="selfservice">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div id="template">
<div id="view">
<ng-view></ng-view>
</div>
</div>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
//initialize foundation
$(document).foundation();
</script>
</body>
app.js
//Initialize angular module include route dependencies
var app = angular.module("servicedesk", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"partials/login.html",
controller:"login"
});
});
controller.js
app.controller("login", function ($scope) {
return "";
});
ng-app should contain the name of the module. Change ng-app="selfservice" to ng-app="servicedesk".
Angular-route is a separated module, you need to include it inside your servicedesk module declaration like this :
var app = angular.module("servicedesk", ["ngRoute"]);