Angular Expression not evaluating - javascript

I'm very new to Angularjs. I have managed to install eclipse plugin for Angularjs and started a simple code. When i have the below code, the expressions are evaluating properly. I have visited similar problems reported in stackoverflow ad have tried all suggestions, but in my case, i just evaluate {{ 7 + 8}} which is straight forward. Please any help here is appreciated. Thanks.
<html ng-app>
As soon as i change to poing ng-app to my module, the page breaks and expressions are not evaluating.
<html ng-app = "corpo"> --> Fails
myapp.html
<html ng-app>
<head>
<script type="text/javascript" src="corp/WebContent/corp.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<title>Corp</title>
</head>
<body>
<div>
<p>{{ 7 + 19 }}</p>
</div>
</body>
</html>
corp.js
var corp = angular.module('corpo', []);
Also i keep getting undefined javascript file and i have disabled the validation under properties.

Put corpo below of angular library
Like this
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="corp/WebContent/corp.js"></script>

Its failing because you have injected corp.js before angular.min.js
corp.js after angular.min.js, it will start working

var corp = angular.module('corpo', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="corpo">
<head>
<title>Corp</title>
</head>
<body>
<div>
<p>{{ 7 + 19 }}</p>
</div>
</body>
</html>
change this
<src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script type="text/javascript" src="corp/WebContent/corp.js"></script>

I think your "corp.js" is not in the right path.
working plunker demo
Post your application directory structure. I am sure the problem is with that.

Related

Basic Angularjs code not running?

I using very simple code. I seem to be missing something that does run the Angularjs code.
here is my html code:
<html>
<head>
<title></title>
</head>
<body ng-app="myAppApp">
<div ng-controller="exempleCtrl">
HELLO {{name}}!
</div>
</body>
</html>
Here is app.js code:
var app = angular.module('myAppApp',[]);
app.controller('exempleCtrl', function($scope) {
$scope.name = 'World';
});
I'm new to Angularjs. So I could be missing something big here.
The issue, as pointed out in the comments, is that you did not include your Javascript code in the HTML file. So assuming you called it something like app.js and is in the same directory as the HTML file, then you need to include it as follows:
<html>
<head>
<title></title>
<!-- You should also add reference to angular (use desired version - example here is 1.2.4) -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- Here including the app.js-->
<script src="app.js"></script>
</head>
<body ng-app="myAppApp">
<div ng-controller="exempleCtrl">
HELLO {{name}}!
</div>
</body>
</html>
Give it a try and let us know if this works.

What's wrong with my Angular code?

My Html is here:
-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Events Web</title>
</head>
<body ng-controller="LoginController">
<p>{{name}}, world</p>
</body>
</html>
My app.js is here:
var app = angular.module('LoginPage',[]);
app.controller('LoginController',['$scope',
function($scope){
$scope.name = "100";
}]);
Can some one please help me with this? I tried a lot and couldn't find any mistake.
May be its a small one, but I couldn't find what's the issue
You have forgot to add ng-app="LoginPage"
<html ng-app="LoginPage">
<body ng-controller="LoginController">
<p>{{name}}, world</p>
</body>
</html>
See a basic example of Angularjs 1.3 setup - Sample

Why is Plunker not loading AngularJS?

I opened a clean plunker editor, added Angular to it and wrote an expression. It does not work however.
The link.
The code:
<!DOCTYPE html>
<html>
<head data-ng-app="">
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div>
{{ 1 + 1 }}
</div>
</body>
</html>
I am new to both Angular and Plunker. I'm using Firefox. Can anyone help me?
I have updated the angular script from google cdn.
You need to add a module on the script.
var app = angular.module('myApp',[]);
and also add a reference for the module in the html page
<body ng-app="myApp">
See updated plunker: http://plnkr.co/edit/ObpHaAeV9UXITNiCbhqf?p=preview
Use New->AngularJS for create correct angular plunker projects;
It doesn't work because you put data-ng-app="" on the <head> tag rather than <body> which is where your {{ 1 + 1 }} is. Since it doesn't know there's supposed to be an app there, Angular doesn't evaluate that expression and leaves it as {{ 1 + 1 }} rather than 2.
You are also using Angular 2.0 rather than the current release, which is a complete remake of Angular compared to the current release. Adding a script tag for the current release <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="text/javascript"></script> fixes the problem.

Angular is undefined

So I'm learning angular and I have a very basic html with a js script and I keep getting 'angular is undefined' on line 1 of App.js. I have all of the angular scripts and my script in a Scripts folder. What am I missing?
index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="Scripts/angular-min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/App.js"></script>
</body>
</html>
App.js
var appMainModule = angular.module('appMain', []);
appMainModule.controller("homePageViewModel", function($scope, $http, $location){
$scope.Heading = "This is the heading";
$scope.SayHello = function () {
alert('Hello');
}
});
Folder structure in VS:
your script is wrongly named it should be this
<script src="Scripts/angular.min.js"></script>
instead of this:
<script src="Scripts/angular-min.js"></script>
Look at your file name and look at your script name.
Given that I've copied your code into a codepen; and the only changes I've made are to reference the CDNJS versions of Angular and Angular Route; and I'm not seeing an issue.
Your issue lies elsewhere.
Specifically, if you're building this project, your output folders need the same relative path to Scripts. In other words, your directory structure expects the following to be true:
- index.html
|
- Scripts
|
- app.js
- angular-min.js
- angular-route.js
Another issue could be that you don't have Copy to output Directory=true or don't have the angular-min.js set as Content (something to be copied to the output folder).
Here's the codepen changes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="appMain">
<head>
<title>{{ Heading }}</title>
</head>
<body ng-controller="homePageViewModel">
{{ Heading }}
<button ng-click="SayHello()">Click me</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
</body>
</html>
you need to set type="text/javascript" in your angular script definitions.
try
<script type="text/javascript" src="Scripts/angular-min.js"></script>
<script type="text/javascript" src="Scripts/angular-route.min.js"></script>
<script type="text/javascript" src="Scripts/App.js"></script>
I faced the same issue about angular being undefined. In my code type="text/javascript" attribute was missing. After I added this attribute, it worked fine. Try this also if the solutions above do not work.

Why is this easier-than-hello-world angularjs application not working?

I'm following a pluralsight tutorial to learn angularjs, and I'm already stuck on the first video.
The tutorial uses plunker, here is the link to my code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 843 / 42 }}
</body>
</html>
I followed the instructions, clicked the button to add angularjs to my html doc (i.e. it just adds the link in the header and the ng-app to the body tag) but it is not working.
In the video, he types {{ 843 / 42 }} and it prints to the page 20.07.... whereas mine is just printing {{ 843 / 42 }}.
I can't start learning about angularjs until I figure out why my code is not working, but I can't figure out why my code is not working until I learn more about angularjs...
I was listening to the same video and I had the same issue. I started by using the latest angular js file.
I then tried to use the same Angular JS file he was using and then it worked fine.
Just wanted to add the whole program for someone's help.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.0" data-semver="1.3.0"
src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
{{ 8/4 }}
</body>
</html>

Categories