Angular not working locally - javascript

I am building a simple functionality to test AngularJS and it is not working on Chrome, Mozilla nor Safari on Mac OSX.
I am guessing that a problem is with ng-controller since ng-model is working fine.
Here is the code I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/js/main.js"></script>
</head>
<body>
<div ng-controller="myController">
<h1>{{author.name}}</h1>
<p>{{author.title + ', ' + author.company}}</p>
</div>
</body>
</html>
And here is the main.js file:
function myController($scope) {
$scope.author = {
'name' : 'The Name',
title : 'The title',
company : 'The Company Name'
}
}
So if someone could point me to the problem it would be great...

Every Angular app requires an ng-app directive to pinpoint the root element in which angular will run.
In your case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/js/main.js"></script>
</head>
<body ng-app="">
<div ng-controller="myController">
<h1>{{author.name}}</h1>
<p>{{author.title + ', ' + author.company}}</p>
</div>
</body>
</html>
It is better to declare your app name (module name) and then assign it to the ng-app directive.

Related

angular is not defined In AngularJS

I am new to AngularJS and currently, I am doing controllers in AngularJS, but I don't know I got an error angular is not defined Line number 21 if someone knows the issue inform me.
<!DOCTYPE html>
<html lang="en" ng-app="myLangApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer" async></script>
</head>
<body>
<div ng-controller="language">
Select your favorite language:
<button ng-click="selectLanguage('PHP')">PHP</button>
<button ng-click="selectLanguage('javascript')">javascript</button>
<button ng-click="selectLanguage('cpp')">cpp</button>
<button ng-click="selectLanguage('java')">java</button>
<p>You have selected: {{ myFavLang }}</p>
</div>
<script>
var app = angular.module('myLangApp', []);
app.controller('language',($scope)=>{
$scope.myFavLang = 'None';
})
</script>
</body>
</html>
just add simple script to load the angular
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" ></script>

AngularJS is not defined

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>

jQuery.load HTML containing AngularJS

I'm having trouble loading an HTML file that contains AngularJS code!
Here are my snippets:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script>
$(document).ready(function () {
$('#content').load('page2.html#body');
});
</script>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{ value }}
</div>
<script>
//<![CDATA[
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.value = "hello world!";
});
//]]>
</script>
</body>
</html>
page2 alone works just fine! But when I try to load it inside page1, I get the following error message:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…
at HTMLDocument.eval (eval at globalEval (jquery-2.2.4.min.js:2), :294:192)
at i (jquery-2.2.4.min.js:2)
Angular needs jQuery to work (to be exact, it needs jQLite). You should import it also on page2.html, before angular.min.js.
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
<script src="angular.min.js"></script>
</head>

Unable to load data in Data Binding Expression in Angular JS

I'm very new to angular JS. I'm using 1.5x stable version of js. I've started with a simple html code :-
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>First JS demo</title>
</head>
<body>
Name :
<br/>
<input type="text" data-ng-model="name" /> {{ name }}
<script src="angular.min.js"/>
</body>
</html>
But while rendering the html in browser im only getting {{ name }} text in data binding expression instead of the actual name value typed in the textbox. I checked that the JS file is loaded correctly in HTML.
Am I doing something wrong? Please help me.
Thanks in advance
You must be define app name and controller name
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>First JS demo</title>
</head>
<body ng-controller="myCtrl">
Name :
<br/>
<input type="text" data-ng-model="name" /> {{ name }}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('myCtrl', function($scope, $http) {
});
</script>
</body>
</html>
Or something like this
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>

Angular.js Controller Not Working

I'm new to Angular and I'm going through the Intro to Angular videos from the Angular site. My code isn't working and I have no idea why not. I get the error
Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined
Here's my code.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.message = "Controller Example";
}
</script>
</body>
</html>
What am I doing wrong?
After angular version 1.3 global controller function declaration is disabled
You need to use modularise approach in order to make it work.
You should define angular.module first and then include angular components to it
Demo
angular.module('app', [])
.controller('MainController', function ($scope) {
$scope.message = "Controller Example";
})
Then change ng-app to use that module ng-app="app"
Just defining the function will not be a controller. You need to use like this:
var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
function MainController($scope) {
$scope.message = "Controller Example";
}
And ensure to use myApp in your html like this:
<html lang="en" ng-app="myApp">
function MainController($scope) {
$scope.message = "Controller Example";
}
should be something more like
var app = angular.module('myApp', []);
myApp.controller('MainController', function($scope) {
$scope.message = "Controller Example";
}
And then include an ng-app="myApp" directive in your html.
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angular Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module("app",[])
.controller('mainController', function($scope) {
var vm = this;
vm.message = "Controller Example";
})
</script>
</head>
<body ng-controller="mainController as vm">
<div >
<p>{{vm.message}}</p>
</div>
</body>
</html>
This is not how you should create a controller...
First you should create the module and controller in java script
// start angular module (app) definition
angular.module('myApp',[''])
.controller('MainController', function($scope) {
$scope.message = "Controller Example";
});
Now in your HTML
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>
</html>
Now it will start working
I suggest you to go through some tutorials first
http://campus.codeschool.com/courses/shaping-up-with-angular-js/
https://docs.angularjs.org/tutorial
These are some good tutorials

Categories