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) {
}
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 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>
After running AngularJS app in by NetBeans error mentioned in title appears. I can't see any points where stack is overloaded, as you see I only initialize two variables for login form handling (i'm at the start of my AngularJS adventure). Can it be some hardware issue or I'm making some unconscious mistake here?
error :
RangeError: Maximum call stack size exceeded
at c (public_html/bower_components/angular/angular.min.js:115:232)
at http://localhost:8383/LoginJS/bower_components/angular/angular.min.js:115:506
at q (public_html/bower_components/angular/angular.min.js:7:355)
at Object.error (public_html/bower_components/angular/angular.min.js:115:475)
at http://localhost:8383/LoginJS/bower_components/angular/angular.min.js:89:12
at ra (public_html/bower_components/angular/angular.min.js:69:475)
at xa (public_html/bower_components/angular/angular.min.js:58:270)
at xa (public_html/bower_components/angular/angular.min.js:58:402)
at ba (public_html/bower_components/angular/angular.min.js:56:264)
at A.link (public_html/bower_components/angular-route/angular-route.min.js:7:224) (13:52:05:371 | error)
app.js
angular.module('myapp', ['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html'
})
.when('/dashboard', {
templateUrl: 'dashboard.html'
})
.otherwise(({
redirectTo: '/'
}));
});
loginCtrl.js
angular.module('myapp').controller('loginCtrl', function($scope, $location) {
$scope.submit = function() {
var username = $scope.username;
var password = $scope.password;
if($scope.username == 'admin' && $scope.password == 'admin') {
$location.path('/dashboard');
}
};
})
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/angular/angular.min.js" type="text/javascript"></script>
<script src="bower_components/angular-route/angular-route.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="scripts/controllers/loginCtrl.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<div ng-view></div>
<div ng-controller="loginCtrl">
<form action="/" id="login">
Username: <input type="text" name="username" id="username" ng-model="username"><br>
Password: <input type="password" name="password" id="password" ng-model="password"><br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
</body>
</html>
dashboard.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/angular/angular.min.js" type="text/javascript"></script>
<script src="bower_components/angular-route/angular-route.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<div ng-view></div>
some text
</body>
</html>
Because of you load all script files for both page and load index.html for '/' path that circular loading index.html page that's why you got this error.
In dashboard.html no need to load your script files again just write your information nothing else . And your login form move to another page like login.html and refer this page for path "/".
like:
route provider:
.when('/', {
templateUrl: 'login.html'
})
index.html page
<body ng-app="myapp">
<h1>Welcome </h1>
<div ng-view></div>
</body>
login.html page
<div ng-controller="loginCtrl">
<form action="/" id="login">
Username: <input type="text" name="username" id="username" ng-model="username"><br>
Password: <input type="password" name="password" id="password" ng-model="password"><br>
<button type="button" ng-click="submit()">Login</button>
</form>
</div>
and dashboard.html
<div ng-controller="CtrlName"> //ng-controller="CtrlName" if need ctrl and also can use ctrl in route provider
<h2> Dashboard page</h2>
// all of your information's
</div>
It may will work perfectly
use script control on direction for load your script files again just write your information nothing else . And your login form move to another page like login.html and refer this page for path "/".
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>