0
Aşağıdaki kodu kullanıyorum - giriş sayfasını doğrulama ile birlikte gösterir. Ama bir şey yanlış gibi görünüyor ve tüm doğrulama metinleri her zaman gösterilir. Sorun nedir. Bunu ayrı bir denetleyici modülü olarak nasıl ekleyebilirim?neden kontrolör ve HTML bağlı değil?
<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: Ayrıca
'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..")
}
};
});
, aşağıdaki hatayı alıyorum:
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">Ekran Görüntüsü:
