« Previous Next »

AngularJS and W3.CSS

You can easily use w3.css style sheet together with AngularJS. This chapter demonstrates how.

W3.CSS

To include W3.CSS in your AngularJS application, add the following line to the head of your document:

If you want to study W3.CSS Tutorial, visit our W3.CSS Tutorial.

Below is a complete HTML example, with all AngularJS directives and W3.CSS classes explained.

HTML Code

Output :

Directives (Used Above) Explained

AngularJS Directive Reference

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> is clicked
<h3 ng-show>	Show the <h3> element if `edit = true`
<h3 ng-hide>	Hide the form if `hideform = true`, and hide the <h3> if `edit = true`
<input ng-model>	Bind the <input> element to the application
<button ng-disabled>	Disables the <button> if `error` or `incomplete = true`

W3.CSS Classes Explained

Element	Class	Defines
<div>	w3-container	A content container
<table>	w3-table	A table
<table>	w3-bordered	A bordered table
<table>	w3-striped	A striped table
<button>	w3-btn	A button
<button>	w3-green	A green button
<button>	w3-ripple	A ripple effect when you click the button
<input>	w3-input	An input field
<input>	w3-border	A border on the input field

JavaScript Code

AngularJS `userCtrl` Source Code

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; } }; });

JavaScript Code Explained

$scope Properties in AngularJS

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 false 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 completeness