var myApp = angular.module("myApp", []);
define('profession', {
name: "Software Engineer"
});
define('todo', ['profession'], function(profession) {
myApp.controller('myController', function($scope) {
$scope.profession = profession;
$scope.reset = function() {
$scope.firstName = "";
$scope.lastName = "";
$scope.email = "";
}
});
});
// angular bootstrap
require(['todo'], function() {
angular.bootstrap(document, ['myApp']);
});
<h2>AngularJS Events</h2>
<div ng-controller="myController">
<form name="studentForm" novalidate>
<table border="0">
<tr>
<td>First name:</td>
<td>
<input name="firstname" type="text" ng-model="firstName" placeholder="Abhimanyu" required> <span style="color:red" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show="studentForm.firstname.$error.required">First Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Last name:</td>
<td>
<input name="lastname" type="text" ng-model="lastName" placeholder="Prasad" required> <span style="color:red" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show="studentForm.lastname.$error.required">Last Name is required.</span>
</span>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input name="email" type="email" ng-model="email" length="100" placeholder="[email protected]" required> <span style="color:red" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show="studentForm.email.$error.required">Email is required.</span>
<span ng-show="studentForm.email.$error.email">Invalid email address.</span>
</span>
</td>
</tr>
<tr>
<td>Profession:</td>
<td>
<input name="profession" type="text" ng-value="profession.name" ng-disabled="true" />
</td>
</tr>
<tr>
<td>
<button ng-click="reset()">Reset</button>
</td>
<td>
<button ng-disabled="studentForm.firstname.$error.required ||
studentForm.lastname.$error.required ||
studentForm.email.$error.required || studentForm.email.$error.email" ng-click="submit()">Submit</button>
</td>
</tr>
</table>
</form>
</div>
table,
th,
td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
External resources loaded into this fiddle: