AngularJS Introduction, how to run Angular

JAVASCRIPT FRAMEWORK
• A JavaScript framework is a collection of JavaScript code libraries that
provide a web developer with pre-written code for routine programming
tasks. Frameworks are structures with a particular context and help you
create web applications within that context.
• It is completely possible to build strong web applications without JavaScript
frameworks, but frameworks provide a template that handles common
programming patterns. Each time you have to build an application, you
don’t need to write code for every single feature from scratch. Instead, you
can build upon an existing feature set.
• JavaScript frameworks, like most other frameworks, provide some rules
and guidelines. Using these rules and guidelines, any developer can make
complex applications faster and more efficiently than if they decided to
build from scratch. The rules and guidelines help shape and organize your
website or web application too!

• For example, think about a potter’s wheel where you can build pots.
The potter’s wheel is your framework; it has certain consistencies that
you have to work with. The wheel rotates, and you can use that
rotation to build pots of different shapes and sizes.
• You can build pots, plates, cups, bowls, or even cylindrical sculptures.
But you can’t build a house with it; you need to find a different
framework for that.

MODEL VIEW CONTROLLER (MVC)
• Modern JavaScript frameworks use a software design pattern called
Model–View–Controller. It is commonly used for developing user
interfaces that divide related programming logic into three
interconnected elements.
• The model is the central web component of the pattern as it is the
application’s dynamic data structure. It manages the data of the
application.
• The view consists of all the code that has to do with representing the
application’s data — the code for the user interface.
• The controller is the interpreter. It accepts inputs and converts them
into commands for the model or view.
• Frameworks are built around the MVC design pattern to provide
structure and adaptability in software development.

• POPULAR JAVASCRIPT FRAMEWORKS
• JavaScript is one of the most popular and widely used programming
languages globally and has more frameworks than any other
language. Since JavaScript is used for both client-side and server-side
code, there are many frameworks to work with. Some of the most
popular frameworks include:

AngularJS Introduction
• AngularJS is a JavaScript framework. It can be added to an HTML
page with a <script> tag.
• AngularJS extends HTML attributes with Directives, and binds data to
HTML with Expressions.
• AngularJS is a JavaScript framework written in JavaScript.
• AngularJS is distributed as a JavaScript file, and can be added to a
web page with a script tag:
• <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/an
gular.min.js"></script>

AngularJS 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.

Creating AngularJS Application
Step 1: Load framework
Being a pure JavaScript framework, it can be added using <Script> tag.
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Step 2: Define AngularJS application using ng-app directive
<div ng-app = ""> ...</div>
Step 3: Define a model name using ng-model directive
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
Step 4: Bind the value of above model defined using ng-bind directive
<p>Hello <span ng-bind = "name"></span>!</p>
Executing AngularJS Application
Use the above-mentioned three steps in an HTML page.

• AngularJS Example
• <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/an
gular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

• Example explained:
• AngularJS starts automatically when the web page has loaded.
• The ng-app directive tells AngularJS that the <div> element is the
"owner" of an AngularJS application.
• The ng-model directive binds the value of the input field to the
application variable name.
• The ng-bind directive binds the content of the <p> element to the
application variable name.

• AngularJS - Directives
• AngularJS directives are used to extend HTML. They are special
attributes starting with ng-prefix. Let us discuss the following
directives −
• ng-app − This directive starts an AngularJS Application.
• ng-init − This directive initializes application data.
• ng-model − This directive defines the model that is variable to be
used in AngularJS.
• ng-repeat − This directive repeats HTML elements for each item in a
collection.

AngularJS - Expressions
Expressions are used to bind application data to HTML. Expressions are
written inside double curly braces such as in {{ expression}}. Expressions
behave similar to ngbind directives. AngularJS expressions are pure
JavaScript expressions and output the data where they are used.
Using numbers
<p>Expense on Books : {{cost * quantity}} Rs</p>
Using Strings
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
Using Object
<p>Roll No: {{student.rollno}}</p>
Using Array
<p>Marks(Math): {{marks[3]}}</p>

<html>
<head>
<title>AngularJS Expressions</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "quantity = 1;cost = 30; student =
{firstname:'Mahesh',lastname:'Parashar',rollno:101};
marks = [80,90,75,73,60]">
<p>Hello {{student.firstname + " " + student.lastname}}!</p> <p>Expense on Books :
{{cost * quantity}} Rs</p>
<p>Roll No: {{student.rollno}}</p>
<p>Marks(Math): {{marks[3]}}</p>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>

• AngularJS Controllers
• 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.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br><br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

Application explained:
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).

Controller Methods
• The example above demonstrated a controller object with two properties: lastName and
firstName.
• A controller can also have methods (variables as functions):
• <div ng-app="myApp" ng-controller="personCtrl">
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>

• Controllers In External Files
• In larger applications, it is common to store controllers in external files.
• Just copy the code between the <script> tags into an external file
named personController.js:
• <div ng-app="myApp" ng-controller="personCtrl">
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>

AngularJS Introduction, how to run Angular

Recommended

More Related Content

Similar to AngularJS Introduction, how to run Angular (20)

Recently uploaded (20)

AngularJS Introduction, how to run Angular