Friday 30 June 2017

AngularJS - MVC Architecture

AngularJS - MVC Architecture


Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts −
  • Model − It is the lowest level of the pattern responsible for maintaining data.
  • View − It is responsible for displaying all or a portion of the data to the user.
  • Controller − It is a software Code that controls the interactions between the Model and View.
MVC is popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data needed by the view. The view then uses the data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represented as follows.
AngularJS MVC

The Model

The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.

The View

A presentation of data in a particular format, triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.

The Controller

The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.
AngularJS is a MVC based framework. In the coming chapters, we will see how AngularJS uses MVC methodology.

PHP - Regular Expressions


Regular expressions are nothing more than a sequence or pattern of characters itself. They provide the foundation for pattern-matching functionality.

Using regular expression you can search a particular string inside a another string, you can replace one string by another string and you can split a string into many chunks.

PHP offers functions specific to two sets of regular expression functions, each corresponding to a certain type of regular expression. You can use any of them based on your comfort.

  • POSIX Regular Expressions
  • PERL Style Regular Expressions

POSIX Regular Expressions

The structure of a POSIX regular expression is not dissimilar to that of a typical arithmetic expression: various elements (operators) are combined to form more complex expressions.

The simplest regular expression is one that matches a single character, such as g, inside strings such as g, haggle, or bag.

Lets give explanation for few concepts being used in POSIX regular expression. After that we will introduce you with regular expression related functions.

Brackets

Brackets ([]) have a special meaning when used in the context of regular expressions. They are used to find a range of characters.

Sr.No Expression & Description
1

[0-9]

It matches any decimal digit from 0 through 9.

2

[a-z]

It matches any character from lower-case a through lowercase z.

3

[A-Z]

It matches any character from uppercase A through uppercase Z.

4

[a-Z]

It matches any character from lowercase a through uppercase Z.

The ranges shown above are general; you could also use the range [0-3] to match any decimal digit ranging from 0 through 3, or the range [b-v] to match any lowercase character ranging from b through v.

Quantifiers

The frequency or position of bracketed character sequences and single characters can be denoted by a special character. Each special character having a specific connotation. The +, *, ?, {int. range}, and $ flags all follow a character sequence.

Sr.No Expression & Description
1

p+

It matches any string containing at least one p.

2

p*

It matches any string containing zero or more p's.

3

p?

It matches any string containing zero or more p's. This is just an alternative way to use p*.

4

p{N}

It matches any string containing a sequence of N p's

5

p{2,3}

It matches any string containing a sequence of two or three p's.

6

p{2, }

It matches any string containing a sequence of at least two p's.

7

p$

It matches any string with p at the end of it.

8

^p

It matches any string with p at the beginning of it.

Examples

Following examples will clear your concepts about matching characters.

Sr.No Expression & Description
1

[^a-zA-Z]

It matches any string not containing any of the characters ranging from a through z and A through Z.

2

p.p

It matches any string containing p, followed by any character, in turn followed by another p.

3

^.{2}$

It matches any string containing exactly two characters.

4

<b>(.*)</b>

It matches any string enclosed within <b> and </b>.

5

p(hp)*

It matches any string containing a p followed by zero or more instances of the sequence php.

Predefined Character Ranges

For your programming convenience several predefined character ranges, also known as character classes, are available. Character classes specify an entire range of characters, for example, the alphabet or an integer set −

Sr.No Expression & Description
1

[[:alpha:]]

It matches any string containing alphabetic characters aA through zZ.

2

[[:digit:]]

It matches any string containing numerical digits 0 through 9.

3

[[:alnum:]]

It matches any string containing alphanumeric characters aA through zZ and 0 through 9.

4

[[:space:]]

It matches any string containing a space.

PHP's Regexp POSIX Functions

PHP currently offers seven functions for searching strings using POSIX-style regular expressions −

Sr.No Function & Description
1 ereg()

The ereg() function searches a string specified by string for a string specified by pattern, returning true if the pattern is found, and false otherwise.

2 ereg_replace()

The ereg_replace() function searches for string specified by pattern and replaces pattern with replacement if found.

3 eregi()

The eregi() function searches throughout a string specified by pattern for a string specified by string. The search is not case sensitive.

4 eregi_replace()

The eregi_replace() function operates exactly like ereg_replace(), except that the search for pattern in string is not case sensitive.

5 split()

The split() function will divide a string into various elements, the boundaries of each element based on the occurrence of pattern in string.

6 spliti()

The spliti() function operates exactly in the same manner as its sibling split(), except that it is not case sensitive.

7 sql_regcase()

The sql_regcase() function can be thought of as a utility function, converting each character in the input parameter string into a bracketed expression containing two characters.

PERL Style Regular Expressions

Perl-style regular expressions are similar to their POSIX counterparts. The POSIX syntax can be used almost interchangeably with the Perl-style regular expression functions. In fact, you can use any of the quantifiers introduced in the previous POSIX section.

Lets give explanation for few concepts being used in PERL regular expressions. After that we will introduce you wih regular expression related functions.

Meta characters

A meta character is simply an alphabetical character preceded by a backslash that acts to give the combination a special meaning.

For instance, you can search for large money sums using the '\d' meta character: /([\d]+)000/, Here \d will search for any string of numerical character.

Following is the list of meta characters which can be used in PERL Style Regular Expressions.

Character  Description
.              a single character
\s             a whitespace character (space, tab, newline)
\S             non-whitespace character
\d             a digit (0-9)
\D             a non-digit
\w             a word character (a-z, A-Z, 0-9, _)
\W             a non-word character
[aeiou]        matches a single character in the given set
[^aeiou]       matches a single character outside the given set
(foo|bar|baz)  matches any of the alternatives specified

Modifiers

Several modifiers are available that can make your work with regexps much easier, like case sensitivity, searching in multiple lines etc.

Modifier Description
i  Makes the match case insensitive
m  Specifies that if the string has newline or carriage
 return characters, the ^ and $ operators will now
 match against a newline boundary, instead of a
 string boundary
o  Evaluates the expression only once
s  Allows use of . to match a newline character
x  Allows you to use white space in the expression for clarity
g  Globally finds all matches
cg  Allows a search to continue even after a global match fails

PHP's Regexp PERL Compatible Functions

PHP offers following functions for searching strings using Perl-compatible regular expressions −

Sr.No Function & Description
1 preg_match()

The preg_match() function searches string for pattern, returning true if pattern exists, and false otherwise.

2 preg_match_all()

The preg_match_all() function matches all occurrences of pattern in string.

3 preg_replace()

The preg_replace() function operates just like ereg_replace(), except that regular expressions can be used in the pattern and replacement input parameters.

4 preg_split()

The preg_split() function operates exactly like split(), except that regular expressions are accepted as input parameters for pattern.

5 preg_grep()

The preg_grep() function searches all elements of input_array, returning all elements matching the regexp pattern.

6 preg_ quote()

Quote regular expression characters

Thursday 29 June 2017

AngularJS - Environment Setup

Try it Option Online

You really do not need to set up your own environment to start learning AngularJS. Reason is very simple, we already have set up AngularJS environment online, so that you can execute all the available examples online at the same time when you are doing your theory work. This gives you confidence in what you are reading and to check the result with different options. Feel free to modify any example and execute it online.
Try the following example using Try it option available at the top right corner of the below sample code box −
<!doctype html>
<html ng-app>
   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>
   
   <body>
      <div>
         <label>Name:</label>
         <input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
         <hr />
         
         <h1>Hello {{yourName}}!</h1>
      </div>
      
   </body>
</html>
For most of the examples given in this tutorial, you will find Try itoption, so just make use of it and enjoy your learning.
In this chapter we will discuss about how to set up AngularJS library to be used in web application development. We will also briefly study the directory structure and its contents.
When you open the link https://angularjs.org/, you will see there are two options to download AngularJS library −
AngularJS Download
  • View on GitHub − Click on this button to go to GitHub and get all of the latest scripts.
  • Download AngularJS 1 − Or click on this button, a screen as below would be seen −
AngularJS Download
  • This screen gives various options of using Angular JS as follows −
    • Downloading and hosting files locally
      • There are two different options legacy and latest. The names itself are self descriptive. legacy has version less than 1.2.x and latest has 1.5.x version.
      • We can also go with the minified, uncompressed or zipped version.
    • CDN access − You also have access to a CDN. The CDN will give you access around the world to regional data centers that in this case, Google host. This means using CDN moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of AngularJS from the same CDN, it won't have to be re-downloaded.
  • Try the new angularJS 2 − Click on this button to download Angular JS beta 2 version.This version is very fast, mobile supported and flexible compare to legacy and latest of AngularJS 1
We are using the CDN versions of the library throughout this tutorial.

Example

Now let us write a simple example using AngularJS library. Let us create an HTML file myfirstexample.html as below −
<!doctype html>
<html>
   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorials!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>
Following sections describe the above code in detail −

Include AngularJS

We have included the AngularJS JavaScript file in the HTML page so we can use AngularJS −
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
If you want to update into latest version of Angular JS, use the following script source or else Check the latest version of AngularJS on their official website.
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>

Point to AngularJS app

Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below −
<body ng-app = "myapp">
</body>

View

The view is this part −
<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorials!</h2>
</div>
ng-controller tells AngularJS what controller to use with this view. helloTo.titletells AngularJS to write the "model" value named helloTo.title to the HTML at this location.

Controller

The controller part is −
<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>
This code registers a controller function named HelloController in the angular module named myapp. We will study more about modules and controllersin their respective chapters. The controller function is registered in angular via the angular.module(...).controller(...) function call.
The $scope parameter passed to the controller function is the model. The controller function adds a helloTo JavaScript object, and in that object it adds atitle field.

Execution

Save the above code as myfirstexample.html and open it in any browser. You will see an output as below −
Welcome AngularJS to the world of Tutorials!
When the page is loaded in the browser, following things happen −
  • HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded, the angular global object is created. Next, JavaScript which registers controller functions is executed.
  • Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.
  • Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page is now ready.

PHP - Predefined Variables


PHP provides a large number of predefined variables to any script which it runs. PHP provides an additional set of predefined arrays containing variables from the web server the environment, and user input. These new arrays are called superglobals −

All the following variables are automatically available in every scope.

PHP Superglobals

Sr.No Variable & Description
1

$GLOBALS

Contains a reference to every variable which is currently available within the global scope of the script. The keys of this array are the names of the global variables.

2

$_SERVER

This is an array containing information such as headers, paths, and script locations. The entries in this array are created by the web server. There is no guarantee that every web server will provide any of these. See next section for a complete list of all the SERVER variables.

3

$_GET

An associative array of variables passed to the current script via the HTTP GET method.

4

$_POST

An associative array of variables passed to the current script via the HTTP POST method.

5

$_FILES

An associative array of items uploaded to the current script via the HTTP POST method.

6

$_REQUEST

An associative array consisting of the contents of $_GET, $_POST, and $_COOKIE.

7

$_COOKIE

An associative array of variables passed to the current script via HTTP cookies.

8

$_SESSION

An associative array containing session variables available to the current script.

9

$_PHP_SELF

A string containing PHP script file name in which it is called.

10

$php_errormsg

$php_errormsg is a variable containing the text of the last error message generated by PHP.

Server variables: $_SERVER

$_SERVER is an array containing information such as headers, paths, and script locations. The entries in this array are created by the web server. There is no guarantee that every web server will provide any of these.

Sr.No Variable & Description
1

$_SERVER['PHP_SELF']

The filename of the currently executing script, relative to the document root

2

$_SERVER['argv']

Array of arguments passed to the script. When the script is run on the command line, this gives C-style access to the command line parameters. When called via the GET method, this will contain the query string.

3

$_SERVER['argc']

Contains the number of command line parameters passed to the script if run on the command line.

4

$_SERVER['GATEWAY_INTERFACE']

What revision of the CGI specification the server is using; i.e. 'CGI/1.1'.

5

$_SERVER['SERVER_ADDR']

The IP address of the server under which the current script is executing.

6

$_SERVER['SERVER_NAME']

The name of the server host under which the current script is executing. If the script is running on a virtual host, this will be the value defined for that virtual host.

7

$_SERVER['SERVER_SOFTWARE']

Server identification string, given in the headers when responding to requests.

8

$_SERVER['SERVER_PROTOCOL']

Name and revision of the information protocol via which the page was requested; i.e. 'HTTP/1.0';

9

$_SERVER['REQUEST_METHOD']

Which request method was used to access the page; i.e. 'GET', 'HEAD', 'POST', 'PUT'.

10

$_SERVER['REQUEST_TIME']

The timestamp of the start of the request. Available since PHP 5.1.0.

11

$_SERVER['QUERY_STRING']

The query string, if any, via which the page was accessed.

12

$_SERVER['DOCUMENT_ROOT']

The document root directory under which the current script is executing, as defined in the server's configuration file.

13

$_SERVER['HTTP_ACCEPT']

Contents of the Accept: header from the current request, if there is one.

14

$_SERVER['HTTP_ACCEPT_CHARSET']

Contents of the Accept-Charset: header from the current request, if there is one. Example: 'iso-8859-1,*,utf-8'.

15

$_SERVER['HTTP_ACCEPT_ENCODING']

Contents of the Accept-Encoding: header from the current request, if there is one. Example: 'gzip'.

16

$_SERVER['HTTP_ACCEPT_LANGUAGE']

Contents of the Accept-Language: header from the current request, if there is one. Example: 'en'.

17

$_SERVER['HTTP_CONNECTION']

Contents of the Connection: header from the current request, if there is one. Example: 'Keep-Alive'.

18

$_SERVER['HTTP_HOST']

Contents of the Host: header from the current request, if there is one.

19

$_SERVER['HTTP_REFERER']

The address of the page (if any) which referred the user agent to the current page.

20

$_SERVER['HTTP_USER_AGENT']

This is a string denoting the user agent being which is accessing the page. A typical example is: Mozilla/4.5 [en] (X11; U; Linux 2.2.9 i586).

21

$_SERVER['HTTPS']

Set to a non-empty value if the script was queried through the HTTPS protocol.

22

$_SERVER['REMOTE_ADDR']

The IP address from which the user is viewing the current page.

23

$_SERVER['REMOTE_HOST']

The Host name from which the user is viewing the current page. The reverse dns lookup is based off the REMOTE_ADDR of the user.

24

$_SERVER['REMOTE_PORT']

The port being used on the user's machine to communicate with the web server.

25

$_SERVER['SCRIPT_FILENAME']

The absolute pathname of the currently executing script.

26

$_SERVER['SERVER_ADMIN']

The value given to the SERVER_ADMIN (for Apache) directive in the web server configuration file.

27

$_SERVER['SERVER_PORT']

The port on the server machine being used by the web server for communication. For default setups, this will be '80'.

28

$_SERVER['SERVER_SIGNATURE']

String containing the server version and virtual host name which are added to server-generated pages, if enabled.

29

$_SERVER['PATH_TRANSLATED']

Filesystem based path to the current script.

30

$_SERVER['SCRIPT_NAME']

Contains the current script's path. This is useful for pages which need to point to themselves.

31

$_SERVER['REQUEST_URI']

The URI which was given in order to access this page; for instance, '/index.html'.

32

$_SERVER['PHP_AUTH_DIGEST']

When running under Apache as module doing Digest HTTP authentication this variable is set to the 'Authorization' header sent by the client.

33

$_SERVER['PHP_AUTH_USER']

When running under Apache or IIS (ISAPI on PHP 5) as module doing HTTP authentication this variable is set to the username provided by the user.

34

$_SERVER['PHP_AUTH_PW']

When running under Apache or IIS (ISAPI on PHP 5) as module doing HTTP authentication this variable is set to the password provided by the user.

35

$_SERVER['AUTH_TYPE']

When running under Apache as module doing HTTP authenticated this variable is set to the authentication type.

Wednesday 28 June 2017

AngularJS - Overview

What is AngularJS?

AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.3.
Definition of AngularJS as put by its official documentation is as follows −
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Features

  • AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).
  • AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.
  • Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
  • AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
Overall, AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain.

Core Features

Following are most important core features of AngularJS −
  • Data-binding − It is the automatic synchronization of data between model and view components.
  • Scope − These are objects that refer to the model. They act as a glue between controller and view.
  • Controller − These are JavaScript functions that are bound to a particular scope.
  • Services − AngularJS come with several built-in services for example $https: to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.
  • Filters − These select a subset of items from an array and returns a new array.
  • Directives − Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel...)
  • Templates − These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".
  • Routing − It is concept of switching views.
  • Model View Whatever − MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.
  • Deep Linking − Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
  • Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

Concepts

Following diagram depicts some important parts of AngularJS which we will discuss in detail in the subsequent chapters.
AngularJS Concepts

Advantages of AngularJS

  • AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
  • AngularJS provides data binding capability to HTML thus giving user a rich and responsive experience
  • AngularJS code is unit testable.
  • AngularJS uses dependency injection and make use of separation of concerns.
  • AngularJS provides reusable components.
  • With AngularJS, developer write less code and get more functionality.
  • In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.
On top of everything, AngularJS applications can run on all major browsers and smart phones including Android and iOS based phones/tablets.

Disadvantages of AngularJS

Though AngularJS comes with lots of plus points but same time we should consider the following points −
  • Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.
  • Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.

The AngularJS Components

The AngularJS framework can be divided into following three major parts −
  • ng-app − This directive defines and links an AngularJS application to HTML.
  • ng-model − This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind − This directive binds the AngularJS Application data to HTML tags.

PHP - Coding Standard


Every company follows a different coding standard based on their best practices. Coding standard is required because there may be many developers working on different modules so if they will start inventing their own standards then source will become very un-manageable and it will become difficult to maintain that source code in future.

Here are several reasons why to use coding specifications −

  • Your peer programmers have to understand the code you produce. A coding standard acts as the blueprint for all the team to decipher the code.

  • Simplicity and clarity achieved by consistent coding saves you from common mistakes.

  • If you revise your code after some time then it becomes easy to understand that code.

  • Its industry standard to follow a particular standard to being more quality in software.

There are few guidelines which can be followed while coding in PHP.

  • Indenting and Line Length − Use an indent of 4 spaces and don't use any tab because different computers use different setting for tab. It is recommended to keep lines at approximately 75-85 characters long for better code readability.

  • Control Structures − These include if, for, while, switch, etc. Control statements should have one space between the control keyword and opening parenthesis, to distinguish them from function calls. You are strongly encouraged to always use curly braces even in situations where they are technically optional.

Examples

if ((condition1) || (condition2)) {
   action1;
}elseif ((condition3) && (condition4)) {
   action2;
}else {
   default action;
}

You can write switch statements as follows −

switch (condition) {
   case 1:
      action1;
      break;
   
   case 2:
      action2;
      break;
         
   default:
      defaultaction;
      break;
}
  • Function Calls − Functions should be called with no spaces between the function name, the opening parenthesis, and the first parameter; spaces between commas and each parameter, and no space between the last parameter, the closing parenthesis, and the semicolon. Here's an example −

$var = foo($bar, $baz, $quux);
  • Function Definitions − Function declarations follow the "BSD/Allman style" −

function fooFunction($arg1, $arg2 = '') {
   if (condition) {
      statement;
   }
   return $val;
}
  • Comments − C style comments (/* */) and standard C++ comments (//) are both fine. Use of Perl/shell style comments (#) is discouraged.

  • PHP Code Tags − Always use <?php ?> to delimit PHP code, not the <? ?> shorthand. This is required for PHP compliance and is also the most portable way to include PHP code on differing operating systems and setups.

  • Variable Names

    • Use all lower case letters
    • Use '_' as the word separator.
    • Global variables should be prepended with a 'g'.
    • Global constants should be all caps with '_' separators.
    • Static variables may be prepended with 's'.
  • Make Functions Reentrant − Functions should not keep static variables that prevent a function from being reentrant.

  • Alignment of Declaration Blocks − Block of declarations should be aligned.

  • One Statement Per Line − There should be only one statement per line unless the statements are very closely related.

  • Short Methods or Functions − Methods should limit themselves to a single page of code.

There could be many more points which should be considered while writing your PHP program. Over all intention should be to be consistent throughout of the code programming and it will be possible only when you will follow any coding standard. You can device your own standard if you like something different.

Tuesday 27 June 2017

AngularJS - Expressions

AngularJS - Expressions


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>

Example

Following example will showcase all the above mentioned expressions.
testAngularJS.htm
<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>

Output

Open textAngularJS.htm in a web browser. See the result.

Angularjs - Home

AngularJS Tutorial


AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.

Audience

This tutorial is designed for software professionals who want to learn the basics of AngularJS and its programming concepts in simple and easy steps. It describes the components of AngularJS with suitable examples.

Prerequisites

You should have a basic understanding of JavaScript and any text editor. As we are going to develop web-based applications using AngularJS, it will be good if you have an understanding of other web technologies such as HTML, CSS, AJAX, etc.

Try AngularJS Online

For most of the examples given in this tutorial you will find Try it option available, so just make use of it to see the output of your code and enjoy your learning.
Try following example using Try it option available at the top right corner of the below sample code box −

Hello {{yourName}}!


<!doctype html>
<html ng-app>
   
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
   </head>
   
   <body>
      <div>
         <label>Name:</label>
         <input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
         <hr />
         
         <h1>Hello {{yourName}}!</h1>
      </div>
      
   </body>
</html>