Book Image

Web Developer's Reference Guide

By : Joshua Johanan, Talha Khan, Ricardo Zea
Book Image

Web Developer's Reference Guide

By: Joshua Johanan, Talha Khan, Ricardo Zea

Overview of this book

This comprehensive reference guide takes you through each topic in web development and highlights the most popular and important elements of each area. Starting with HTML, you will learn key elements and attributes and how they relate to each other. Next, you will explore CSS pseudo-classes and pseudo-elements, followed by CSS properties and functions. This will introduce you to many powerful and new selectors. You will then move on to JavaScript. This section will not just introduce functions, but will provide you with an entire reference for the language and paradigms. You will discover more about three of the most popular frameworks today—Bootstrap, which builds on CSS, jQuery which builds on JavaScript, and AngularJS, which also builds on JavaScript. Finally, you will take a walk-through Node.js, which is a server-side framework that allows you to write programs in JavaScript.
Table of Contents (22 chapters)
Web Developer's Reference Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
9
JavaScript Expressions, Operators, Statements, and Arrays
Index

Forms


Forms are a core part of sending data to a server in HTML. As a result of this, Angular has some extra features that work with forms.

ngModel

Each form input will need ngModel defined to store the value in the scope. See Directives, ngModel for more information.

Here is a simple form that binds two text inputs:

<form name="form">
  First Name: <input type="text" name="firstname" ng-model="data.firstName" />
  Last Name: <input type="text" name="lastName" ng-model="data.lastName" />
</form>
{{data.firstName}} {{data.lastName}}

CSS classes

Angular will automatically add CSS classes to the form and elements that you can then target with CSS. Here is the list of CSS classes and when they are applied:

  • ng-valid: This denotes that the form or element is valid

  • ng-invalid: This denotes that the form or element is invalid

  • ng-pristine: This denotes that the control has not been changed

  • ng-dirty: This denotes that the control has been changed

Validation

Angular has features that...