AngularJS and subhodaya.css
You can easily use subhodaya.css style sheet together with AngularJS. This chapter demonstrates how.
subhodaya.css
To include subhodaya.css in your AngularJS application, add the following line to the head of your document:
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
If you want to study subhodaya.css, visit our subhodaya.css Tutorial.
Below is a complete HTML example, with all AngularJS directives and subhodaya.css classes explained.
HTML Code
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="subhodaya-container">
<h3>Users</h3>
<table class="subhodaya-table subhodaya-bordered subhodaya-striped">
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="user in users">
<td>
<button class="subhodaya-btn subhodaya-ripple" ng-click="editUser(user.id)">✎ Edit</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr>
</table>
<br>
<button class="subhodaya-btn subhodaya-green subhodaya-ripple" ng-click="editUser('new')">✎ Create New User</button>
<form ng-hide="hideform">
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<label>First Name:</label>
<input class="subhodaya-input subhodaya-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
<br>
<label>Last Name:</label>
<input class="subhodaya-input subhodaya-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
<br>
<label>Password:</label>
<input class="subhodaya-input subhodaya-border" type="password" ng-model="passw1" placeholder="Password">
<br>
<label>Repeat:</label>
<input class="subhodaya-input subhodaya-border" type="password" ng-model="passw2" placeholder="Repeat Password">
<br>
<button class="subhodaya-btn subhodaya-green subhodaya-ripple" ng-disabled="error || incomplete">✔ Save Changes</button>
</form>
</div>
<script src= "myUsers.js"></script>
</body>
</html>
Try it Yourself »
<html>
<link rel="stylesheet" href="http://tutorials/lib/subhodaya.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="subhodaya-container">
<h3>Users</h3>
<table class="subhodaya-table subhodaya-bordered subhodaya-striped">
<tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="user in users">
<td>
<button class="subhodaya-btn subhodaya-ripple" ng-click="editUser(user.id)">✎ Edit</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr>
</table>
<br>
<button class="subhodaya-btn subhodaya-green subhodaya-ripple" ng-click="editUser('new')">✎ Create New User</button>
<form ng-hide="hideform">
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<label>First Name:</label>
<input class="subhodaya-input subhodaya-border" type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
<br>
<label>Last Name:</label>
<input class="subhodaya-input subhodaya-border" type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
<br>
<label>Password:</label>
<input class="subhodaya-input subhodaya-border" type="password" ng-model="passw1" placeholder="Password">
<br>
<label>Repeat:</label>
<input class="subhodaya-input subhodaya-border" type="password" ng-model="passw2" placeholder="Repeat Password">
<br>
<button class="subhodaya-btn subhodaya-green subhodaya-ripple" ng-disabled="error || incomplete">✔ Save Changes</button>
</form>
</div>
<script src= "myUsers.js"></script>
</body>
</html>
Directives (Used Above) Explained
| AngularJS Directive | Description |
|---|---|
| <body ng-app | Defines an application for the <body> element |
| <body ng-controller | Defines a controller for the <body> element |
| <tr ng-repeat | Repeats the <tr> element for each user in users |
| <button ng-click | Invoke the function editUser() when the <button> element is clicked |
| <h3 ng-show | Show the <h3>s element if edit = true |
| <h3 ng-hide | Hide the form if hideform = true, and hide the <h3> element if edit = true |
| <input ng-model | Bind the <input> element to the application |
| <button ng-disabled | Disables the <button> element if error or incomplete = true |
subhodaya.css Classes Explained
| Element | Class | Defines |
|---|---|---|
| <div> | subhodaya-container | A content container |
| <table> | subhodaya-table | A table |
| <table> | subhodaya-bordered | A bordered table |
| <table> | subhodaya-striped | A striped table |
| <button> | subhodaya-btn | A button |
| <button> | subhodaya-green | A green button |
| <button> | subhodaya-ripple | A ripple effect when you click the button |
| <input> | subhodaya-input | An input field |
| <input> | subhodaya-border | A border on the input field |
JavaScript Code
myUsers.js
angular.module('myApp', []).controller('userCtrl',
function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.hideform = true;
$scope.editUser = function(id) {
$scope.hideform = false;
if (id == 'new') {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};
});
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.hideform = true;
$scope.editUser = function(id) {
$scope.hideform = false;
if (id == 'new') {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});
$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};
});
JavaScript Code Explained
| Scope Properties | Used for |
|---|---|
| $scope.fName | Model variable (user first name) |
| $scope.lName | Model variable (user last name) |
| $scope.passw1 | Model variable (user password 1) |
| $scope.passw2 | Model variable (user password 2) |
| $scope.users | Model variable (array of users) |
| $scope.edit | Set to true when user clicks on 'Create user'. |
| $scope.hideform | Set to true when user clicks on 'Edit' or 'Create user'. |
| $scope.error | Set to true if passw1 not equal passw2 |
| $scope.incomplete | Set to true if any field is empty (length = 0) |
| $scope.editUser | Sets model variables |
| $scope.$watch | Watches model variables |
| $scope.test | Tests model variables for errors and incompleteness |
