0% found this document useful (0 votes)

21 views

Angular JS

AngularJS is a JavaScript framework that can be added to HTML pages with script tags. It extends HTML with directives and binds data to HTML with expressions. Key directives include ng-app to define an Angular application, ng-model for two-way data binding, and ng-repeat to repeat elements.

Uploaded by

nayab.mca2008

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

21 views

Angular JS

Uploaded by

nayab.mca2008

Available Formats

Download as DOC, PDF, TXT or read online on Scribd

You are on page 1/ 51

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

AngularJS is a JavaScript framework. It is a library written in JavaScript.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

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.

AngularJS Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

</body>
</html>

Try it Yourself »

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 innerHTML of the <p> element to the application variable name.
AngularJS Directives
As you have already seen, AngularJS directives are HTML attributes with an ng prefix.

The ng-init directive initialize AngularJS application variables.

AngularJS Example
<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

Try it Yourself »

Alternatively with valid HTML:

AngularJS Example
<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>

Try it Yourself »

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

You will learn a lot more about directives later in this tutorial.

AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS will "output" data exactly where the expression is written:

AngularJS Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Try it Yourself »
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.

AngularJS Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

</body>
</html>

Try it Yourself »

You will learn more about expressions later in this tutorial.

AngularJS Applications
AngularJS modules define AngularJS applications.

AngularJS controllers control AngularJS applications.

The ng-app directive defines the application, the ng-controller directive defines the controller.

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

Try it Yourself »

AngularJS modules define applications:

AngularJS Module
var app = angular.module('myApp', []);

AngularJS controllers control applications:

AngularJS Controller
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});

You will learn more about modules and controllers later in this tutorial.

AngularJS binds data to HTML using Expressions.

AngularJS Expressions
AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions binds data to HTML the same way as the ng-bind directive.

AngularJS will "output" data exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

AngularJS Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Try it Yourself »

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

AngularJS Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Try it Yourself »
AngularJS Numbers
AngularJS numbers are like JavaScript numbers:

AngularJS Example
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Try it Yourself »

Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.

AngularJS Strings
AngularJS strings are like JavaScript strings:

AngularJS Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example
<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>
Try it Yourself »

AngularJS Objects
AngularJS objects are like JavaScript objects:

AngularJS Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

Try it Yourself »

AngularJS Arrays
AngularJS arrays are like JavaScript arrays:

AngularJS Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Try it Yourself »

Same example using ng-bind:

AngularJS Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

Try it Yourself »
AngularJS Expressions vs. JavaScript Expressions
Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.

Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.

Unlike JavaScript expressions, AngularJS expressions do not support conditionals, loops, or exceptions.

Unlike JavaScript expressions, AngularJS expressions support filters.

AngularJS Directives
« Previous

Next Chapter »

AngularJS lets you extend HTML with new attributes called Directives.

AngularJS Directives
AngularJS directives are extended HTML attributes with the prefix ng-.

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.

AngularJS Example
<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>

<p>You wrote: {{ firstName }}</p>

</div>

Try it Yourself »

The ng-app directive also tells AngularJS that the <div> element is the "owner" of the AngularJS application.

Data Binding
The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS synchronizes AngularJS expressions with AngularJS data.

{{ firstName }} is synchronized with ng-model="firstName".

In the next example two text fields are synchronized with two ng-model directives:

AngularJS Example
<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">

Costs: <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

Try it Yourself »

Using ng-init is not very common. You will learn how to initialize data in the chapter about controllers.

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

AngularJS Example
<div ng-app="" ng-init="names=['Jani','Hege','Kai']" >
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

Try it Yourself »

The ng-repeat directive used on an array of objects:

AngularJS Example
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]" >
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

Try it Yourself »

AngularJS is perfect for database CRUD (Create Read Update Delete) applications.
Just imagine if these objects were records from a database.

The ng-app Directive

The ng-app directive defines the root element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

Later you will learn how ng-app can have a value (like ng-app="myModule"), to connect code modules.

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

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-model directive can also:

 Provide type validation for application data (number, email, required).

 Provide status for application data (invalid, dirty, touched, error).

 Provide CSS classes for HTML elements.

 Bind HTML elements to HTML forms.

The ng-repeat Directive
The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

AngularJS Controllers
« Previous

Next Chapter »

AngularJS controllers control the data of AngularJS applications.

AngularJS controllers are regular JavaScript Objects.

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.

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

Try it Yourself »

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):

AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

Try it Yourself »

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:
AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

Try it Yourself »

Another Example
For the next example we will create a new controller file:

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

Save the file as namesController.js:

And then use the controller file in an application:

AngularJS Example
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

Try it Yourself »
AngularJS Filters
« Previous

Next Chapter »

Filters can be added to expressions and directives using a pipe character.

AngularJS Filters
AngularJS filters can be used to transform data:

Filter Description

currency Format a number to a currency format.

filter Select a subset of items from an array.

lowercase Format a string to lower case.

orderBy Orders an array by an expression.

uppercase Format a string to upper case.

Adding Filters to Expressions

A filter can be added to an expression with a pipe character (|) and a filter.

(For the next two examples we will use the person controller from the previous chapter)

The uppercase filter format strings to upper case:

AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

Try it Yourself »

The lowercase filter format strings to lower case:

AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

Try it Yourself »

The currency Filter

The currency filter formats a number as currency:

AngularJS Example
<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>

Try it Yourself »

Adding Filters to Directives

A filter can be added to a directive with a pipe character (|) and a filter.

The orderBy filter orders an array by an expression:

AngularJS Example
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>

Try it Yourself »

Filtering Input
An input filter can be added to a directive with a pipe character (|) and filter followed by a colon and a model name.

The filter filter selects a subset of an array:

AngularJS Example
<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

</div>

Try it Yourself »

AngularJS AJAX - $http

« Previous

Next Chapter »

$http is an AngularJS service for reading data from remote servers.

Providing Data
The following data can be provided by a web server:

http://www.w3schools.com/angular/customers.php
{
"records": [
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}

AngularJS $http
AngularJS $http is a core service for reading data from web servers.

$http.get(url) is the function to use for reading server data.

AngularJS Example
<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>

</div>

Try it Yourself »
Application explained:

The AngularJS application is defined by ng-app. The application runs inside a <div>.

The ng-controller directive names the controller object.

The customersCtrl function is a standard JavaScript object constructor.

AngularJS will invoke customersCtrl with a $scope and $http object.

$scope is the application object (the owner of application variables and functions).

$http is an XMLHttpRequest object for requesting external data.

$http.get() reads JSON data from http://www.w3schools.com/angular/customers.php.

If success, the controller creates a property (names) in the scope, with JSON data from the server.

AngularJS Tables
« Previous

Next Chapter »

The ng-repeat directive is perfect for displaying tables.

Displaying Data in a Table

Displaying tables with angular is very simple:

AngularJS Example
<div ng-app="myApp" ng-controller="customersCtrl">

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

</div>

Try it Yourself »

Displaying with CSS Style

To make it nice, add some CSS to the page:

CSS Style
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

Try it Yourself »

Display with orderBy Filter

To sort the table, add an orderBy filter:

AngularJS Example
<table>
<tr ng-repeat="x in names | orderBy : 'Country'">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

Try it Yourself »

Display with uppercase Filter

To display uppercase, add an uppercase filter:

AngularJS Example
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country | uppercase }}</td>
</tr>
</table>

Try it Yourself »

Display the Table Index ($index)

To display the table index, add a <td> with $index:

AngularJS Example
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

Try it Yourself »

Using $even and $odd

AngularJS Example
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>

Try it Yourself »
AngularJS SQL
« Previous

Next Chapter »

The code from the previous chapter can also be used to read from databases.

Fetching Data From a PHP Server Running MySQL

AngularJS Example
<div ng-app="myApp" ng-controller="customersCtrl">

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

</div>

Try it Yourself »

Fetching Data From an ASP.NET Server Running SQL

AngularJS Example
<div ng-app="myApp" ng-controller="customersCtrl">

<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>

</div>

Try it Yourself »

Server Code Examples

The following section is a listing of the server code used to fetch SQL data.

1. Using PHP and MySQL. Returning JSON.

2. Using PHP and MS Access. Returning JSON.

3. Using ASP.NET, VB, and MS Access. Returning JSON.

4. Using ASP.NET, Razor, and SQL Lite. Returning JSON.

Cross-Site HTTP Requests

Requests for data from a different server (than the requesting page), are called cross-site HTTP requests.

Cross-site requests are common on the web. Many pages load CSS, images, and scripts from different servers.

In modern browsers, cross-site HTTP requests from scripts are restricted to same site for security reasons.

The following line, in our PHP examples, has been added to allow cross-site access.

header("Access-Control-Allow-Origin: *");

1. Server Code PHP and MySQL

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo($outp);
?>

2. Server Code PHP and MS Access

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=ISO-8859-1");

$conn = new COM("ADODB.Connection");

$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");

$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");

$outp = "";
while (!$rs->EOF) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
$rs->MoveNext();
}
$outp ='{"records":['.$outp.']}';

$conn->close();

echo ($outp);
?>

3. Server Code ASP.NET, VB and MS Access

<%@ Import Namespace="System.IO"%>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb"%>
<%
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
Dim conn As OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
objAdapter.Fill(objDataSet, "myTable")
objTable=objDataSet.Tables("myTable")

outp = ""
c = chr(34)
for each x in objTable.Rows
if outp <> "" then outp = outp & ","
outp = outp & "{" & c & "Name" & c & ":" & c & x("CompanyName") & c & ","
outp = outp & c & "City" & c & ":" & c & x("City") & c & ","
outp = outp & c & "Country" & c & ":" & c & x("Country") & c & "}"
next

outp ="{" & c & "records" & c & ":[" & outp & "]}"
response.write(outp)
conn.close
%>

4. Server Code ASP.NET, VB Razor and SQL Lite

@{
Response.AppendHeader("Access-Control-Allow-Origin", "*")
Response.AppendHeader("Content-type", "application/json")
var db = Database.Open("Northwind");
var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
var outp =""
var c = chr(34)
}
@foreach(var row in query)
{
if outp <> "" then outp = outp + ","
outp = outp + "{" + c + "Name" + c + ":" + c + @row.CompanyName + c + ","
outp = outp + c + "City" + c + ":" + c + @row.City + c + ","
outp = outp + c + "Country" + c + ":" + c + @row.Country + c + "}"
}
outp ="{" + c + "records" + c + ":[" + outp + "]}"
@outp

AngularJS HTML DOM

« Previous

Next Chapter »

AngularJS has directives for binding application data to the attributes of HTML DOM elements.

The ng-disabled Directive

The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.

AngularJS Example
<div ng-app="">

<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>

</div>

Try it Yourself »

Application explained:

The ng-disabled directive binds the application data mySwitch to the HTML button's disabled attribute.

The ng-model directive binds the value of the HTML checkbox element to the value of mySwitch.

If the value of mySwitch evaluates to true, the button will be disabled:

<p>
<button disabled>Click Me!</button>
</p>

If the value of mySwitch evaluates to false, the button will not be disabled:

<p>
<button>Click Me!</button>
</p>

The ng-show Directive

The ng-show directive shows or hides an HTML element.

AngularJS Example
<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>

Try it Yourself »

The ng-show directive shows (or hides) an HTML element based on the value of ng-show.

You can use any expression that evaluates to true or false:

AngularJS Example
<div ng-app="">
<p ng-show="hour > 12">I am visible.</p>

</div>

Try it Yourself »

In the next chapter, there are more examples, using the click of a button to hide HTML elements.

The ng-hide Directive

The ng-hide directive hides or shows an HTML element.

AngularJS Example
<div ng-app="">

<p ng-hide="true">I am not visible.</p>

<p ng-hide="false">I am visible.</p>

</div>

Try it Yourself »

AngularJS Events
« Previous

Next Chapter »

AngularJS has its own HTML events directives.

The ng-click Directive

The ng-click directive defines an AngularJS click event.

AngularJS Example
<div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>

Try it Yourself »

Hiding HTML Elements

The ng-hide directive can be used to set the visibility of a part of an application.

The value ng-hide="true" makes an HTML element invisible.

The value ng-hide="false" makes the element visible.

AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

Try it Yourself »

Application explained:

The first part of the personController is the same as in the chapter about controllers.

The application has a default property (a variable): $scope.myVar = false;

The ng-hide directive sets the visibility, of a <p> element with two input fields, according to the value (true or false)
of myVar.

The function toggle() toggles myVar between true and false.

The value ng-hide="true" makes the element invisible.

Showing HTML Elements

The ng-show directive can also be used to set the visibility of a part of an application.

The value ng-show="false" makes an HTML element invisible.

The value ng-show="true" makes the element visible.

Here is the same example as above, using ng-show instead of ng-hide:

AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">

<button ng-click="toggle()">Toggle</button>

<p ng-show="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>

</div>

Try it Yourself »

AngularJS Modules
« Previous

Next Chapter »

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.

A Module With One Controller

This application ("myApp") has one controller ("myCtrl"):

AngularJS Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/
angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}
</div>

</body>
</html>

Try it Yourself »

Modules and Controllers in Files

It is common in AngularJS applications to put the module and the controllers in JavaScript files.

In this example, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:

AngularJS Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/
angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}
</div>

</body>
</html>

Try it Yourself »

myApp.js
var app = angular.module("myApp", []);

The [] parameter in the module definition can be used to define dependent modules.

myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});

Functions can Pollute the Global Namespace

Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.

AngularJS modules reduces this problem, by keeping all functions local to the module.

When to Load the Library

While it is common in HTML applications to place scripts at the end of the <body> element, it is recommended that you
load the AngularJS library either in the <head> or at the start of the <body>.

This is because calls to angular.module can only be compiled after the library has been loaded.

AngularJS Example
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/
angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}
</div>

</body>
</html>

Try it Yourself »

AngularJS Forms
« Previous

Next Chapter »

An AngularJS form is a collection of input controls.

HTML Controls
HTML input elements are called HTML controls:

 input elements
 select elements

 button elements

 textarea elements

HTML Forms
HTML forms group HTML controls together.

An AngularJS Form Example

First Name:

Last Name:
RESET

form = {"firstName":"John","lastName":"Doe"}

master = {"firstName":"John","lastName":"Doe"}

Application Code
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>

Try it Yourself »

The novalidate attribute is new in HTML5. It disables any default browser validation.

Example Explained
The ng-app directive defines the AngularJS application.

The ng-controller directive defines the application controller.

The ng-model directive binds two input elements to the user object in the model.

The formCtrl function sets initial values to the master object, and defines the reset() method.

The reset() method sets the user object equal to the master object.

The ng-click directive invokes the reset() method, only if the button is clicked.

The novalidate attribute is not needed for this application, but normally you will use it in AngularJS forms, to override
standard HTML5 validation.

AngularJS Input Validation

« Previous

Next Chapter »

AngularJS forms and controls can validate input data.

Input Validation
In the previous chapter, you learned about AngularJS forms and controls.

AngularJS forms and controls can provide validation services, and notify users of invalid input.

Client-side validation cannot alone secure user input. Server side validation is also necessary.

Application Code
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl"

name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

</form>

</body>
</html>

Try it Yourself »

The HTML form attribute novalidate is used to disable default browser validation.

Example Explained
The AngularJS directive ng-model binds the input elements to the model.

The model object has two properties: user and email.

Because of ng-show, the spans with color:red are displayed only when user or email is $dirty and $invalid .

Property Description

$dirty The user has interacted with the field.

$valid The field content is valid.

$invalid The field content is invalid.

$pristine User has not interacted with the field yet.

AngularJS API
« Previous

Next Chapter »

API stands for Application Programming Interface.

AngularJS Global API

The AngularJS Global API is a set of global JavaScript functions for performing common tasks like:

 Comparing objects
 Iterating objects

 Converting data

The Global API functions are accessed using the angular object.

Below is a list of some common API functions:

API Description

angular.lowercase() Converts a string to lowercase

angular.uppercase() Converts a string to uppercase

angular.isString() Returns true if the reference is a string

angular.isNumber() Returns true if the reference is a number

angular.lowercase()
Example
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

Try it Yourself »

angular.uppercase()
Example
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

Try it Yourself »

angular.isString()
Example
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

Try it Yourself »

angular.isNumber()
Example
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

Try it Yourself »

AngularJS and Twitter Bootstrap

« Previous

Next Chapter »

Bootstrap is a popular style sheet. This chapter demonstrates how to use it with AngularJS.

Bootstrap
To include Bootstrap in your AngularJS application, add the following line to the head of your document:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

If you want to study Bootstrap, visit our Bootstrap Tutorial.

Below is a complete HTML example, with all AngularJS directives and Bootstrap classes explained.

HTML Code
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<h3>Users</h3>

<table class="table table-striped">

<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span>  Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>

<h3 ng-show="edit">Create New User:</h3>

<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>

<script src = "myUsers.js"></script>

</body>
</html>
Try it Yourself »

Directives (Used Above) Explained

AngularJS Directive Description

<body ng-app Defines an application for the <body> element

<body ng-controller Defines a controller for the <body> element

<tr ng-repeat Repeats the <tr> element for each user in users

<button ng-click Invoke the function editUser() when the <button> element is clicked

<h3 ng-show Show the <h3>s element if edit = true

<h3 ng-hide Hide the <h3> element if edit = true

<input ng-model Bind the <input> element to the application

<button ng-disabled Disables the <button> element if error or incomplete = true

Bootstrap Classes Explained

Element Bootstrap Class Defines

<div> container A content container

<table> table A table

<table> table-striped A striped table

<button> btn A button

<button> btn-success A success button

<span> glyphicon A glyph icon

<span> glyphicon-pencil A pencil icon

<span> glyphicon-user A user icon

<span> glyphicon-save A save icon

<form> form-horizontal A horizontal form

<div> form-group A form group

<label> control-label A control label

<label> col-sm-2 A 2 columns span

<div> col-sm-10 A 10 columns span

JavaScript Code
myUsers.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim', lName:"Pim" },
{id:3, fName:'Sal', lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;

$scope.editUser = function(id) {
if (id == 'new') {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});

$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};

});

JavaScript Code Explained

Scope Properties Used for

$scope.fName Model variable (user first name)

$scope.lName Model variable (user last name)

$scope.passw1 Model variable (user password 1)

$scope.passw2 Model variable (user password 2)

$scope.users Model variable (array of users)

$scope.edit Set to true when user clicks on create user.

$scope.error Set to true if passw1 not equal passw2

$scope.incomplete Set to true if any field is empty (length = 0)

$scope.editUser Sets model variables

$scope.watch Watches model variables

$scope.test Tests model variables for errors and incompleteness

AngularJS Includes
« Previous

Next Chapter »

With AngularJS, you can include HTML files in HTML.

HTML Includes in Future HTML

Including a portion of HTML in HTML is, unfortunately, not (yet) supported by HTML.

HTML imports is a W3C suggestion http://www.w3.org for future versions of HTML:

<link rel="import" href="/path/navigation.html">

Server Side Includes

Most web servers support Server Side Includes (SSI).

With SSI, you can include HTML in HTML before the page is sent to the browser.

PHP Example
<?php require("navigation.php"); ?>
Client Side Includes
There are many ways to use JavaScript to include HTML in HTML.

The most common way is to use an http request (AJAX) to fetch data from a server, and then write the data to
the innerHTML of an HTML element.

AngularJS Side Includes

With AngularJS, you can include HTML content using the ng-include directive:

Example
<body>

</body>

Below is a 4 step introduction.

Step 1: Create the HTML List

myUsers_List.html
<h3>Users</h3>

<table class="table table-striped">

Try it Yourself »

Step 2: Create the HTML Form

myUsers_Form.html
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>

<h3 ng-show="edit">Create New User:</h3>

Try it Yourself »

Step 3: Create the Controller

myUsers.js
angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName:"Pim" },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones" },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.editUser = function(id) {
if (id == 'new') {
$scope.edit = true;
$scope.incomplete = true;
$scope.fName = '';
$scope.lName = '';
} else {
$scope.edit = false;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});

Step 4: Create the Main Page

myUsers.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>

<body ng-app="myApp" ng-controller="userCtrl">

<script src= "myUsers.js"></script>

</body>

</html>

Try it Yourself »

AngularJS Application Skeleton

Above you have the skeleton (scaffolding) of a real life AngularJS, single page application (SPA).

The <html> element is the "container" for the AngularJS application (ng-app=).

A <div> elements defines the scope of an AngularJS controller (ng-controller=).

You can have many controllers in one application.

An application file (my...App.js) defines the application module code.

One or more controller files (my...Ctrl.js) defines the controller code.

Summary - How Does it Work?
The ng-app directive is placed at the root element the application.

For single page applications (SPA), the root of the application is often the <html> element.

One or more ng-controller directives define the application controllers. Each controller has its own scope: the HTML
element where they were defined.

AngularJS starts automatically on the HTML DOMContentLoaded event. If an ng-app directive is found, AngularJS will load
any module named in the directive, and compile the DOM with ng-app as the root of the application.

The root of the application can be the whole page, or a smaller portion of the page. The smaller the portion, the faster the
application will compile and execute.

AngularJS References
« Previous

Next Chapter »

AngularJS Directives
AngularJS directives used in this tutorial:

Directive Description E

ng-app Defines the root element of an application. D

ng-bind Binds the innerHTML of HTML elements to application data. I

ng-click Defines the behavior when an element is clicked. H

ng-controller Defines the controller object for an application. C

ng-disabled Binds application data to the HTML disabled attribute. H

ng-hide Hides or shows HTML elements. H

ng-include Includes HTML in an application. I

ng-init Defines initial values for an application. D

ng-model Binds the value of HTML controls to application data. D

ng-repeat Defines a template for each data in a collection. D

ng-show Shows or hides HTML elements. H

AngularJS Filters
AngularJS filters used in this tutorial:

Filter Description

currency Format a number to a currency format.

filter Select a subset of items from an array.

lowercase Format a string to lower case.

orderBy Orders an array by an expression.

uppercase Format a string to upper case.

Filters are explained in Angular Filters.

AngularJS Events
AngularJS support the following events:

 ng-click
 ng-dbl-click

 ng-mousedown

 ng-mouseenter

 ng-mouseleave

 ng-mousemove

 ng-keydown

 ng-keyup

 ng-keypress

 ng-change

Events are explained in Angular Events.

AngularJS Validation Properties

 $dirty
 $invalid

 $error

Validation is explained in Angular Validation.

AngularJS Global API

Converting

API Description

angular.lowercase() Converts a string to lowercase

angular.uppercase() Converts a string to uppercase

angular.copy() Creates a deep copy of an object or an array

angular.forEach() Executes a function for each element in an object or array

Comparing

API Description

angular.isArray() Returns true if the reference is an array

angular.isDate() Returns true if the reference is a date

angular.isDefined() Returns true if the reference is defined

angular.isElement() Returns true if the reference is a DOM element

angular.isFunction() Returns true if the reference is a function

angular.isNumber() Returns true if the reference is a number

angular.isObject() Returns true if the reference is an object

angular.isString() Returns true if the reference is a string

angular.isUndefined() Returns true if the reference is undefined

angular.equals() Returns true if two references are equal

JSON

API Description

angular.fromJSON() Deserializes a JSON string

angular.toJSON() Serializes a JSON string

Basic

API Description

angular.bootstrap() Starts AngularJS manually

angular.element() Wraps an HTML element as an jQuery element

angular.module() Creates, registers, or retrieves an AngularJS module

The Global API is explained in Angular API.

Learn AngularJS in 24 Hours
From Everand
Learn AngularJS in 24 Hours
Alex Nordeen
No ratings yet
AngularJS Tutorial W3Schools PDF
No ratings yet
AngularJS Tutorial W3Schools PDF
43 pages
AngularJS Tutorial W3Schools
100% (1)
AngularJS Tutorial W3Schools
43 pages
Angular JS Notes
No ratings yet
Angular JS Notes
33 pages
AngularJS Extends HTML
No ratings yet
AngularJS Extends HTML
24 pages
AngularJS W3schhols
100% (2)
AngularJS W3schhols
180 pages
AngularJS W3Schools-1
No ratings yet
AngularJS W3Schools-1
182 pages
Module 5
No ratings yet
Module 5
17 pages
AngularJS Tutorial
No ratings yet
AngularJS Tutorial
43 pages
Web Persentation
No ratings yet
Web Persentation
26 pages
Angular JS
No ratings yet
Angular JS
5 pages
Why Called Angularjs
No ratings yet
Why Called Angularjs
25 pages
AngularJS_unit II
No ratings yet
AngularJS_unit II
19 pages
Angular JS: Angularjs Extends HTML With Ng-Directives
No ratings yet
Angular JS: Angularjs Extends HTML With Ng-Directives
48 pages
Rgik, H
No ratings yet
Rgik, H
2,182 pages
Angularjs Tutorial PDF
No ratings yet
Angularjs Tutorial PDF
25 pages
AngularJS-unit 2
100% (1)
AngularJS-unit 2
41 pages
Angular JS
No ratings yet
Angular JS
42 pages
UNIT 5 - Ost
No ratings yet
UNIT 5 - Ost
15 pages
Unit 2
No ratings yet
Unit 2
48 pages
WT - Unit 5
No ratings yet
WT - Unit 5
15 pages
Olevel 1 WPD 04 06 2020 Il
No ratings yet
Olevel 1 WPD 04 06 2020 Il
5 pages
Unit V
No ratings yet
Unit V
34 pages
V-Client and Server Side Frameworks
No ratings yet
V-Client and Server Side Frameworks
131 pages
Angular JS: The Ng-Init Directive Initialize Angularjs Application Variables
No ratings yet
Angular JS: The Ng-Init Directive Initialize Angularjs Application Variables
10 pages
Angularjs Is A Very Powerful Javascript Library. It Is Used in Single Page Application (Spa) Projects. It Extends
No ratings yet
Angularjs Is A Very Powerful Javascript Library. It Is Used in Single Page Application (Spa) Projects. It Extends
6 pages
Unit 5 Angular
No ratings yet
Unit 5 Angular
12 pages
Angular JS PDF
No ratings yet
Angular JS PDF
11 pages
A Quick Intro To Angularjs
No ratings yet
A Quick Intro To Angularjs
4 pages
Advantages of Angularjs
No ratings yet
Advantages of Angularjs
5 pages
AngularJS New Manual
No ratings yet
AngularJS New Manual
30 pages
Angular Js
No ratings yet
Angular Js
13 pages
AngularJs Question
No ratings yet
AngularJs Question
73 pages
FALLSEM2020-21 ITE1002 ETH VL2020210105029 Reference Material I 03-Sep-2020 Angular JS directives-Datatypes-Module-Controller-Scope Object PDF
No ratings yet
FALLSEM2020-21 ITE1002 ETH VL2020210105029 Reference Material I 03-Sep-2020 Angular JS directives-Datatypes-Module-Controller-Scope Object PDF
23 pages
Unit 2 WT
No ratings yet
Unit 2 WT
29 pages
Angular Js
No ratings yet
Angular Js
36 pages
Module-5-Web Application Frameworks
No ratings yet
Module-5-Web Application Frameworks
36 pages
Unit 4
No ratings yet
Unit 4
18 pages
Unit V
No ratings yet
Unit V
62 pages
CH 1 AngularJS
No ratings yet
CH 1 AngularJS
41 pages
AngularJs Directives
No ratings yet
AngularJs Directives
7 pages
R20 4-1 Mean stack
No ratings yet
R20 4-1 Mean stack
117 pages
The Ng-Model Directive
No ratings yet
The Ng-Model Directive
3 pages
MMC105 Web Technologies Module 4 & 5 Q & A
No ratings yet
MMC105 Web Technologies Module 4 & 5 Q & A
42 pages
Anjularjs Programs Revisedcirc Syllabus
No ratings yet
Anjularjs Programs Revisedcirc Syllabus
27 pages
Recipes With Angular Js Sample
No ratings yet
Recipes With Angular Js Sample
10 pages
Why Angularjs?: Learn Angular in Your Browser For Free!
No ratings yet
Why Angularjs?: Learn Angular in Your Browser For Free!
7 pages
Angularjs
100% (1)
Angularjs
190 pages
Top 50 Angularjs Interview Questions and Answers
No ratings yet
Top 50 Angularjs Interview Questions and Answers
83 pages
ang
No ratings yet
ang
14 pages
Angular Js Chapter
No ratings yet
Angular Js Chapter
40 pages
Module 3 Part 1B AgularJS
No ratings yet
Module 3 Part 1B AgularJS
24 pages
unit - iii (1)
No ratings yet
unit - iii (1)
11 pages
angular
No ratings yet
angular
14 pages
Introduction To AngularJS
No ratings yet
Introduction To AngularJS
17 pages
Module 5
No ratings yet
Module 5
36 pages
AngularJS Quick Guide
No ratings yet
AngularJS Quick Guide
52 pages
notes
No ratings yet
notes
14 pages
50 Recipes for Programming Angular
From Everand
50 Recipes for Programming Angular
Jamie Munro
4/5 (1)
JavaScript Patterns JumpStart Guide (Clean up your JavaScript Code)
From Everand
JavaScript Patterns JumpStart Guide (Clean up your JavaScript Code)
Dan Wahlin
4.5/5 (3)
SQL Server
No ratings yet
SQL Server
93 pages
Iq 2017
No ratings yet
Iq 2017
4 pages
Explain MVC (Model-View-Controller) in General?
No ratings yet
Explain MVC (Model-View-Controller) in General?
195 pages
Function sendReportByEmail (
No ratings yet
Function sendReportByEmail (
1 page
DIALux Setup Information
No ratings yet
DIALux Setup Information
20 pages
Screenshot 2023-08-15 at 12.16.26 AM
No ratings yet
Screenshot 2023-08-15 at 12.16.26 AM
1 page
Cloud Computing Notes
No ratings yet
Cloud Computing Notes
20 pages
Shri G. S. Institute of Technology & Science, Indore: 2020-2021 Minor Project
No ratings yet
Shri G. S. Institute of Technology & Science, Indore: 2020-2021 Minor Project
19 pages
11 What Is Hashing in DBMS
No ratings yet
11 What Is Hashing in DBMS
20 pages
Test15 1
No ratings yet
Test15 1
10 pages
Eastern Emoticons
No ratings yet
Eastern Emoticons
2 pages
Ddatetime
No ratings yet
Ddatetime
18 pages
Design Principles of SRAM Memory in Nano-CMOS Technologies: International Journal of Computer Applications May 2019
No ratings yet
Design Principles of SRAM Memory in Nano-CMOS Technologies: International Journal of Computer Applications May 2019
8 pages
Free Access to Using and Understanding Mathematics 6th Edition Bennett Solutions Manual Chapter Answers
100% (13)
Free Access to Using and Understanding Mathematics 6th Edition Bennett Solutions Manual Chapter Answers
52 pages
P4-F 2024-2025 Essential Vocabulary Worksheet 02
No ratings yet
P4-F 2024-2025 Essential Vocabulary Worksheet 02
3 pages
Mihai Patrascu
No ratings yet
Mihai Patrascu
139 pages
Valuation Class - SAP Community
No ratings yet
Valuation Class - SAP Community
11 pages
OCR GCSE Computer Science 2nd Edition Gavin Craddock all chapter instant download
100% (1)
OCR GCSE Computer Science 2nd Edition Gavin Craddock all chapter instant download
52 pages
All Widgets
No ratings yet
All Widgets
21 pages
AS1 - HUỲNH NHẬT NAM - GCS190293 - GCS0805B
No ratings yet
AS1 - HUỲNH NHẬT NAM - GCS190293 - GCS0805B
29 pages
BSI ISOIEC27001 Assessment Checklist UK en
No ratings yet
BSI ISOIEC27001 Assessment Checklist UK en
3 pages
Web 2.0 Social Networking Tools: A Quick Guide
No ratings yet
Web 2.0 Social Networking Tools: A Quick Guide
114 pages
Answer Key: Mathematics (Ncert + Exemplar Book)
No ratings yet
Answer Key: Mathematics (Ncert + Exemplar Book)
19 pages
Destination Agile Auditing
No ratings yet
Destination Agile Auditing
19 pages
COA Assgnment Based On William Stallings Computer Organization and Architecture
No ratings yet
COA Assgnment Based On William Stallings Computer Organization and Architecture
2 pages
XVR-300 Install Guide en
No ratings yet
XVR-300 Install Guide en
68 pages
SMP 4 Assignment
No ratings yet
SMP 4 Assignment
2 pages
Wild Birds Protection Acts, 1880-1896
No ratings yet
Wild Birds Protection Acts, 1880-1896
201 pages
Smart Quad Switch: Diagnostic Functions
No ratings yet
Smart Quad Switch: Diagnostic Functions
9 pages
ISO 27001-2022 Requirements For Implementation
No ratings yet
ISO 27001-2022 Requirements For Implementation
2 pages
End Semester Review Ppt-Batch 14
No ratings yet
End Semester Review Ppt-Batch 14
33 pages
Push: Software Design and the Cultural Politics of Music Production Mike D'Errico all chapter instant download
100% (1)
Push: Software Design and the Cultural Politics of Music Production Mike D'Errico all chapter instant download
76 pages
AI HHW
No ratings yet
AI HHW
2 pages
Petri Nets - PETERSON 1977
No ratings yet
Petri Nets - PETERSON 1977
30 pages