0
Ich habe den folgenden Code - der die Anmeldeseite mit Validierung anzeigt. Sieht jedoch so aus, als ob etwas nicht stimmt und alle Validierungstexte immer angezeigt werden. Was ist los mit dir. Wie kann ich es als separates Controller-Modul hinzufügen?warum der Controller und HTML nicht verknüpft sind?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="angularCordova01App">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<!--<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">angularCordovaTickrv01</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>-->
<header class="header">
<h4> Welcome</h4>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer footertxt">
<div class="container">
<p>@Copyright </p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<!-- <script>
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>-->
<script type="text/javascript" src="cordova.js"></script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/services/cordova.js"></script>
<!-- endbuild -->
</body>
</html>main.html:
<div class="container" ng-controller="MainCtrl as main">
<div class="row">
<div class="col-xs-12">
<!-- FORM ============ -->
<form name="userForm" ng-submit="submitForm()" novalidate>
<!-- USERNAME -->
<div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- Password -->
<div class="form-group" ng-class="{ 'has-error' : userForm.pwd.$invalid && !userForm.pwd.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="user.pwd">
<p ng-show="userForm.pwd.$invalid && !userForm.pwd.$pristine" class="help-block">Enter a valid Password.</p>
</div>
<button type="submit" class="btn btn-primary col-xs-12" ng-disabled="userForm.$invalid">Submit</button>
</form>
</div>
</div>
</div>
MainCtrl:
'use strict';
/**
* @ngdoc function
* @name angularCordova01App.controller:MainCtrl
* @description
* # MainCtrl
* Controller of the angularCordovaTickrv01App
*/
angular.module('angularCordova01App')
.controller('MainCtrl', function ($scope, cordova) {
console.log("Hello...")
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
cordova.ready.then(function() {
alert('Cordova is ready');
});
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
console.log("For submitted..")
}
};
});
Auch bekomme ich folgende Fehlermeldung:
ReferenceError: $q is not defined
at Object.<anonymous> (http://localhost:9000/scripts/services/cordova.js:15:13)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4625:19)
at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:4464:37)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4625:19)
at http://localhost:9000/bower_components/angular/angular.js:4424:37
at getService (http://localhost:9000/bower_components/angular/angular.js:4571:39)
at injectionArgs (http://localhost:9000/bower_components/angular/angular.js:4595:58)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4637:18)
at $controller (http://localhost:9000/bower_components/angular/angular.js:10042:28)
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:1007:26) <div ng-view="" class="ng-scope" data-ng-animate="1">Screenshot:
