I am trying to learn AngularJs, I am trying to run a very simple example like below,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Angular Forms</title>
<!-- LOAD BOOTSTRAP CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/common.js" type="text/javascript"></script>
</head>
<body ngApp="formApp" ngController="formController">
<div class="container">
<div class="col-md-6 col-md-offset-3">
<!-- PAGE TITLE -->
<div class="page-header">
<h1>Submitting Forms with Angular</h1>
</div>
<!-- SHOW ERROR/SUCCESS MESSAGES -->
<div id="messages"></div>
<!-- FORM -->
<form ngSubmit="process()">
<!-- NAME -->
<div id="name-group" class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ngModel="formData.name"/></div>
<!-- SUPERHERO NAME -->
<div id="superhero-group" class="form-group">
<label>Superhero Alias</label>
<input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ngModel="formData.superhero"/></div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-success btn-lg btn-block">Submit!</button>
</form>
</div>
</div>
<script type="text/javascript">
var app = angular.module('formApp',[]);
app.controller('formController', ['$scope','$http', function ($scope, $http) {
console.log("form controller called");
$scope.formData = {};
$scope.process = function() {
console.log("test.php?" + JSON2Params($scope.formData))
$http({method:"GET",
url: "test.php?" + JSON2Params($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
})
};
}]);
</script>
</body>
</html>
However, I am not getting any indication that angular js is working. For example, I don't see anything logged to console, or application making a http get request that I want to make.
You have a syntax error
Change
From
<body ngApp="formApp" ngController="formController">
To
<body ng-app="formApp" ng-controller="formController">
Related
I am new to angular js. I try to create a simple page to connect angular js and backend laravel database. I keep receiving an error as an Error: $injector:unpr
Unknown Provider. I don't know what was wrong in the code. I hope anyone helps me to solve the issue. Thanks in advance
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Trial</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,Comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
Used wrong name of factory, comment instead of Comment
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="App">
<div class="container" >
<div ng-controller="Controller">
<form name="form" ng-submit="submitComment()">
<div class="form-group">
<label for="">Author</label>
<input type="text" class="form-control input-sa" name="author" ng-model="commentData.author">
</div>
<div class="form-group">
<label for="">Comment</label>
<input type="text" class="form-control input-sa" name="comment" ng-model="commentData.comment">
</div>
<button class="btn btn-sm btn-danger">Submit</button>
</form>
</div>
</div>
</body>
<script>
angular.module('commentService',[])
.factory('comment',function($http){
return{
save:function(commentData){
return $http({
method:"POST",
url:'/api/comments',
data:commentData
})
}
}
});
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,comment){
$scope.commentData={};
$scope.submitComment=function(){
Comment.save($scope.commentData);
}
});
</script>
</html>
Controller file
var ToDo=angular.module('ToDo',[]);
ToDo.controller('resetPasswordController',function($scope,resetPasswordService,$location){
$scope.resetPassword=function(){
var message=resetPasswordService.resetPassword($scope.user);
message.then(function(response){
console.log(response.data.message);
if(response.data.message=="password is reset")
$location.path("/login");
});
}
});
service file
var ToDo = angular.module('ToDo',['ngResource']);
ToDo.factory('resetPasswordService', function($resource,$http) {
var token=sessionStorage.getItem("token");
var details = {};
if(token!=null){
console.log(token);
sessionStorage.removeItem("token");
details.resetPassword = function(user) {
/*user.$save();*/
return $resource('http://localhost:8080/ToDo/forgotPassword/resetPassword/:Token',{Token:token});
}
}
return details;
});
mainapp.js
var ToDo = angular.module('ToDo', [ 'ui.router']);
ToDo.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('resetPassword', {
url : '/resetPassword',
templateUrl : 'template/resetPassword.html',
controller : 'resetPasswordController'
});
$urlRouterProvider.otherwise('resetPassword');
} ]);
template file
<form>
<h3 align="center">Re-set New Password</h3>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<label class="control-label">Enter New Password</label>
<input type="password" class="form-control"
data-ng-model="user.newPassword" name="emailId" required>
</div>
</div>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<label class="control-label">Re-Enter The New Password</label>
<input type="password" class="form-control"
data-ng-model="user.reEnterNewPassword" name="username" required>
</div>
</div>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<button id="buttons" type="submit" data-ng-click="resetPassword()">Submit</button>
</div>
</div>
<div class="col-sx-12 col-md-12 col-lg-12">
<div class="form-group">
<div>
Want To try Sign-In Again?
</div>
</div>
</div>
<div class="row"></div>
</form>
index.jsp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/scriptpage.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-resource.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/javascript"
src="controller/resetPasswordController.js"></script>
>
<script type="text/javascript" src="script/ToDoApp.js"></script>
</head>
<body data-ng-app="ToDo">
<div data-ui-view></div>
</body>
</html>
when i put ToDoApp.js before controller and service my view just goes to blank and when i put after those html page is showing but i get Error: $controller:ctrlreg
A controller with this name is not registered. for resetPasswordController
. Please help me with this problem.
And yes when i remove [ngResource] then everything works fine. Why??
You are defining you 'ToDo' module multiple times. In the controller and service files you should just get that module
var ToDo = angular.module('ToDo');
And in mainapp you should also inject ngResource
var ToDo = angular.module('ToDo', [ 'ui.router', 'ngResource']);
In the below snippet, I'm not able to print a simple value of search_username.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div ng-controller="MainController">
{{userdata.name}} {{error}}
</div>
</body>
</html>
JS Code:
// Code goes here
var MainController = function($scope, $http) {
$scope.search_username = "anyname"; // Value assigned here
var onComplete = function(response) {
$scope.userdata = response.data;
}
var onError = function(reason) {
$scope.error = "Not able to fetch data";
}
var request = $http.get("https://api.github.com/users/angular");
request.then(onComplete, onError);
}
var myModule = angular.module("GibtHubViewer", []);
myModule.controller("MainController", ["$scope", "$http", MainController]);
Thank You
your model out of scope. you should put all model in scope that define it by controller.
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div >
{{userdata.name}} {{error}}
</div>
</body>
The position where you are trying to print the model is out of Scope of the controller which is used, try this:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="GibtHubViewer" ng-controller="MainController">
{{search_username}} <!-- not getting displayed -->
<form name="searchUser">
<br/>
<input type="search" placeholder="Username to search" ng-model="search_username" />
<input type="submit" value="search" />
</form>
<br/>
<div>
{{userdata.name}} {{error}}
</div>
</body>
</html>
you are trying to display the {{search_username}} outside the controller area.
the search_username is added in the scope in MainController but you are trying to print that outside the MainController's area.
<div ng-controller="MainController">
{{userdata.name}} {{error}}
search_username - {{search_username}} // This will print the username
</div>
I'm trying to add data into firebase DB using angularjs but when click the add button nothing happens and function not called and no error appeared in console. Where is the problem in my code?
addPost.html
<body ng-controller="AddPostCtrl">
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item " href="#">Home</a>
<a class="blog-nav-item active" href="addPost.html">Add Post</a>
</nav>
</div> </div>
<div class="container">
<form class="form-horizontal" ng-submit="AddPost()">
<fieldset>
<!-- Form Name -->
<legend>Create Post</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="txtTitle">Post</label>
<div class="col-md-4">
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="Post name" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Description</label>
<div class="col-md-4">
<!--<textarea class="form-control" id="txtPost" name="txtPost"></textarea>-->
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<!--<input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Add" />-->
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Add" />
</div>
</div>
</fieldset>
</form>
</div>
</body>
addPost.js
'use strict';
angular.module('myApp.addPost', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/addPost', {
templateUrl: 'addPost/addPost.html',
controller: 'AddPostCtrl'
});
}]).controller('AddPostCtrl', ['$scope','$firebase',function($scope,$firebase) {
console.log("This was called.");
$scope.AddPost = function(){
var title = $scope.article.title;
var post = $scope.article.post;
var firebaseObj = new Firebase("https://xxxxxx.firebaseio.com/");
var fb = $firebase(firebaseObj);
fb.$push({ title: title,post: post}).then(function(ref) {
console.log(ref);
}, function(error) {
console.log("Error:", error);
});
}
}]);
scripts in index.html
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="addPost/addPost.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
Your problem is Async Loading... you loaded the firebase after script.js.... Your suppose to load it after like this:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="app.js"></script>
<script src="addPost/addPost.js"></script>
So now it actually knows methods and variables provided both by AngularFire and Firebase... Everything you Imported is basically a Js File.. It goes through angular first then Firebase, then Angularfire(Which needs to be imported after Firebase and AngularFire so it recieves variables and methods from them), and then finnaly your scripts which will use all the libaries available.. Hope this makes sense.
I am new to angularjs. I am stuck on one issue for last 24 hours and not getting any clue. Basically I have a simple submit form which is there in partial view html. This partial view appears when user click on signup link at index.html. Issue is when I press submit button it does not go to the mentioned controller, Instead it gives a following message :-
Cannot GET /signup?username=myusername&password=mypassword&login=Sign+in
But when I paste the same partial html code in index.html, it works fine it goes to the attached controller and print the alert statement. I am not having any idea why it is happening. Can somebody please help me to understand, what's the real cause of it????
index.html:
<!-- public/index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>My Cart</title>
<!-- JS -->
<script src="libs/jquery/dist/jquery-2.1.1.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap-modal.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/UserCtrl.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/controllers/MenuCtrl.js"></script>
<script src="js/controllers/AddCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/controllers/GeekCtrl.js"></script>
<script src="js/services/GeekService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
<!-- CSS-->
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
<link href="css/demo.css" rel="stylesheet">
<link href="css/yamm.css" rel="stylesheet">
<!-- Include jQuery Popup Overlay -->
<script src="http://vast-engineering.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>How it works</li>
<li>Service Area</li>
<li>Feedback</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Member Login <b class="caret"></b></a>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control input-sm" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control input-sm" id="exampleInputPassword2" placeholder="Password" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-sm">Sign in</button>
Forgot password?
</div>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<!-- ANGULAR DYNAMIC CONTENT -->
<div class="container">
<div ng-view>
</div>
</div>
</div>
</body>
</html>
and partial view : signup.html
<div ng-controller="AddController">
<form data-title="Sign in" data-value="login" class="tab-pane" name="login">
<input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" />
<input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" />
<input type="submit" name="login" value="Sign in" data-ng-click="submit(model)" />
</form>
</div>
Controller : AddCtrl.js
// public/js/controllers/NerdCtrl.js
angular.module('AddCtrl', []).controller('AddController', function($scope,$http) {
$scope.formData = {};
$scope.submit = function(){
alert('Add Ctrl');
};
});
I believe Angular is not able to locate the controller for your html.
The reason could be due to your declaration
angular.module('AddCtrl', [])
This creates a new module AddCtrl. Do you want module per controller?
Also has the module AddCtrl registered as dependency on the mail module.
Also make sure that angular.module('AddCtrl', []) is not declared multiple times. This syntax creates module. To retrieve module use angular.module('AddCtrl')