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>
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 want to disable a button with ng-disable if ng-pattern of an input field does not match the regular expression. In this case the regular expression is "[0-9]". I have tried the following code:
Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" ng-app="Filter">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ASCII" />
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<div class="ctrl" ng-controller="Ctrl">
Text <input type="text" ng-model="input_field" ng-pattern="[0-9]"><br/>
<button ng-disabled="input_field.$valid">Start Filter</button>
</div>
</body>
</html>
Test.js
Module.controller('Ctrl', function($scope){
$scope.input_field = "Insert your Text here!";
}
Unfortunately it is not working. I have tried many ways but nothing worked. Do you have any ideas how to disable the button if the pattern do not match.
I think you should wrap it with <form> and fix the syntax: $error instead of $valid, [0-9] -> /^[0-9]/. Here is a demo, adjust it appropriately:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm">
Input: <input type="text" ng-model="input_field" name="input_field" ng-pattern="/^[0-9]/" placeholder="Insert a number"><br/>
<button ng-disabled="myForm.input_field.$error.pattern || !input_field">Start Filter</button>
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {});
</script>
</body>
</html>
I have written code for simple AngularJS JavaScript but not working properly.
Only root scope is updating but not the other two why I want to update FirstCtrl and SecondCtrl to be updated when I update Root Scope, But this is not working the way I expected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>AngularJS</title>
</head>
<body>
<div ng-app="">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
</div>
<script type = "text/javascript" src="main.js"></script>
</body>
</html>
main.js contains:
function FirstCtrl($scope){
}
function SecondCtrl($scope){
}
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
});
app.controller('SecondCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp">
<input type="text" ng-model="message">
<h1>{{message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="message1">
<h1>{{ message1}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="message2">
<h1>{{ message2}}</h1>
</div>
</div>
Define controller in module. It will create different scope for different controller.
scope properties must be be in controller you must have an app in first and declare controller in your app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>AngularJS</title>
</head>
<body>
<div ng-app="myApp">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
<div ng-controller="FirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
<div ng-controller="SecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{ data.message}}</h1>
</div>
</div>
<script type = "text/javascript" src="main.js"></script>
</body>
</html>
main.js :
var app=angular.module("myApp",[]);
app.controller("FirstCtrl",function($scope){
});
app.controller("SecondCtrl",function($scope){
});
We can do like this:
angular.module('myApp'[])
.controller('FirstCtrl',FirstCtrl)
.controller('SecondCtrl',SecondCtrl);
function FirstCtrl($scope){
}
function SecondCtrl($scope){
}
In index.html
Give reference main.js and give name of application
<body ng-app="myApp">
I'm following a tutorial online, but when I refresh my browser I get {{todo.title}} and the checkbox doesn't put a line through the text if clicked.
Any ideas why. I don't see anything different from my code and the video I'm following.
<!doctype html>
<html lang="en" ng-app="ToDo">
<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
</head>
<body>
<div ng-controller='todoController'>
<form name="frm" ng-submit="addTodo()">
<input type="text" name = "newtodo" ng-model="newtodo" required>
<button ng-disabled="frm.$invalid">Go</button>
</form>
<button ng-click="clearCompleted()">Clear Completed</button>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span ng-class="{'done': todo.done}">{{todo.title}}</span>
</li>
</ul>
</div>
<script scr="bower_components/angular/angular.min.js"></script>
<script>
angular.module('ToDo', []).
controller('todoController', ['$scope', function($scope){
$scope.todos = [{'title': 'Build a todo app', 'done':false}];
$scope.addTodo = function(){};
$scope.clearCompleted = function(){};
}]);
</script>
</body>
</html>
you have misspelled src as scr
<script scr="bower_components/angular/angular.min.js"></script>
Please include angularjs file like below. because u not included path of AngularJS Library
<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</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>