i couldn't find the error i even searched but no result please help me here is my code
index.html
<!DOCTYPE html>
<html >
<head>
<title>Page Title</title>
</head>
<body ng-app="app">
<div ng-view></div>
<script src="controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js"> </script>
</body>
</html>
login.html
<div ng-controller="loginCtrl">
<form action="/" id="myLogin">
Username:<input type="text" name="username" id="username" ng-model="username">
Pasword:<input type="password" name="password" id="password" ng-model="password">
<button ng-click="submit()">Login</button>
</form>
</div>
controller.js
var application=angular.module('app',['ngRoute']);
application.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'login.html'
})
.when('/Dashboard',{
templateUrl:'dashboard.html'
})
.otherwise({
template:'404 not found'
});
});
application.controller('loginCtrl',function($scope,$location){
$scope.submit=function(){
var uname=$scope.username;
var password=$scope.password;
if($scope.username =='admin' && $scope.password=='admin'){
$location.path('/Dashboard');
}
};
});
i couldn't find where is the error
and when i try it i get this error
https://docs.angularjs.org/error/ng/areq?p0=loginCtrl&p1=not%20a
You have placed the loginCtrl at the wrong place. Check out this plunk.
<!DOCTYPE html>
<html >
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js"> </script>
<script src="controller.js"></script>
</head>
<body ng-app="app" ng-controller="loginCtrl">
<div ng-view></div>
</body>
</html>
Change the order of <script> tag to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js"> </script>
<script src="controller.js"></script>
Related
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 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 have these code samples that i am currently working on trying to learn angular js it worked well before but now it is not working at all
can some one please help me to make it right
//INDEX.HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
//app.js
angular.module('app',[]);
//main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
Here is working solution with vm approach
angular.module('app',[]);
angular.module('app').controller('MainController',function($scope){
vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searchInput ='Initial Demo text'; //corrected variable spelling and added it to vm
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
Replace your controller code by this one :
angular.module('app').controller("MainController", function ($scope) {
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput = '';
});
I haven't changed any code but your code looks like working fine..
//app.js
angular.module('app',[]);
//main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
please refer updated below code snippet -
angular.module('app',[]);
angular.module('app').controller('MainController',['$scope',function($scope){ //added scope here
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput ='Initial Demo text'; //corrected variable spelling and added it to scope
}]);
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="searchInput">
</div>
<p>{{searchInput}}</p>
</div>
</body>
</html>
Hope this helps!!
Please see the plunkr here
There are two blocks of recaptcha codes, one inside the partial partial_list.html and another in index.html. The one inside partial is not displayed, I assume may be because angular prevents loading external script. How can I make it work inside partial?
Edit
As the comment , please see the code below.
index.html:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div ng-controller="FriendCtrl">
<div ng-view></div>
</div>
</div>
<h2>in index.html</h2>
<form name="editForm" class="form-horizontal" ng-submit="saveFriend()">
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6LfRgOMSAAAAAPRKoWemiQCZdhWBy2xgfWsZ_xUe">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfRgOMSAAAAAPRKoWemiQCZdhWBy2xgfWsZ_xUe"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
</form>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/edit/:friendId', {
templateUrl: 'partial_edit.html',
controller: FriendEditCtrl
});
$routeProvider.when('/list', {
templateUrl: 'partial_list.html',
controller: FriendListCtrl
});
$routeProvider.otherwise({ redirectTo: '/list' });
}]);
partial_list.html
<h2>In partial</h2>
<form name="editForm" class="form-horizontal" ng-submit="saveFriend()">
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/challenge?k=6LfRgOMSAAAAAPRKoWemiQCZdhWBy2xgfWsZ_xUe">
</script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfRgOMSAAAAAPRKoWemiQCZdhWBy2xgfWsZ_xUe"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
</form>
controller.js
function FriendCtrl($scope) {
}
function FriendListCtrl($scope) {
}
function FriendEditCtrl($scope, $routeParams, $location) {
}