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
Related
My Simple Angular JS app isn't working. Can anybody help me out, the following is the code. Index.js is the main file which includes a script file controller.js .
The browser does not shows any errors when I try to run the app:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name="Angad";
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
</head>
<body ng-controller="myCtrl">
<nav>Navigation</nav>
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>{{name}}</h1>
</div>
<footer>Copyright-2017</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
it is due to script loading statement
change
<script src="js/angular.min.js" />
<script src="js/controller.js" />
with
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
Simple Angularjs app works without a webserver.
Your example will also work.
Just close the script tag properly.
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
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.
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>
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.
I have been attempting to follow several different online tutorials, but keep keep failing on the same thing: getting AngularJS to load a HTML template file into the ng-view section in my page.
I have stripped it down as much as possible and am now essentially just copying this simple tutorial.
Please have a look at my test page here: http://inigowebdesign.co.uk/atest/ You should be able to see all the files there in the source code and confirm that they exist and are linked properly. Please, what am I doing wrong?
EDIT: Here is my code as it stands:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Shizzle!</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
</head>
<body>
<div class="container" ng-app="myApp">
<header>
<h1>Header</h1>
</header>
<div ng-view></div>
<footer>
<h3>Footer</h3>
</footer>
</div>
<script type="text/javascript">
angular.module('myApp', ['ngRoute']).config(function($routeProvider)){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});
</script>
</body>
</html>
In console you have error: Uncaught SyntaxError: Unexpected token )
This ) was at the end of the first line.
Fixed:
angular.module('myApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'view.html'
})
.otherwise({redirectTo:'/something'});
});