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>
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'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>
I am using angular to add some functionality to convert date in another framework (OutSystems). Unfortunately, the framework is calling jquery .load() to do Ajax refresh. This essentially is causing angular binding to break. I do not have any directives or controller. Please find code below. On launching page first tme you should see datetime of Feb 18, 2016 9:51:29 AM but after clicking button and calling.load() it just shows {{ 1455807089244 | date:'medium': 'EST' }}. I tried to use $compiler but it's still doesn't bind. Any help/hint is appreciated.
Note: This a "Test example" to demonstrate the problem.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngRoute']);
function reload() {
$('#div1').load('/index.html #divInner');
}
</script>
</head>
<body>
<div id="div1">
<div id="divInner">
<label id="L1">Hello {{ 1455807089244 | date:'medium': 'EST' }} </label>
<br />
</div>
</div>
<input id="Button1" type="button" value="button"
onclick="reload();" />
</body>
</html>
I think cracked this one... FYI, I have been working on this for days
<!DOCTYPE html>
<html ng-app="app" ng-controller="MainController">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngRoute']);
app.controller("MainController", function ($scope, $compile) {
$.fn.reload = function (url, selector) {
$(selector).load(url, function () {
var elem = angular.element($(selector));
elem.replaceWith($compile(elem)($scope));
$scope.$apply();
});
};
});
</script>
</head>
<body >
<div id="div1">
<div id="divInner">
<label id="L1">Hello {{ 1455807089244 | date:'medium': 'EST' }} </label>
<br />
</div>
</div>
<input id="Button1" type="button" value="button"
onclick="$().reload('/index.html #divInner', '#div1') " />
</body>
</html>
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
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