I have an angularjs application using ui-router, when i access the following URL http://localhost:63342/UIRouter/customlogin, as per the ui-route configured it has to display the customlogin.html page but its not, it gives 404 error page
in the above url UIRouter is the application name and /customlogin is the state's url.
could somebody help me in getting this solved...please
below is the plnkr url
https://plnkr.co/edit/SPOr9IUWWSAIxNbfnBox?p=preview
below are my files
baseApp.js
angular.module('baseApp',['baseApp.routes']);
baseApp.routes.js
angular.module('baseApp.routes',['ui.router'])
.config(['$stateProvider','$urlRouterProvider','$httpProvider',function($stateProvider,$urlRouterProvider,$httpProvider){
console.log("in view");
$stateProvider
.state("login",{
url:'/customlogin',
templateUrl:'customlogin.html',
controller:'ContactLoginCtrl'
})
$urlRouterProvider.otherwise("/customlogin");
}]) ;
ContactLoginCtrl.js
angular.module('baseApp')
.controller('ContactLoginCtrl', ['$scope',function($scope){
console.log("in the controller")
}])
customlogin.html
<html lang="en" ng-app="baseApp">
<body>
<form name="contactLogin" ng-controller="ContactLoginCtrl" ng-submit="authenticate(userModel)">
<label for="name" >UserName:</label>
<input type="text" ng-model="userModel.username" /></br>
</br>
<label for="password" >PassWord: </label>
<input type="password" ng-model="userModel.password" />
</br>
</br>
<button type="submit" name="Login" >Login</button>
</form>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
<script src="baseApp.js"></script>
<script src="baseApp.routes.js"></script>
</body>
</html>
Among other adjustments, the most important is - to have a target for states. We need:
<div ui-view></div>
There is adjusted and working plunker
Related
I am trying to display validation message for text field which is not working for below code -
<form name="dummy">
<bloglist></bloglist>
</form>
<script type="text/ng-template" id="my">
<div>
<input type="text" name="first" ng-model="sample.hai" required/>
<span ng-show="dummy.first.$error.required">Required</span>
</div>
</script>
<script>
angular.module("DemoApp" [])
.component( 'bloglist' , {
templateUrl: 'my.html',
controller: function ($scope) {
}
});
</script>
AngularJS has bindings that you will use in place of HTML attributes in some cases. Instead of using native HTML5 required on your <input> use ng-required="true".
(edit) link to relevant documentation: https://docs.angularjs.org/api/ng/directive/ngRequired#!
(edit):
In your particular case, the form name in the template that invokes your directive is not accessible inside your directive. We give the directive form a unique name.
Additionally, using angularjs to display your (custom) error message can be done using ngMessages.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-messages.js"></script>
<body ng-app="DemoApp">
<form name="dummy">
<bloglist></bloglist>
</form>
</body>
<script src="/scripts/vendors/angular-messages/angular-messages.js"></script>
<script type="text/ng-template" id="my.html">
<div ng-form="directiveForm">
<input type="text" name="first" ng-model="sample" required/>
<pre>{{ directiveForm.first.$error | json }}</pre>
<div ng-messages="directiveForm.first.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
</div>
</div>
</script>
<script>
angular.module("DemoApp", ['ngMessages'])
.component('bloglist', {
templateUrl: 'my.html',
controller: function($scope) {
}
});
</script>
I am new to Angularjs. I'm trying to create a simple page to connect angularjs and backend laravel database by follow some tutorials.
I keep receive error as:
Error: $injector:unpr Unknown Provider.
I dont know what was wrong in the code. I hope anyone help 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);
}
});
Please change the below block of code.
var app = angular.module('App',['commentService']);
app.controller('Controller',function($scope,comment){
$scope.commentData={};
$scope.submitComment=function(){
comment.save($scope.commentData);
}
});
Since there is no factory with name as Comment in your code. The alternate solution will be to write a factory with name as Comment.
I am using angular js and I am trying to use route provider to load multiple html pages on a single page application. However I declared my module,
controller and in my html have a button that sends to the controller to redirect the html to the new partial.
What am I doing wrong?
PS. I'm not sure how the imports work as in if I use it in one html do I get it in another? As well why can I only import one module into one file
I get an injector error if I import it into two separate HTML files.
//module.js
var mainM = angular.module('mainM', ['ngRoute', 'ngResource']);
mainM.config(["$routeProvider"], function($routeProvider))
{
$routeProvider
.when('/',
{
controller: "homeController",
templateUrl : 'index.html'
})
.when('/signIn',
{
controller: "controllSignIn",
templateUrl : 'partials/MainPage/signIn.html'
})
.when('Website/index.html',
{
controller: "controllSignUp",
templateUrl : 'partials/MainPage/signUp.html'
})
.when('/newProject',
{
controller: "controllNewProejct",
templateUrl : 'partials/MainPage/newProject.html'
})
}
//End of config routing -------------------------------------------------------
//Controllers
mainM.controller('controllSignUp', function($scope)
{
//Submit Data for sign up
$scope.credentials = [
{word: "Testing"},
{word: "Hello"}
]
$scope.changeView = function ()
{
$location.path('/partials/MainPage/signUp.html');
//$scope.uname += "123";
alert('called');
};
});
<!DOCTYPE html>
<!-- Sign up-->
<html lang = "en" ng-app ="mainM">
<head>
<title>Project Buddy</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="/scripts/module.js"></script>
<link rel="stylesheet" href="css/signUp.css" />
</head>
<body data-ng-app = "mainM">
<div data-ng-controller="controllSignUp">
<center>
<!-- Sign Up -->
<form action = "http://www.google.com/formsubmission" method = "POST">
<label>Username:</label>
<input type="text" ng-model="uname" placeholder="Enter username" />
</br>
<label>Email Address:</label>
<input type="text" ng-model="ename" placeholder="Enter email address" />
</br>
<label>Password:</label>
<input type="password" ng-model="psw1" placeholder="Enter Password" />
</br>
<label>Confirm Password:</label>
<input type="password" ng-model="psw2" placeholder="Enter Password" />
<button type="button" ng-click="signUpUser()">Sign Up</button>
</form >
</center>
</div>
</body>
</html>
<!DOCTYPE html>
<!-- index -->
<html lang = "en">
<head>
<title>Project Buddy</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
</head>
<body>
<!-- Drop down menu -->
<div id = "dropDown" ng-controller = "controllSignUp">
<button id = "SignUp" ng-click="changeView()">Sign Up</button><br/>
</div>
</body>
</html>
I'm trying to use the Angular Materials snippet for a form input field with ng-messages for displaying error messages.
When I clear and fill this field multiple times, it somehow stores the 'old' error messages, showing x times 'Address is mandatory'.
If I remove the element outside the md-input-container, it works fine (but I want the ng-messages inside the md-input-container obv).
<div layout-gt-sm="row" ng-show="showAddress">
<md-input-container class="md-block" flex-gt-sm="">
<md-icon md-font-library="material-icons">home</md-icon>
<label>Adres</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
Update:
Ok I was using an older version of Angular and Angular-Animate (1.3.15).
Updating this resulted in the fix.
First check if you have ngMessages injected in your module again, second you can check if you have a form with the name 'orderForm' and last you must check if your ng-model has a controller or something where you have the data.
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style type="text/css">
</style>
</head>
<body ng-app="testApp" ng-controller="AppCtrl">
<form name="orderForm">
<div layout-gt-sm="row" >
<md-input-container class="md-block" flex-gt-sm="">
<label>Address</label>
<input ng-model="address" name="address" required />
<div ng-messages="orderForm.address.$error" role="alert">
<div ng-message="required">Address is mandatory</div>
</div>
</md-input-container>
</div>
</form>
<script type="text/javascript">
var app = angular.module("testApp", ["ngMaterial","ngMessages"])
.controller('AppCtrl', function($scope) {
$scope.address = 'Prueba';
});
</script>
</body>
</html>
Had the same issue, installing ngMessages into your app resolved this issue for me.
What is the recommended way to submit a form with angularjs. Will all the different form fields be automatically turned into JSON?
<DOCTYPE html>
<html>
<head></head>
<body>
<div ng-app='mymodule' ng-controller="PeopleController as pc">
<form name="myform" ng-submit="pc.submit(person)">
<input ng-model="person.name"/>
<input ng-model="person.age"/>
<input type="submit" />
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script>
(function (){
angular.module('mymodule',[])
.controller('PeopleController',function($scope,$http) {
$scope.person={'name':'john'};
this.submit = function(p){$http.post('/path/to/my.php',p).success(function(e){console.log(e);});};
});
})();
</script>
</body>
</html>