Angular JS

What is Angular JS?

you can run angular js in your html itself by adding a script file to the file.
https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
or just click the above link and copy the code and create a new file named
angular.min.js and paste the code inside it.

In the lab they may be providing the angular.min.js file or you can just
byheart the url.
 Creating a new Angular JS project
open VS code or your preferred text editor and create a simple html file.
 Angular JS extends HTML!
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input,select,
textarea) to application data.
The ng-bind directive binds application data to the HTML view.
ng-init directives intializes angular js application variables
Angular JS Expressions
AngularJS binds data to HTML using expressions.
They can be written inside double curly brackets: {{ expression }}.
AngularJS expressions are much like JavaScript expressions: They can
contain literals, operators, and variables.
AngularJS numbers
AngularJS Strings

or you can use ng-bind

AngularJS Arrays
AngularJS Modules
 What is an AngularJS module?
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
Adding a controller
Directives
AngularJS Directives
AngularJS lets you extend HTML with new attributes
AngularJS has a set of built-in directives which offers functionality
The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
Data Binding
The {{ firstName }} expression, in the example above, is an AngularJS data
binding expression.
{{ firstName }} is bound with ng-model="firstName"
Repeating HTML Elements
The ng-repeat directive repeats an HTML element:

The ng-repeat directive actually clones HTML elements once for each item
in a collection.
The ng-repeat directive used on an array of objects:
 ng-app Directive
The ng-app directive defines the root element of an AngularJS application
The ng-app directive will automatically initialize the application when a
web page is loaded..

ng-init Directive
The ng-init directive defines initial values for an AngularJS application.
Normally, you will not use ng-init. You will use a controller or module
instead.
You will learn more about controllers and modules later.

ng-model Directive
The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
 Validate User Input
The ng-model directive can provide type validation for application data
(number, e-mail, required):
 AngularJS Controllers
AngularJS controllers control the data of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScript
object constructor.
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).
 AngularJS Scope
The scope is the binding part between the HTML (view) and the JavaScript
(controller).
The scope is an object with the available properties and methods.
The scope is available for both the view and the controller.
When you make a controller in AngularJS, you pass the $scope object as
an argument.
When adding properties to the $scope object in the controller, the view
(HTML) gets access to these properties.
In the view, you do not use the prefix $scope, you just refer to a property
name, like {{carname}}.
If we consider an AngularJS application to consist of:
View, which is the HTML.
Model, which is the data available for the current view.
Controller, which is the JavaScript function that
makes/changes/removes/controls the data.
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are
available for both the view and the controller.
 AngularJS Filters
Filters can be added in AngularJS to format data.
AngularJS provides filters to transform data:
currency Format a number to a currency format.
date Format a date to a specified format.
filter Select a subset of items from an array.
json Format an object to a JSON string.
limitTo Limits an array/string, into a specified number of
elements/characters.
lowercase Format a string to lower case.
number Format a number to a string.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.
 Adding Filters to Expressions
Filters can be added to expressions by using the pipe character |, followed by
a filter.
 Adding Filters to Directives
Filters are added to directives, like ng-repeat, by using the pipe character |,
followed by a filter:
The currency Filter
The filter Filter
The filter filter selects a subset of an array.
The filter filter can only be used on arrays, and it returns an array
containing only the matching items.
Filter an Array Based on User Input
The date Filter
Display the number as a date format:
The date filter formats a date to a specified format.
The date can be a date object, milliseconds, or a datetime string like
"2016-01-05T09:05:05.035Z"
By default, the format is "MMM d, y" (Jan 5, 2016).
The limitTo Filter
The limitTo filter returns an array or a string containing only a specified number of elements.
When the limitTo filter is used for arrays, it returns an array containing only the specified number of items.
When the limitTo filter is used for strings, it returns a string containing, only the specified number of
characters.
When the limitTo filter is used for numbers, it returns a string containing only the specified number of digits.
Use negative numbers to return elements starting from the end of the element, instead of the beginning.
The orderBy filter
The orderBy filter allows us to sort an array.
By default, strings are sorted alphabetically, and numbers are sorted
numerically.
 for forms in angular js
please visit:
https://www.w3schools.com/angular/angular_forms.asp
The end