AngularJS Modules
• An AngularJS module defines an application.
• The module is a container for the different parts of an application.
• The module is a container for the application controllers.
• Controllers always belong to a module
Creating a Module
A module is created by using the AngularJS function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Adding a Controller
• Add a controller to your application, and refer to the controller
with the ng-controller directive:
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
• The AngularJS application is defined by ng-app="myApp". The
application runs inside the <div>.
• The ng-controller="myCtrl" attribute is an AngularJS directive. It
defines a controller.
• The myCtrl function is a JavaScript function.
• AngularJS will invoke the controller with a $scope object.
• In AngularJS, $scope is the application object (the owner of
application variables and functions).
• The controller creates two properties (variables) in the scope
(firstName and lastName).
• The ng-model directives bind the input fields to the controller
properties (firstName and lastName)
What is Scope?
• Scope is a JavaScript object which contains model data.
function ($scope) { }
• $scope is a parameter of JavaScript function which is called by a
controller.
• Model data is accessed by the $scope object.
• Assigning values to the model
“$scope.property = value”
<script>
function ($scope) {
$scope.firstNumber = 23;
$scope.secondNumber = 63;
}</script>
AngularJS Forms
• Forms in AngularJS provides data-binding and validation of input
controls.
• AngularJS enriches form filling and validation.
Input Controls
Input controls are the HTML input elements:
• Input field
• Checkbox
• Radiobutton
• Button
• SelectBox(Dropdowns)
AngularJS Checkbox
• A checkbox has a value true or false.
• Apply the ng-model directive to a checkbox, and use its value in
your application.
<div ng-app="">
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
</div>
<p>The header's ng-show attribute is set to true when the checkbox is
checked.</p>
Angular JS Radio button
• ng-model directive is used to bind radio buttons in your applications.
• ng-switch-> to hide and show HTML sections depending on the value of
the radio buttons
• Radio buttons with the same ng-model can have different values, but
only the selected one will be used.
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
AngularJS Selectbox
• ng-model directive is used to bind select boxes to your application
• Bind select boxes to your application with the ng-model directive.
• The property defined in the ng-model attribute will have the value of the
selected option in the selectbox.
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
Input fields
we can use place-holders to predefine the input box for the users
convenience.
If the form has an error than the user does not have to put the right
details all over again.
<input type="text" value="name" ng-model="name" placeholder="name">
<form>
<div class="form-group">
<label for="firstName">Name</label>
<input type="text"
id="firstName"
placeholder="Name">
</div> </form>
Select(Dropdowns)
• In Select, the selected value gets stored in the variable defined in
the ngModel.
<form>
<select ngModel name="mychoice" #myChoice="ngModel">
<option>A</option>
<option>E</option>
<option>I</option>
<option>O</option>
<option>U</option>
</select>
<p>The selected option from Dropdown {{ myChoice.value }}</p>
</form>
Form Validation
• AngularJS offers client-side form validation.
• AngularJS monitors the state of the form and input fields (input, textarea,
select), and lets you notify the user about the current state.
• AngularJS also holds information about whether they have been touched,
or modified, or not.
• You can use standard HTML5 attributes to validate input, or you can make
your own validation functions.
Required
• Use the HTML5 attribute required to specify that the input field must be
filled out:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<
h1>{{myForm.myInput.$valid}}</h1>
E-mail
• Use the HTML5 type email to specify that the value must be an e-mail:
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Nested Forms with ng-form
• The ng-form Directive in AngularJS is used to create a nested form i.e.
one form inside the other form.
• It specifies an inherit control from the HTML form.
• It creates a control group inside a form directive which can be used to
determine the validity of a sub-group of controls.
Syntax
<ng-form [name="string"]>
Contents...
</ng-form>
