I am trying to setup a very basic login functiniolity with AngularJS
This is what I have:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/angular.js"></script>
</head>
<body ng-app ="MyApp">
<script src="/Scripts/ng/ngLogin.js"></script>
<div id="loginBox" ng-controller="loginCtrl">
<form action="/" id="userLogin">
<label>User id</label>
<input type="text" ng-model="userId" />
<label>Password</label>
<input type="text" ng-model="password" />
<input type="button" name="loginSubmit" ng-click="submit()" value="Login" />
</form>
</div>
</body>
</html>
ngLogin.js
angular.module("MyApp").controller('loginCtrl', ['$scope', '$log', function($scope, $log) {
alert($scope.userId);
$scope.submit = function () {
var usrName = $scope.userId;
var password = $scope.password;
alert(usrName);
$log.log(usrName);
}
}]);
But when I click the login button nothing happens neither the alert nor anything in the console log, what am I doing wrong?
Pass a dependencies array when you register your module:
angular.module("MyApp", [])
Error: [$injector:nomod] Module 'MyApp' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
Missing - []
angular.module("MyApp",[])
Related
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
I have an ng-required condition on my TextEdit.
When I check the google inspection screen, I can see that my condition works properly (Test.Pack.substring(0,2) != 'RR')
However, I see that even though ng-required = false, it is still has a required = "required" property on the element.
my code and screenshot in below. Is there any idea about this?
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="TestList" id="InsertForm" ng-submit="insert(Test);">
<div>
<input ng-model="Test.Pack" >
</div>
<div>
<input ng-model="Test.LM" ng-required="{{Test.Pack.substring(0,2) != 'RR'}}">
</div>
<div>
<button ng-disabled="TestList.$invalid">Test Button</button>
</div>
</form>
</div>
</body>
</html>
<script src="angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
app.controller('myCtrl', function($scope) {
});
</script>
The value passed to ng-required should be boolean.So change this
<div>
<input ng-model="Test.LM" ng-required="{{Test.Pack.substring(0,2) != 'RR'}}">
</div>
to
<div>
<input ng-model="Test.LM" ng-required="Test.Pack.substring(0,2) != 'RR'">
</div>
If you look at this plunk, you see that if I change the model by using some function, the form doesn't get informed about it and it doesn't become dirty, how can I achieve this behavior?
$scope.obj = {};
$scope.setName = function() {
$scope.name = "set name !";
}
<form name="form">
<input type="text" ng-model="name" />
</form>
<button type="button" ng-click="setName()">
setName
</button>
<br />
{{form.$dirty}}
That's by design. The form becomes dirty is the user uses its control, not if the code modifies its underlying model.
But you can make the form (or a field of the form) dirty by using the form controller published in the scope by the form directive. In your case, since the form name is form, and assuming your input has a name:
<input type="text" name="name" ng-model="name" />
$scope.form.name.$setDirty()
have you tried somehting like:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = "";
$scope.obj = {};
$scope.setName = function() {
$scope.name = "set name !";
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="form">
<input type="text" ng-model="name" required />
</form>
<button type="button" ng-click="setName()">
setName
</button>
<br />
{{form.$dirty}}
<br />
{{form.$touched}}
<br>
{{form.$invalid}}
</body>
</html>
add name attribute to your input element, here is the update plunker of yours
Using $scope.formName.filedName.$setDirty();
I have a html file
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Registration</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/registration.js"></script>
</head>
<body>
<header></header>
<div class="page">
<main class="cf" ng-view>
{{message}}</main>
</div>
</body>
</html>
Then I have app.js where i implement route providers.
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/login',{
templateUrl:'views/login.html',
controller:'RegistrationController'
}).
when('/register',{
templateUrl: 'views/register.html',
controller: 'RegistrationController'
}).
when('/success',{
templateUrl: 'views/success.html',
controller: 'SuccessController'
}).
otherwise({
redirectTo:'/login'
});
}]);
Then I have a registration.js where I implement the controller
myApp.controller('RegistrationController',['$scope',function($scope){
$scope.message="Welcome to my app";
}]);
this is the view file I am referring to:
<section class="card login">
<form name="myform"
novalidate>
<div class="textintro">
<h1>Hi there!</h1>
<p>Log-in to access the awesomeness!</p>
<p>{{message}}</p>
</div>
<fieldset>
<input type="email" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
</fieldset>
<button type="submit" class="btn">Login</button>
<p>or register</p>
</form>
</section>
The {{message}} is displayed as it is when I run the website !! I checked the console it says failed to load the module, what might be my mistake here or how can I solve this
Is your controller in the same file as the route config or it is separate file?
If it is in an extra file you have to replace
myApp.controller('RegistrationController',['$scope',function($scope){
with
angular.module('myApp').controller('RegistrationController',['$scope',function($scope){
If it is in the same file, please post the error message here
I am still relatively new to angular, I am trying to build something but I keep getting the error that module 'ngDirTest is not available', I have put it in the body tag:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Testing directives</title>
<script src="../scripts/angular.js"></script>
<script type="text/javascript">
angular.module('ngDirTest', [
//controllers
])
</script>
<script src="../scripts/populate.js"></script>
<script src="../directive/GenericDirective.js"></script>
</head>
<body ng-app="ngDirTest">
<div ng-controller="PopulateCtrl">
<input type="text" generic-directive ng-model="nameone"/>
<input type="text" generic-directive ng-model="nametwo"/>
<input type="text" generic-directive ng-model="namethree"/>
<input type="text" generic-directive ng-model="namefour"/>
<input type="text" generic-directive ng-model="namefive"/>
<input type="text" generic-directive ng-model="namesix"/>
</div>
</body>
</html>
I also have this controller:
angular.module("ngDirTest").controller('PopulateCtrl', ['$scope', function($scope) {
//
}]);
I tried specifying the module at the top, but problem is I am not sure how to define controllers in here:
angular.module('ngDirTest', [/*controllers and other dependancies*/])
it also complains that scope isn't defined, which I don't understand since angular is defined at the top...
You don't need to define the controllers in the module declaration, that should be used for declaring other module dependencies.
Try this for your module declaration:
angular.module('ngdirTest', []);
And your controller looks okay
angular.module("ngDirTest").controller('PopulateCtrl', ['$scope', function($scope) {
// ...
}]);
See jsBin using your markup pasted above