Angular Basics

General Features :

• AngularJS is a JavaScript framework.

• AngularJS is a efficient framework that can create Rich Internet Applications.

• Client side  MVC frameWork. 

• Applications written in AngularJS are cross-browser compliant.

• SPA (Single Page Application)

• Supported for Web and mobiles.

• AngularJS is open source, completely free.

• AngularJS is a framework to build large scale Apps.

• High performance, and easyto-maintain web applications.

Core Features:

Two way Data-binding: It is the automatic synchronization of data between model   and view

Scope : scope is an object that refers to the application model. Every controller has an associated scope object. Scopes provide APIs ($watch) to observe model mutations.

Controller: These are JavaScript functions bound to a particular scope.

Services: AngularJS comes with several built-in services such as $http 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 such as ngBind, ngModel, etc.

• Predefined Directives

Ex: ng-app(route directive), ng-bind, ng-show, ng-hide, ng-repeat, ng-if.

we can also write data-ng-bind, data-ng-show etc..

• Custom Directives

ex: we can write our custom tags
<div directivename ></div> like attribute
<customdirectivename></customdirectivename> linke html tag.

Routing: It is concept of switching views.

Templates: These are the rendered view with information from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials.

MVC: Model View whatever ex: MVVM (Model-View-ViewModel)

Advantages:

1. capability to create Single Page Application in a very clean and maintainable way.

2. It provides data binding capability to HTML.

3. AngularJS code is unit testable.

4. AngularJS provides reusable components .

5. write less and do more. ex:ng-repeat directive

6. AngularJS applications can run on all major browsers and smart phones, including Android and iOS based phones/tablets.

DisAdvantages:

1. If the user of your application disables JavaScript, then nothing would be visible, except the basic page.

2. JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure

Directives:

ng-app : This directive defines and links an AngularJS application to HTML.

ex: ng-app, ng-app = “appname”
ng-model : This directive binds the values of AngularJS application data to HTML input controls.
ex: <input type=”text” ng-model=”modelname” />

ng-bind : This directive binds the AngularJS application data to HTML tags.
ex1: <div data-ng-bind=”modelname”></div>
ex2: <div>{{modelname}}</div>

ng-init - This directive initializes application data.

ex:<div data-ng-init=”name=’bujji’”></div>

<div data-ng-bind=”name”></div>

o/p : bujji

MVC: 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  - 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.

Angularjs Application Development Process:

1. Include the angularjs lib file(load the library).

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script>

2. Define Angularjs using data-ng-app

ex: <div data-ng-app=””></div>

3. Define modelname using data-ng-model

ex: Enter Name: <input type=”text” data-ng-model=”myname” />

4. Bind the model name using data-ng-bind

ex: <div data-ng-bind=”myname”></div>

(or)

     <div>{{myname}}</div>

First Example:

<!DOCTYPE html>

<html lang="en" data-ng-app="">

<head>

   <title>AngularJs Application</title>

</head>

<body>    

   <div>Enter Name: <input type="text" data-ng-model="myname"></div>

   <div>Hello <span data-ng-bind="myname"></span></div>

   <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”>     </script>    

</body>

</html>

2. Develop Application using controller :

<!DOCTYPE html>

<html lang="en" data-ng-app="">

<head>

   <title>AngularJs Application</title>

</head>

<body data-ng-controller=”myCtrl”>

       <div><input type=”text” data-ng-model=”myname”/></div>

       <div><span data-ng-bind="myname"></span></div>

<button ng-click=”fnClick()”>click here</button>

   <script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”>     </script>

<script>

function myCtrl($scope){

$scope.myname =’Welcome to Angularjs';

$scope.fnClick=function(){

console.log($scope.myname)

}

}

</script>    

</body>

</html>

o/p: Welcome to Angularjs

Note: here we are taking variable from controller and binding in view (html file)

above example we can observe controller to view and view to controller communication.

view      ---> controller

controoler ---> view

AngularJS Filters :
Filter: Selects a subset of items from array and returns it as a new array.
Filters can be added to expressions by using the pipe character | followed by a filter.
currency :(Formats a number as a currency)
Usage : {{ currency_expression | currency : symbol : fractionSize}}
Ex: <div ng-init="amount = 1234.56">
      <span>{{amount | currency}}</span>
 </div>
Result : $1,234.56
Ex: <span id="currency-no-fractions">{{amount | currency:"USD$":1}}</span>

Result : USD$1,234.6

Important Html Tags

1. pre tag:
Text in a pre element is displayed in a fixed-width font, and it preserves both  spaces and line breaks.
<pre>
var persion = {
'fname':'bujji',
'lname':balaga',
'mobile':'9533068603'



};
</pre>

output :
var persion = {
'fname':'bujji',
'lname':balaga',
'mobile':'9533068603'



};

2. xmp tag:
  user want to display  html code in web page need to use xmp tag
ex:
<xmp>
<p>simple paragraph</p>
<div>simple div </div>
</xmp>

output:
<p>simple paragraph</p>
<div>simple div </div>

3.input tags :

<input type="text"/>
<input type="password"/>
<input type="email"/>
<input type="number"/>
<input type="date"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="color"/>
<input type="month"/>
<input type="time"/>
<input type="datetime-local"/>
<input type="range"/>
<input type="tel"/>
<input type="search"/>
<input type="url"/>
<input type="week"/>
<input type="file"/>

4. auto complete

<datalist>
    <option value="attribute">
   <option value="bold">
  <option value="cource">
  <option value="data">
  <option value="element">
</datalist>

Open link in new window

Anchor :
we can open anchor tag in new window.

<a href="https://www.google.co.in/" onclick="window.open(this.href,'mywin','left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;">Share this</a>

Custom DropDown

We can develop dropdown as per our requirement.

Live link

Positions

1. position : static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

#div-1{

position:static

}

2. position : relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it.

#div-1 {

 position:relative;

 top:20px;

left:20px;

}

example Link : relative

3. position : absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let's move div-1a to the top right of the page:

#div-1 { position:absolute; top:0; right:0; width:200px;}

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

example link: absolute

4.position : relative+absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

exaplelink: relative+absolute

Angular form validation

form validation using required
<style>
 .my-form {
   -webkit-transition:all linear 0.5s;
   transition:all linear 0.5s;
   background: transparent;
 }
 .my-form.ng-invalid {
   background: red;
 }
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
 </form>

Angular broadcast

Using $scope.$emit will fire an event up the $scope. Using $scope.$broadcast will fire an event downthe $scope. Using $scope.$on is how we listen for these events.

 example:
// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');
// firing an event downwards
$scope.$broadcast('myCustomEvent',{
  someProp: 'Sending you an Object!' // send whatever you want
});
// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data){
  console.log(data); // 'Data to send'
});