introduction to Angularjs basics

Angularjs
A client side javascript framework for adding
interactivity to HTML

The resulting environment is extraordinarily
expressive, readable, and quick to develop.
− Extensibility

AngularJS is a toolset for building the framework most suited to your application
development. It is fully extensible and works well with other libraries.

Every feature can be modified or replaced to suit your unique development
workflow and feature needs.

.

DIRECTIVES-HTML annotations that trigger
javascript behaviors

MODULES- our application components
live(present)

CONTROLLERS- here, we add application
behavior

EXPRESSIONS- values are displayed from here
with in a page.

Directive

It is a marker on HTML tag that tells angular to
run or reference some javascript code

Index.html
<!DOCTYPE html>
<html>
<body ng-
controller=”store
controller”>
</body>
</html>
App.js
Function storeController(){
Alert('welcome,ravi!');
}
Index.html
Name of function to call
Output
Welcome,ravi
!

MODULES

Here, we write our pieces of angular application

Makes our code more maintainable,testable and
readable

Here we define dependencies for our app

Modules can use other modules

Var app = angular.module('store',[ ]);
Application name dependencies

Expressions

Allows you to insert Dynamic values into html

String operations

Numerical operations
<p>
I am {{4+6}}
</p>
<p>
I am 10
</p>
Evaluates to
{{“hello”+”you”}} Hello you

Controllers

Controllers are where we define our app's
behaviour by defining functions & values.

//

(function(){

var app = angular.module('store',[ ]);

app.controller('StoreController',function(){

});

})();
//Controller is attached inside our app//

Usage of Arrays
Arrays to display multiple
values
Repeat
This steps
For each
product

MVC

In MVC ,a clear separation in the code between

managing data(model),

application logic(controller)

presentation to user (view)

In Angular,view is the DOM (Document object
model),

Controllers are javascript classes &

Model data stored in object properties.

DOM(Document Object Model)

DOM is an application programming interface
(API) for valid HTML and well-formed XML
documents.

It defines the logical structure of documents and
the way a document is accessed and
manipulated,*Provides standard prog.interface.

With DOM, programmers can build documents,
navigate their structure, and add, modify, or
delete elements and content. Anything found in
an HTML or XML document can be accessed,
changed, deleted, or added using the DOM, with
a few exceptions

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals
with how components get hold of their dependencies.

The Angular injector subsystem is in charge of creating
components, resolving their dependencies, and providing them to
other components as requested.

Eg:
function HelloController($scope, $location) {
$scope.greeting = { text: 'Hello' };
}

DI in a brief
There are only three ways a component (object or function) can get a
hold of its dependencies:
I. The component can create the dependency, typically using the
new operator.
II. The component can look up the dependency, by referring to a
global variable.
III. The component can have the dependency passed to it where it is
needed.
I. DI IS UDED AT:
II. Factory methods ,Module methods & Controllers

Bootstrap
Bootstrapping is the equivalent of initializing, or starting, your
Angular app.

There are 2 main ways to do so.

The first is automatically bootstrapping by adding ng-app to the an
element in your HTML, like so:

<html ng-app="myApp">

...

</html>

The second would be to bootstrap from the JavaScript, like so,
after having creating your app through

angular.module("myApp", []):

angular.bootstrap(document, ['myApp']);

Automatic initialization

Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState is set
to 'complete'. At this point Angular looks for the ng-app directive which
designates your application root. If the ng-app directive is found then
Angular will:
I. load the module associated with the directive.
II. create the application injector
III. compile the DOM treating the ng-app directive as the root of the
compilation. This allows you to tell it to treat only a portion of the
DOM as an Angular application.
IV. <!doctype html>
V. <html ng-app="optionalModuleName">
VI. <body>
VII. I can add: {{ 1+2 }}.
VIII. <script src="angular.js"></script>
IX. </body>

Manual Initialization
If you need to have more control over the initialization process, you can
use a manual bootstrapping method instead. Examples of when you'd
need to do this include using script loaders or the need to perform an
operation before Angular compiles a page.

<!doctype html>

<html> <body>

Hello {{'World'}}!

<script src="http://code.angularjs.org/snapshot/angular.js"></script>

<script>

angular.module('myApp', [])

.controller('MyController', ['$scope', function ($scope) {

$scope.greetMe = 'World';

}]);

angular.element(document).ready(function() {

angular.bootstrap(document, ['myApp']);

});
You should not use the ng-app
directive when manually
bootstrapping your app.

Data Binding
Data-binding in Angular apps is the automatic synchronization of data
between the model and view components.
The view is a projection of the model at all times. When the model
changes, the view reflects the change, and vice versa.
First the template (which is the uncompiled HTML along with any additional markup or directives) is
compiled on the browser.

The compilation step produces a live view. Any changes to the view are immediately reflected in
the model, and any changes in the model are propagated to the view.

The model is the single-source-of-truth for the application state, greatly simplifying the
programming model for the developer.

You can think of the view as simply an instant projection of your model.

the controller is completely separated from the view and unaware of it.

This makes testing a snap because it is easy to test your controller in isolation without the view
and the related DOM/browser dependency.

Data binding
2-way databinding vs 1-way databinding.

CSS classes used by Angular
Ng-scope:
Usage: angular applies this class to any element for which a new scope is defined.
Ng-binding:
Usage: angular applies this class to any element that is attached to a data binding, via ng-bind or {{}} curly braces
ng-invalid, ng-valid:
Usage: angular applies this class to an input widget element if that element's input does not pass validation.
ng-pristine, ng-dirty:
Usage: angular input directive applies ng-pristine class to a new input widget element which did not have user interaction. Once the user
interacts with the input widget the class is changed to ng-dirty.

Forms
. A Form is a collection of controls for the purpose of grouping related controls together.
Form and controls provide validation services, so that the user can be notified of invalid input.
This provides a better user experience, because the user gets instant feedback on how to
correct the error.
A form is an instance of FormController. The form instance can optionally be published into
the scope using the name attribute.
Similarly, an input control that has the ngModel directive holds an instance of
NgModelController. Such a control instance can be published as a property of the form
instance using the name attribute on the input control. The name attribute specifies the
name of the property on the form instance.
This implies that the internal state of both the form and the control is available for binding in
the view using the standard binding primitives.

introduction to Angularjs basics

Custom triggers
By default, any change to the content will trigger a model update and form validation. You
can override this behavior using the ngModelOptions directive to bind only to specified
list of events. I.e. ng-model-options="{ updateOn: 'blur' }" will update and validate only
after the control loses focus.
Example: //Changes on the inputs within the form will update the model only//
Index.html
<div ng-controller="ExampleController">
<form>
Name:
<input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /><br />
Other data:
<input type="text" ng-model="user.data" /><br />
</form>
<pre>username = "{{user.name}}"</pre>
</div>
Script.js
angular.module('customTriggerExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.user = {};
}]);

Custom Validation

Angular provides basic implementation for most common html5 input types: (text,
number, url, email, radio, checkbox), as well as some directives for validation (required,
pattern, minlength, maxlength, min, max).

Defining your own validator can be done by defining your own directive which adds a
custom validation function to the ngModel controller. To get a hold of the controller the
directive specifies a dependency

Validation occurs in 2 places

Model to View update - Whenever the bound model changes, all functions in
NgModelController#$formatters array are pipe-lined, so that each of these functions
has an opportunity to format the value and change validity state of the form control
through NgModelController#$setValidity

View to Model update - In a similar way, whenever a user interacts with a control it
calls NgModelController#$setViewValue. This in turn pipelines all functions in the
NgModelController#$parsers array, so that each of these functions has an
opportunity to convert the value and change validity state of the form control through
NgModelController#$setValidity.

Implementing custom form controls
(using ngModel)

Angular implements all of the basic HTML form controls (input, select, textarea), which
should be sufficient for most cases. However, if you need more flexibility, you can write
your own form control as a directive.

In order for custom control to work with ngModel and to achieve two-way data-binding it
needs to:

implement $render method, which is responsible for rendering the data after it passed
the NgModelController#$formatters,

call $setViewValue method, whenever the user interacts with the control and model
needs to be updated. This is usually done inside a DOM Event listener.

Eg:

<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>

FILTERS
A filter formats the value of an expression for display to the user. They can be used in view
templates, controllers or services and it is easy to define your own FILTER.
Using filters in view templates
Filters can be applied to expressions in view templates using the following syntax:
{{ expression | filter }}
CHAINING FILTERS : {{ expression | filter1 | filter2 | ... }}
FILTERS WITH ARGUMENTS: {{ expression | filter:argument1:argument2:... }}

filters in controllers, services, and directives.
For this, inject a dependency with the name <filterName>Filter T.o your
controller/service/directive. E.g. using the dependency numberFilter will inject the number
filter. The injected argument is a function that takes the value to format as first argument
and filter parameters starting with the second argument.
EXAMPLE
INDEX.HTML
<div ng-controller="FilterController as ctrl">
<div>
All entries:
<span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
</div>
<div>
Entries that contain an "a":
<span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
</div>
</div>
SCRIPT.JS
angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
this.array = [
{name: 'Tobias'},
{name: 'Jeff'},
{name: 'Brian'},
{name: 'Igor'},
{name: 'James'},
{name: 'Brad'}
];
this.filteredArray = filterFilter(this.array, 'a');
}]);
All entries: Tobias Jeff Brian Igor James Brad

introduction to Angularjs basics

Recommended

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to introduction to Angularjs basics (20)

Recently uploaded (20)

introduction to Angularjs basics