23. Angularjs Routing(single page applications)

           Routing means a mechanism for working with multiple pages updation in current page. current page content will be updated without any page refresh, without any page lifecycles...ect.  based on friendly url content of the current page will be updated.

using local copy of routing javascript file
or
using CDN link provided by anjularjs also can using it utilize anjularjs funcationalities for develop dynamic web pages develpment.







        

22 : Anjularjs : anchorScroll with List data

will upate later..

21. Anjularjs :anchrScroll service

  till now we seen $http service, and $log service now we will see $location & $anchorScroll services.

$anchorScroll  is a anjularjs service which helps to scroll the webpage to a specific element on the page.
$location is another anjularjs service which helps to append the element(##elementid) to url of the page for particular navigation.

Example :

 

$location.hash(elementid) --append to the url

till that specified id --$anchorscroll() ---will scroll the page.

20. Anjularjs : Custom Service register

 How to write a custom service in anjularjs  the register with controller ?

 Example : i need a space between the inputstring whenever find a capital latter need to append a space.

Design table body :

 now write custom function to handle this requirement

now our requirement is done. but no custom service. if we observice our service which is very complex and not be good readable also. so that using anjularjs factory method define this logic as a service and utilize it.

using factory method define "custom service"--stringservice.

19. Anjularjs Custom services

Services in Anjularjs 

    Till now we seen 2 built in services($http/remote requests, $log(logging object to console). Now more information about services.

Services contains business logic  it can be any type of service(WCF,WEB API, WEB SERVICES..ect) same as in anjular also. If we need a logic it should be reuseable in many places of anjular application we should write them as  anjular services.

              Controller has responsiable for building/prepares an object for model. as per SOLID principal it should has a single responsiability only.

Example :   if data has dateofbirth ---need to compute ---age. We can do it in controller but SOLID violation so that write as service. à we can utilize many places of anjular application.

anjularjs service is an object.

anjularjs service encapsulate the logic that doesn’t belongs to anywhere else (i.e  Controllers, Directives,Filters,Views,Models)

Advantages:

Reuseability

Dependence Injections

Testability.

18 Anjularjs $http service

Anjularjs provides many built in services like $http, $log…ect, as well we can create write our own service, we generally called as “custom services”.

anjularjs $http service:

1     1.   It is used to make HTTP requests to remote server.

       2.  It is a function that has a single input parameter i.e configuration object.

       this request issues a GET request to specified url (http://localhost:4968/api/values/--service)in the configuration object. configuration object has many properties to prepare config object. such as method,url,params,data,headers,transformRequest, paramSerializer…ect.

Anjularjs http service :   https://docs.angularjs.org/api/ng/service/$http

swe written service request as configuration object in side $http.({ configuration object }) 

   configuration object is a javascript object in  $http service it has built feature to convert as json object.

 we can write service request as inline request without configuration object but has one restriction.

aWe can write same http request as below : inline requst

                 $http.get('http://localhost:8181/api/values/').then(function (response)

                   {

                                         // Sucess

                                          $scope.message = response.data[0];

                                          $scope.message += response.data[1];

                                      },function (reason)

                                      {

                                          // Failure

                                          $scope.message="error occured"

                                      });

$scope.employees = $http.get('http://localhost:8181/api/values/');--- not valid

a small restriction here is $http.get, $http.post ..such inline request returns a $promise object so that we should use then function for inline requests.

Anjularjs provides another service is $log which help us to log in console window about request and respone information.

s$http service provides below outof box transfermations are :

17. Anjular : CRUD operations with Web API

          Web API  is Resource Oriented Archictural pattern for building services. so web api also called REST full services.

             In simple word Web API build services using http(GET,POST,DELETE,PUT....ect) http methods. which are 

16 : ng-include directive

 ng-include directive help us to reuse a html page in multiple times in various pages.

we can write using scope property also

ng-include="employeeview"; 

15 : Anjularjs init directive

 init is a angularjs directive which helps to initialize some values to the object at initialize state of object like

Age : bydefault zero,

   Age : <input type="text" ng-init="age=0" ng-model="age" />

another example is 

we can intialize custom objects, arrays for testing the design of page. help for test data

14 Anjularjs : ng-hide and ng-show

   Anjular js provides 2 visiability directives(ng-hide and ng-show) to handle visiablilty properties.

Bydefault  when page load --check box is false. once when check it --becomes true it will hide.

as well one more criteria is

13 : Anjularjs : Create custom filter

         Anjularjs will help us to write custom filters for data tranformations like below scenirio : Gender(1,2,3) to (Male,Female,Not Disclosed').

now implement gender custom filter.

output :

data is transfer from (1, 2, 3) ---(Male,Female, Dis closed).

12 : Anjular js : Search based on particular column of table

In this case single input column helps to search based on (City, Name), there now no need to place 2 input fields in that page. using a function we can handle this scenerio.

 

 Search is function which helps for sort the data based on criteria column check

output

11 Anjularjs : search matched rows from table data

     Using filter : search criteria which helps to search the rows based our data in that table. here filter is not based column of the table like not Name,Gender,DateofBirth,City. ...searching performed based on data of the table.

 Syntax :
               <tr ng-repeat="e in employees | filter:SearchText">

filter is performed based on the data which in entered in  search.

if we need in particular column of table then

 ng-model="SearchText.Name"

As well we can search based ony one of the column like

SearchText.City

SearchText.DateofBirth

SearchText.Gender

as well we can search multiple columns data also and exact match also

by default checkbox is not check while page is opened so that without any search criteria data will placed as it is.

now 

data will be considered---> upper and lowercase also while checkwith exactmatch criteria.

10. Anjularjs : Sort Rows by table header

          Anjularjs provides more simplified control to web developer to full fill all the requirements of client.

one of such scenerios are:

How to implement bidirectional sort in Anjular JS

now we need call "SortData" function from orderby expression function

CSS :

  using ng-click event will call SortData function when clicking on "SoftData('Name') function.

Anjularjs : Sorting data

                      Anjularjs provides  few filters for format data like number,date format, number of decimals,custom currency format...ect. as well using same filter syntax we can sort the data as well.

Example  :
                    {{ Orderby_expression | Orderyby : Expression : (asc/desc) }}   
                        [ asc/desc(defult) is optional ]

                      ng-repeat="e in employees | orderBy :'Salary'"
                        [OR]
                      ng-repeat="e in employees | orderBy :'Salary':false"
                        [OR]
          ng-repeat="e in employees | orderBy :'+Salary'" (asc--0-100)

    Bydefault items ascending order(default--"false"),if we need rows sorted in descending order specify as "true".

if need sort the data based on any one of the column then.

output :

 

Anjular js : Filters

Anjular js Filters:

        Anjular js provides many filters and options to
        Format
        Sort,
        Filter

Syntax  :   {}
Filters can be allowed write in  2 places
               1.   Databinding expressions
               2.   Directives

Format data :
             Anjularjs provides predefined syntax to get excepted fomat of data. in those date one of required famat options are

Data formate as :

ng-model direcive : for limit of rows  i.e ng-model="rowlimit"

Anjular js : ng-click event directive

Anjular js

                 We can trigger the any custom event to our html elements using ng-click eirective. now we will add  behaviours to our button controls in this demo for item/course likes and dislike oprations/behaviours.

Adding behaviour to button :
                           ng-click is the directive of anjularjs

Output :

Anjularjs : ng-repeat, index & parentIndex of an array

Angulajs  : ng-repeat, index parentindex

                    ng-repeate is a anjular directive help to iterate the items of an array.

Index : 

        $index is help us to access index of item in that collection.

Expressions are : 

Index = {{ $index}}

Parentindex={{$parent.$index}}----current parent item index in array.

ng-init=”parentindex=$index”->get current item index is initialized as  parentindex variable.

Anjularjs 2 way Databinding

Anjularjs : Two way databainding

                            Anjularjs provides two way data binding support, till now we seen  databinding from model to view like below

Anjularjs support view to model updation also with the help of directive : ng-model.

now will see this with complex object. i.e employee

Output :

Anjularjs ng-src directive

Anjularjs ng-src:

   Anjularjs provides ng-src directive for get the path of image file from expression

<img src="/IMAGES/APMAP.png" alt=”andharapredesh” style="height:200px;" width="200px" />

In case of dynamically binding image path to img  in anjular we have to use binding expression.

<img src="{{State.flagpath}}" alt={{State.CityName}} style="height:200px;" width="200px" />

Here issue is expression will be validated once controller and state object is initialized.

So initially it will consider {{State.flagpath}} as path---gives error. Once state object initialized. It will get object path display image.

2 requests one is validated before state object constructed another one after state object is constructed.

so best practice is use ng-src={{ State.flagpath}}} which is evaluated once state object is initialized.—expression will be evaluated.

Controllers in Anjularjs

AnjularJS controllers :

         As per SOLID principal as well MVC suggested way is separation of conterns(Model,View,Controller) we have to prepare object/model is job of controller, we can construct/prepare model itself at controller but it is violation mvc pattern.

Model(employee)---------$scope-------View Scripts.js------------------anjularjs------demo.html

   

Constructing a complex object/employee in controller and attaching to $scope object. $scope is a glue between model object and view.

    

 If we define a controller as a sperated js file or same file $scope is mandatory to access complex object (employee) object.

Notes :

       1. In anjularjs if we missspelled the controller name then anjularjs will report the error.

as like

Browser : Developer tolls--console 

 Error :  Argument "mycontroller1" is not a function, got undefined.

to get good understandable error description use anjular.js.(not minified version of anjular.js)

      2. missspelled the property of object like

   {{ employee.gende} instead of  {{ employee.gender}}----anjular not report any error.

simply it will ignore the gender value.

Modules and Controllers in AnjularJS

Anjular JS Modules and Controllers

                Module is container for different parts of  application, i.e controllers,services,directives,filters,expressions…..

Everything should be register with module. we can say anjularjs development is moduler programming model which provides more advantages over the development.

How to create a module ?

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

here

     anjular is object provided by anjularjs framework to define a module,we defined a module myapp.(name of the module is “app”).

[] this module is not dependent on any other module so that we placed an empty array.

How to create a controller ?

          Controller is javascript constructor function. Which is responsiable for building model object( constructing a model object/data),generally controller fetch data from service(web api/webservice) to fetch the data in projects for dynamic data.

 var mycontroller = function ($scope)

                    {

                             $scope.message = "Welcome to AnjuarJS";

                    }

Now we need to register this function to module as controller.

Approach 1 :  As anonymous function

 Approach 2 :  Directly register with module without variable

Approach 3:  Method chaining approach register controller to a module

here

  $scope is an anjularjs object which is maintain by anjular to maintain/save  sate of  message object. 

    here 
           Controller is a javascript function.

           $scope is anjular object to save the state of object.

           message is object/model with the help of $scope object saving state("welcome to anjularjs") persisting it.     

Introduction to Anjular JS

Introduction to AnjularJS

                  Anjularjs is a open source javascript framework available as library by google for building dynamic web applications, we have many more clientside javascript frameworks available like(knockout/backbone), but anjularjs provides all together in single client side framework that is anjularjs.

Dynamic content, Responsive UI, Ajax calls, MVC pattern (more maintainable script/code/speration of concerns) for web applications development done with the help of anjularjs framework.

                         Anjularjs giving more strength to all html elements(input,select,img..ect) to get good dynamic content update &  behaviors with the help of directives(html attributes/properties).

Importance of Anjular JS :

1.       MVC Pattern( speration of concerns: Model,View,Controller) design pattern.

2.       Single page application(SPA) development.

3.       HTML DOM manipulation &

Data Binding,

Basic templating directives,

Form validations,

Routing,

Dependence injection are making web application development much easier & rapid web app development.

4.       Anjularjs promots declarative web programming with the help of attributes/directives.

                                                                MVC Pattern

     Model  :   Responsiable for holding  data of web application or state of the application.

     View     :  Presentation of data.

     Controller : Getting data( usually web api/REST calls) for building Model object,which we are           going to present it in UI.

       

Notes:

    

       1.  This demo "ng-app" is built in derictive module by anjularjs framework

       2.  Controller is not required for validate to expressions

       3.  Every expression should be placed between {{ expression }}