i am new to angular js. i write the code for perform multiple controller concept but it is not working .i dont know where i am doing wrong?
following code i am using
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="number" ng-model="q">
<input type="number" ng-model="c">
<p>{{ q*c }}</p>
</div>
<div ng-controller="newone">
<p>{{lastName|uppercase}}</p>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.q=10;
$scope.c=5;
});
</script>
<script src="control.js"></script>
</html>
**control.js**
var app=angular.module('myApp',[]);
app.controller('newone',function($scope){
alert();
$scope.firstName="Vinoth";
$scope.lastName="Kumar";
$scope.full=function()
{
return $scope.firstName+''+$scope.lastName;
}
});
above code is not working can any one help me to fix this
In controller.js you don't need to declare the module again :)
var app=angular.module('myApp',[]);
change it to var app=angular.module('myApp');
Related
I am trying to create a link where I click the register button and it goes onto the register.html, without it needing for the page to start reloading. But when I click the register link, nothing seems to happen when I click it.
index.html:
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="Login">
<label for="login">Login</label>
<input id="login" ng-model="login" type="text">
<br>
<label for="password">Password</label>
<input id="password" ng-model="password" type="text">
<br>
<button type="button" ng-click="login()">Login</button>
<a href="#!register" >Register</a>
<div ng-view></div>
</body>
</html>
app.js:
var app=angular.module("myApp",["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/",{
templateUrl:"index.html",
})
.when("/register",{
templateUrl:"register.html",
controller:"Registration"
});
})
app.controller('Login',['$scope', function ($scope) {
}])
app.controller("Registration", function ($scope) {
$scope.msg = "I love London";
});
register.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<h1>Registration page</h1>
</head>
<body ng-app="myApp" ng-controller="Registration">
</body>
</html>
You should fix your link to:
Register
Check documentation for details $route#examples
This is a very basic ng-click example. I can't seem to get it to work. Not sure what the issue is. I swear I've used Angular before! Here's a jsbin:
JS Bin
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>{{1 + 2}}</h1>
<button ng-click="alert('hello world')">Click me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
Module:
angular.module('app', []);
It will be helpful to you while doing angularjs you should add the controller, In your case, I have created a function and passed a string value to show a message by the alert.
var app=angular.module('app', []);
app.controller('testCtrl',function($scope){
$scope.showalert=function(str){
alert(str);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-strict-di ng-controller="testCtrl">
<h1>{{1 + 2}}</h1>
<button ng-click="showalert('hai this is angularjs click event')"> click Me!..</button>
</div>
I'm going through a basic book for Angular, and it uses a controller to set up a field. However, I don't get the expected output. Searching here and elsewhere, it looks like I'm invoking it correctly, but something's not working. Anything obviously wrong? Anything else to try? Details below. Thanks.
Document html:
<html lang="en" ng-app ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</body>
controller.js:
function AppCtrl($scope) {
$scope.name = "World";
(function closing brace lost by code formatting)
Expected output is "Hello, World", but I get "Hello, {{name || 'World'}}"
You are missing the ng-app and the module in controller.
var app = angular.module('myApp', []);
DEMO
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope, $http) {
$scope.name = "World";
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</div>
</body>
</html>
Trying to do simple thing in AngularJS: form->if you put right word->button appears->u can click and go to a different page;(i didn;t try to put a link to the button since it doesn;t appear even without a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and the js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
problem: if i type in parola, the button does not appear
i am new to java script. thanks !
You should first read some angular tutorials, you have totaly wrong access to scope and you are using wrong $watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
And next thing, you are overkilling your code. You can inline it in template without any controller function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>
There are several errors here.
First, the password field is bound to MyCtrl.pass. But you're watching the value of $scope.pass
Second, $scope.$watch expects an angular expression to evaluate as argument, not a value to watch. So watching the string 'MyCtrl.pass' would be the correct thing to do.
Third, you shouldn't use a watch at all. You should just use ng-show="isPasswordValid(pass)"(see below), and return true or false from this function.
Fourth, instead of doing $scope.kPass = ($scope.pass == "parola"), you're inverting the value of $scope.kPass, but only if the value is correct. So if it goes from incorrect to correct, kPass will become true. Then if it becomes incorrect, kPass will stay true. And if it becomes correct again, it will become false.
So, to resume, all you need is
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
and
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};
What is the Simplest 'Hello World' in AngularJS for a beginner. So far I have this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-ng-app="">
{{'Hello World' }}
</div>
<script src="angular.js"></script>
</body>
</html>
Simplest Hello World that shows 2-way databinding
<!doctype html>
<html lang="en" ng-app>
<head>
<title> Hello World </title>
</head>
<body ng-controller="MainCtrl">
<h1>{{helloWorld}}</h1>
<input type="text" ng-model="helloWorld"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
function MainCtrl($scope){
$scope.helloWorld = "Hello World";
}
</script>
</body>
</html>
edit:
A bit of explanation on what is what and why this is (in my view) a minimal Hello World app showcasing the power of AngularJS
The AngularJS library needs to be included
The custom attribute ng-app is added to kick of the angular application. This directive signals AngularJS to auto-bootstrap an application
The ng-controller directive is added and it's associated javascript function shows exposing an object by assigning it to the injected $scope
The double brackets expression {{helloWorld}} shows the convention used by AngularJS to output model values.
The ng-model directive is used to bind the helloWorld object and shows the power of AngularJS two-way datababinding
Simplest AngularJS 'Hello World' - "The Good Way"
<!doctype html>
<html data-ng-app="myApp">
<head>
<!-- .... -->
</head>
<body>
<div data-ng-controller="MyController">
<input type="text" data-ng-model="name" />
<p>Hello {{name}}</p>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.name = "World";
}]);
</script>
</body>
</html>
Found on prettycode.org:
<!doctype html>
<html ng-app>
<head>
<title> Hello World </title>
</head>
<body>
Your name: <input type="text" ng-model="name"></input>
<p ng-show="name">Hi, {{ name }}!</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
</script>
</body>
</html>