AngularJS is not defined - javascript

I'm starting to study in AngularJs at the beginning level. My project is used in the Spring Boot framework. I get an error message: "ReferenceError: angular is not defined". I have already created app.js which is a defined angular variable, but it is still an error.
app.js:
var app = angular.module('myapp', ['ngRoute']);
app.controller('mainController', ['$scope', function($scope) {
$scope.title = "Welcome";
}]);
welcome.jsp:
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<meta charset="utf-8">
<title>Create an account</title>
<link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="${contextPath}/resources/js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<c:if test="${pageContext.request.userPrincipal.name != null}">
<form id="logoutForm" method="POST" action="${contextPath}/logout">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
<h2> {{ title }} ${pageContext.request.userPrincipal.name} |
<a onclick="document.forms['logoutForm'].submit()">Logout</a></h2>
</c:if>
{{ title }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="${contextPath}/resources/js/bootstrap.min.js"></script>
</body>
</html>
How can I resolve this issue?

Move your script below
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<meta charset="utf-8">
<title>Create an account</title>
<link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
<!-- move it here -->
<script src="${contextPath}/resources/js/app.js"></script>
</head>
<body>
...
</body>
</html>

Add angular script before your app.js.
Since your app.js uses angular object, it must be already defined. angular scripts does that job, so it must be loaded before any angular code.
Try below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
<script src="${contextPath}/resources/js/app.js"></script>

Related

Cant bind .js file to main AngularJS file

I have two simple files: leads.html and leadsController.js. I want to have leadsController.js as a linked javaScript file in leads.html. When I link it using the following code <script src = "leadsController.js"></script> in my leads.html ... leads.html does not render properly.
However, when I include the contents of leadsController.js as a part of the code of leads.html it works.
Am I not linking the .js file correctly?
Below is what works and what doesn't.
I want this to work when connected to leadsController.js
Yes ... it's in the same directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script src = "leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js looks like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
This works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try absolute uri of the script file. eg if ur script is in /scripts folder then
src="~/scripts/leadsController.js" that should work.
Try <script src = "./leadsController.js"></script>
UPDATE: typo. I didn't upload the file to the server ... facepalm. Thanks all for your suggestions as they lead me to figure that out in the first place.

data binding is not happening in angular js application

I am not able to do data binding using angularJS application.
The following is the HTML template file as databinding.html and Javascript file as invoice.js.
It is priting {{ fname }} {{ lname }} besides John Doe.
<!DOCTYPE html
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div ng-app="myApp" ng-controller="InvoiceController">
First Name :<input type="text" ng-model='fname' /><br />
Last Name:<input type="text" ng-model='lname' /><br />
{{ fname }} {{ lname }}
</div>
<script type="text/javascript" src="invoice.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
angular.module('myApp', []).controller('InvoiceController', ['$scope',
function($scope) {
$scope.fname = 'John';
$scope.lname = 'Doe';
}]);
The order of the scripts is wrong. The controller logic won't work because it doesn't know what angular is yet.
Change this:
<script type="text/javascript" src="invoice.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
to this:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="invoice.js"></script>

Angular.js routing

Hey guys ive been trying to use routing, still new to angular though :( I have the first page already made, but am trying to make it when you click enter the next page appears on top of the current page (so basically a new page). The reason I want it to be all 1 page is so I can transfer the data from the first page onto the second page, however I can't seem to get it to load the next page... Here's my html and js so far,, not sure where im going wrong -_-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/kandi.css">
</head>
<body data-ng-app="nameBox" class="ng-scope">
<ng-view></ng-view>
<section class="frontPageBox">
<div data-ng-controller="appearCntrl">
<form action="" method="">
<input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input">
<a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>
</form>
<p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("nameBox", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/kandi2", {
templateUrl : "kandi2.html"
});
});
app.controller("appearCntrl", function($scope){
$scope.name = "";
$scope.data = [];
$scope.data.push(name);
});
</script>
</body>
</html>
The problem is because of the ng-view tag
<ng-view></ng-view>
Gives an <!-- ngView: undefined --> element in the DOM, there is no place to attach the view.
You could write something like:
<div ng-view></div>
Then it should work.

angular ionic real simple controller not working

I am new to angularjs. I am trying to create a simple controller but i can't.
Really need help.
<html data-ng-app="ionicApp" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script>
function SimpleController($scope){
$scope.customers=[
{name:'Djo', city:'johannesburg'},
{name:'tri',city:'vaal'},
{name:'stone',city:'pretoria'},
{name:'loick',city:'durban'}
];
}
</script>
<body >
<div class="container" ng-controllers="SimpleController">
<ul >
<!-- we are accessing thescope -->
Name: <input type="text" data-ng-model="name" /> {{ name}}
<li ng-repeat="cust in customers"> {{ custt.name}} - {{cust.city}} </li>
</ul>
</div>
</body>
</html>
Global controllers were disabled in angularjs 1.3 +
<html ng-app="ionicApp">
<body>
<div ng-controller="SimpleController">
</div>
</body>
<script>
angular.module("ionicApp",[])
.controller("SimpleController", [$scope, function($scope){
// your code here
}])
</script>
Solved! it was as simple as this:
instead of
<script>
angular.module("ionicApp",[])
.controller("SimpleController", [$scope, function(){
// my code here
}])
</script>
i just passed the $scope as a parameter in the function
<script>
angular.module("ionicApp",[])
.controller("SimpleController",function($scope){
// my code here
})
</script>
Thanks guys for your help

Issue rendering Angular template using ng-include

Can anyone please let me know why my template in htmlpage1.html is not rendering?
Code in main.js:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});
htmlpage1.html:
<div>this is my template</div>
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div data-ng-include data-ng-src="'HtmlPage1.html'"></div>
</body>
</html>
Make sure the filename and template name you provide in index.html are the same - it's case sensitive -> rename your html file to HtmlPage1.html. You can set the template file in data-ng-include, like so <div data-ng-include="'HtmlPage1.html'"></div>
Here's a working example:
http://jsbin.com/casoza/1/edit

Categories