I am new in Angular.js, I am watching pluralsight Angular tutorial, I did what the teacher told on that videos:
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
The h1 should be Hello World! but it is {{helloMessage}}
I am using Latest version of Firefox on windows8 with latest version of Angular
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!Doctype>
<html lang="en" ng-app>
<head>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script href="angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
</html>
Above code works without any issue so it is clear whatever problem is with your version issue. Use nuget to resolve the issue in case you are using Visual studio.
The syntax has changed, you have to add ng-app to the body part, and change the script src, the following code works.
<body ng-app>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript">
function helloWorldCtrl ($scope) {
$scope.helloMessage = "Hello World!";
}
</script>
</body>
You should a module in your script.
Hope the following code helps you.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.12/angular.js" data-semver="1.3.12"> </script>
<script src="app.js"></script>
</head>
<body>
<h1 ng-controller="MainCtrl">Hello {{name}}!</h1>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
</script>
</body>
</html>
Here is the code Plunker:-
<!DOCTYPE html>
<html data-ng-app="one">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1 ng-controller="helloWorldCtrl">{{helloMessage}}</h1>
<script type="text/javascript">
var app=angular.module("one",[]);
app.controller("helloWorldCtrl",function ($scope) {
$scope.helloMessage = "Hello World!";
});
</script>
</body>
</html>
I assume there is version problem if you are using new version of angular above 1.2.0 it is not allowed to use global controller in that version Source
Related
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>
I just started learning angularJS using phonegap and I have a simple HTML code and a few lines of angularjs code. Everything works fine in the browser but only the HTML code works in the phonegap when I try to run it on my Android phone. Why?
<!DOCTYPE html>
<html>
<script src="C:\Users\Ghaith Haddad\Desktop\learning\learn\angular-1.5.8"></script>
<script src="C:\Users\Ghaith Haddad\Desktop\learning\learn\www\me.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Tutorial</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<div ng-app="app3" ng-controller="ctrl1">
<span>Values:</span>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
<h1>hello there buddy</h1>
<button ng-click="update()">Sum</button>
<br><br>
{{calculation}}
</div>
<script>
var app = angular.module('app3', []);
app.controller('ctrl1', function($scope) {
$scope.first = 1;
$scope.second = 2;
$scope.update = function(){
$scope.calculation = (+$scope.first + +$scope.second);
};
});
<!-- Load the AngularJS library -->
</script>
<!-- Load the JS Module -->
</body>
</html>
Here is the JS code:
var app = angular.module('app3', []);
app.controller('ctrl1', function($scope) {
$scope.first = 1;
$scope.second = 2;
$scope.update = function(){
$scope.calculation = (+$scope.first + +$scope.second);
};
});
Use relative path for cordova (like "./") instead of absolute path (
), that's way the script can't be loaded. Anyway you can debug your solution in android using chrome and attaching device or iOS using safari inspector.
Example:
<!DOCTYPE html>
<html>
<head>
<base href=".">
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
I just see a blank input box, when I should see the $scope.firstname value. Why does not this work?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp" ng-controller="MyController">
<head>
<meta charset="UTF-8">
<title>Toto App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="myCtrl.js"></script>
</head>
<body>
<input ng-model="firstname">
</body>
</html>
myCtrl.js:
angular.module('MyApp', [])
.controller('MyController', function($scope) {
$scope.name = "John";
});
You're doing $scope.name = "John" instead of $scope.firstname = "John"
I'm trying to send two parameters from first.html to second.html through url and get the value in second.html using routeParams. I have set the base tag as <base href="file:///D:/abhilash/node/angapp/"/> and on click of button the parameters in the input textboxes should be passed through url.
The first.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="firstController">
First name:<input type="text" ng-model="firstName"><br>
Last name:<input type="" ng-model="lastName"><br>
<input type="button" ng-click="loadView()" value="submit" name="">
</div>
</body>
</html>
Second.html:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="file:///D:/abhilash/node/angapp/"/>
</head>
<body>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="controller.js"></script>
<div ng-controller="secondController">
{{firstName}}
</div>
</body>
</html>
This is the controller:
(function(){
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider,$locationProvider){
$routeProvider.when('/first',{
templateUrl:'/first.html',
controller: 'firstController'
})
.when('/second/:firstName/:lastName',{
templateUrl:'/second.html',
controller:'secondController'
})
.otherwise({
redirectTo:'/first'
})
$locationProvider.html5Mode(true);
})
app.controller('firstController',function($scope,$location){
$scope.firstName="";
$scope.lastName="";
$scope.loadView = function()
{
$location.path('second/'+$scope.firstName +"/" +$scope.lastName);
console.log($location.url());
}
})
.controller('secondController',function($scope,$routeParams){
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
}());
check this code here
If you are deploying your app into the root context (e.g. https://myapp.com/), set the base URL to /:
<head>
<base href="/">
...
</head>
If you are deploying your app into a sub-context (e.g. https://myapp.com/subapp/), set the base URL to the URL of the subcontext:
<head>
<base href="/subapp/">
...
</head>
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