Basic Angularjs code not running? - javascript

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.

Related

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

Angular and angular-material [$injector:modulerr]

I just started to learn angular, and I`ve created a basic app with angular-material. But I have an error:
[$injector:modulerr]
My html:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="assets/javascripts/app.js"></script>
</body>
</html>
In app.js I have this:
var app = angular.module('angularTest', ['ngMaterial', 'ngRoute'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
If I remove script tag with app.js, and replace with <script> var app = ...</script> then it works. :(
Does anyone have a solution?
Thanks a lot!
Please check your code, maybe share a plnkr link of it breaking.
There were a few things that were missing in your code snippet (including a closing head, a body start, the ng-app tag and more), which I'm assuming is in the ... section
I created a plnkr with what you had mentioned, and it seems to be working correctly:
<html>
<head></head>
<body ng-app="angularTest">
{{1+2}}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
This correctly loads, and shows 3 in the browser when opened. Plnkr link
You must initialize the angular app on your html page. I can see in the snippets that the app is not intialized. Here is the code which will help you -:
<html ng-app="angularTest">
<body>...</body>
</html>

Angular Expression not evaluating

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.

AngularJS ng-hide / ng-show

Im learning about AngularJS but I have a problem with the "ng-hide" directive, its doesnt work.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba ng-hide/ng-show</title>
</head>
<body>
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
And this is my script for Angular
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js (of course, between "script" tags)
You need to initialize your application.
Add ng-app to your html
<html ng-app="MyApp">
...
Then create your app module
<script>
var app = angular.module("MyApp", []);
</script>
You aren't bootstrapping your application.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app"> <!-- You're missing this -->
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
</html>
script.js
var app = angular.module('app', []); // You're also probably missing this
Plunker
Currently you haven't compiled page by angular compiler, for that you need add ng-app directive(basically it takes module name, but in sample you should do only this to make) it working.
Markup
<body ng-app="">
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
</body>
Demo Plunkr
Technically you should create a module and add components to that module (in enterprise world).
Jose you have to tell your page that it is an Angular app
<html lang="en" ng-app="app">
and you have to create your app in the JS file:
angular.module('app', []);

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.

Categories