AngularJS Introduction
AngularJS is a structural framework for dynamic web apps. In this course, you will
learn
AngularJS architecture
Models and controllers
Directives and types
Form validation
Filters
Services and types
What is AngularJS?
This video introduces you to AngularJS. The speaker explains about single-page
application, the advantages of AngularJS in building SPA and the core features of
AngularJS
Linking AngularJS with HTML
If you have downloaded AngularJS to your machine, you may include the
script from your local machine into the HTML code as follows:
<script
src="script/angular.js"
type="text/javascript"?
</script>
Following is the way to include script from CDN:
<script
src="
"
type="text/javascript">
</script>
Development environment
You can setup your development environment as follows.
1.
An IDE / text editor - Webstorm, Sublime Text, Visual Studio or even a
notepad++
2.
node - To compile and run angular project into local
install node
npm install -g http-server
3.
After installation cd into your project folder
run http-server -o
4.
A browser. Chrome is preferred
5.
Git - Version control system.
Bootstrapping AngularJS
Bootstrapping
in AngularJS is just the initialization of Angular app.
The
ng-app
directive indicates which part of the page (either entire HTML
page or portion of it) is the root of the Angular application.
Angular reads the HTML within that root and compiles it into an internal
representation. This reading and compiling is the
bootstrapping process
.
There are two ways of bootstrapping AngularJS. One is
Automatic
Bootstrapping
and the other one is
Manual Bootstrapping
using a Script.
3 of 8
AngularJS Scope
Scope
is an object that refers to the application model. It binds HTML (
view
) and
JavaScript(
controller
).
Every controller has an associated
scope*** object. A controller
function is responsible for setting model properties and
functions. This can be done only through
***scope
∗∗∗
object.Acontrollerfunctionisresponsibleforsettingm
odelpropertiesandfunctions.Thiscanbedoneonlythrough
∗∗∗
scop
e
. Example:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
Automatic Bootstrapping
When
ng-app
directive is added to the root of your application i.e., on
the
<html>
tag or
<body>
tag, angular is auto-bootstrapped to the application.
<html ng-app="myApp">
When AngularJS finds
ng-app
directive, it loads the module associated with it and
then compiles the DOM
Manual Bootstrapping
In
Manual bootstrapping
, initialization happens inside the script after your app is
created.
In the following example, the application
myApp
is bootstrapped after creating the
same using
angular.module(‘myApp’, [ ])
.
You've reached the end of your free preview.
Want to read all 25 pages?
- Winter '20
- Document Object Model, AngularJS, ng-app
