Display uploaded file data in IFrame in AngularJS and JQuery

            In this article I would like to know you about displaying uploaded file data content from  file upload input control to show in iframe. For this take a html file and js file, html is for designing of view and js is to write the angularjs code, to use the angularjs add the angularjs files. The below code shows the implementation of how to display the uploaded file in angularjs and  jquery.

Typeahead Dropdown In AngularJS

            In this article, I would like to know you about using typeahead dropdown in angularjs application, typeahead is like a autocomplete text dropdown provided by twitter.

For this we have to install angular-typeahead from nuget package manager.

For this I had taken three dropdowns, one is for one is autocomplete without heading and another one is autocomplete with heading and other one is anutocomple with heading by getting data from webapi.

So, I had taken two projects in one solution, one is for angularjs-typeahead application and another one is for WebApi, to get the data from the Api.

Moving Marker In Map Using SignalR in ng-map In AngularJS

            In this article, I would like to know you about using of SignalR in ng-map In AngularJS.

So , To view map in the application, we have to add the angular script of  ng-map and also to use SignalR, we have to add angular-signalr-hub from nuget package manager.

This angular-signalr-hub establish the connection from client to server and having some predefined properties like setting the rootpath and can write user defined listeners and methods that can establish the connection and stop the connection.

And also jquery.signalR-2.2.0.min.js is also added along with that, so that it can work with web sockets and connects the client with server and if any connection dropout happens, or any connection problems,  it throws error message every second.

Passing data between controllers using $state.go() in AngularJS

In this article, I would like you to know about passing data between controllers using $state.go(). There are mainly 3 methods are there to pass data through $state.go().

1.         Without using url : i.e., by using params should declare at provider state is configuring

2.       using url : i.e., the passing data is displayed in url after slash ‘/’

3.       using querystring : i.e., the data is passed as query string , that can be seen in url.

I had taken 4 js controllers and 4 html view templates and one index.html and one app.js file.

In app.js I had created a module and injected ui.router to route the html pages and to change the state of the Single Page Application using $stateProvider.

Passing data between controllers using ‘service’ in AngularJS

        In this article I would like to know you about Passing data between angularjs controllers using ‘service’, actually we can maintain data  using $sessionStorage throughout the application. But If we want to pass data from one angularjs controller to other angularjs controller within the application, then we can use custom service. For that First declare a service :

Issues while using AngularJS with MVC

Issues while using AngularJS with MVC :

1.         Routing and Redirection becomes difficult : When we are trying to route, both the AngularJS and MVC are having routing concept, So the application gets confused to which routing should follow. And it stucked in the same page if we want to redirect to other page, actually in angularjs we use $state.go() for routing between the pages, and in MVC we use ActionResult to return View(), If we use MVC routing then we have to use $window.location.href instead of $state.go() (here state does not maintain in between controllers by using AngularJS with MVC.

Upload and Download Functionality In AngularJS And WebApi By Converting The File Into Base64 Format

              In this article, I wanna share about upload and download of files to database in angularjs and WebAPI. In this for Uploading functionality , I am converting the selected file from File browse input control and adding (pushing) the files into a angularjs scope object of array  and in the submit button click event, converting the list of files from the scope object to base64 format and passing to webapi and saving in the database. And again in Download functionality , getting back the base64 format of file  from WebAPI to AngularJS http function as response into byte format and converts to the File Type (ex: docx, pdf, jpg … etc) and downloaded to the download folder.

What is Digest Cycle In AngularJS ?

What is Digest Cycle In AngularJS ?

            Digest Cycle is responsible for two way binding. When A directive like ng-model having some value in the  input control which is from $scope object of the controller , if user changes the exisiting value with some new value, then internally this Digest Cycle evauates.

In this Digest Cycle mainly three functions come in front, those are $watch(), $digest() and $apply().

AngularJS Routing Using UI-Router ($stateProvider)

AngularJS Routing

In This Article, I would Like To Know You About The Routing In AngularJS. For Routing Concept, We Have stateProvider And routeProvider Providers, As routeProvider Is By Default In AngularJS, But stateProvider Is Third Party Provider. To Use routeProvider, We have To Use ‘ngRoute’ In Module Declaration, And For stateProvider, We Have To Use ‘ui-router’.

The stateProvider Is Having More Features Than routeProvider, As Using routeProvider, The Page

Display List Using Key, Value Pair Of ng-repeat Using GroupBy Multiple Elements

In This Article, I Would Like To Know You About The Key, Value Pair Of ng-repeat Using GroupBy Filter With Multiple Elements.

Another Example Is Shown In The   DisplayingList Using Nested ng-repeat In Nested Tables Using GroupBy Filter

Displaying List Using Nested ng-repeat In Nested Tables Using GroupBy Filter In AngularJS

In This Article I Would Like You To Know About Displaying List In Table Using GroupBy Filter. i.e., If A Column Is Having Data Repeating Multilple Times Then We Can Group The Column Same Data Into One And Display The Other In Nested Table For That Particular Row.

To Do Grouping We Have To Include angular-filter Script

Display Column Data Comparing With Previous Row In ng-repeat AngularJS

In this Article, I Would Like To Know You About Binding Of List To A Table Using ng-repeat. And Showing The Data In A Table And Showing The Column Data Conditionally Which Is Having Same Category. For This I Had Used $index  To Identify The Same Column Data in HTML Page Like By Comparing The Current Row Column Data With Previous Row Column Data, I Am Hiding The Column Data, If The Data Is Same As Previous Row Data Like Using

Clear Data In Form Input Controls/Fields In AngularJS

In This Article, I Would Like To Know You About How To Clear The Controls Data, Actually There Are Three Ways To Clear The Input Controls / Fields Data.

One Is By Clearing Only The ng-model data i.e., By Using This, If The Validation Of Required Is There For Form i.e., Required Form Validation Is There, Then The Error Message Will Display, So This Is Bad Scenario For Forms Having Validation.

Second Way Is By Reloading The Page, By Using This All The Page Will Be Reloaded And All The Data In The Input Controls Will Clear And All The Validations Will Set As Initial Stage Of The Form. And Also If The Page Have To Get The Data From DB,

Form Validation In AngularJS Using ng-messages

In This Article I Would Like To Explain You About Form Validation In AngularJS Application using ng-messages.

For Form Validation Using ng-messages In AngularJS, We Have To Add Script File Link

i.e., <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script> And Also Should Add 'ngMessages' directive To The Angular Module .i.e.,

angular.module('angularformvalidationusingngmessage', ['ngMessages']);

For The Form Validation, We Have To Give Name For The Form tag i.e., <form name="formvalidation" novalidate> As The Input Controls Recognise By Using Name Of The Form Only.

And ‘novalidate’ Is For Not Validating The Form By Its Default, As We Are Giving The Validations And Validation Messages. AngularJS Monitors The State Of The Input Fields By

  Form Properties/Attributes

For Form Validation In AngularJS Application Without Usingng-messages

Form Properties In AngularJS

In This Article I Would Like To Know You About The Form Properties

AngularJS Monitors The Information Of The Input Fields Through The HTML5 Attributes/Properties Of The Form.

There Are Different Types Of Form Properties

Form Validation In AngularJS Without Using ng-messages

In This Article I Would Like To Explain You About Form Validation In AngularJS Application without using ng-messages.

For The Form Validation, We Have To Give Name For The Form tag i.e., <form name="formvalidation" novalidate> As The Input Controls Recognise By Using Name Of The Form Only.

And ’novalidate’ Is For Not Validating The Form By Its Default, As We Are Giving The Validations And Validation Messages. AngularJS Monitors The State Of The Input Fields By Using The Form Properties/Attributes.

Search Functionality In AngularJS

In this article, I would like you know you about Search functionality in AngularJS.

In HTML the alignment of controls is using bootstrap classes.

To start the AngularJS Application We should first apply the Module Name with ng-app directive in <html>. The Module Name is from js file which is given name of the module of the AngularJS application.

And Later add the angular.min.js file and also for  designing, we have to add bootstrap.min.css files.

Add And Remove Data From List Using AngularJS

In this article, I would like you know you about Add records to the list and Remove the records from list in AngularJS.

Here in angularjs to add the row/record to the list is using 'push' property will be done

And to remove the record/ row from the list we have to use 'splice' property with index value should be given.

[jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element

This error occurs when i am trying to clear the upload file data
using angular.element("input[type='file']").val(null); in ng-click event.
This error occurs due to that, i had put jquery script tag after angularjs.


<script data-require="angular.js@1.3.x<wbr />" src="<a href="https://code.angularjs.org/1.3.15/angular.js" target="_blank" rel="noopener" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://code.angularjs.org/1.3.15/angular.js&source=gmail&ust=1497810306404000&usg=AFQjCNFpugSiga_UIL438wrAzRsNrbKNwA">https://code.angularjs.<wbr />org/1.3.15/angular.js</a>" data-semver="1.3.15"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="<a href="http://code.jquery.com/jquery-2.1.3.min.js" target="_blank" rel="noopener" data-saferedirecturl="https://www.google.com/url?hl=en&q=http://code.jquery.com/jquery-2.1.3.min.js&source=gmail&ust=1497810306404000&usg=AFQjCNF62Dn_fiNBBHg56-wDiMJlx2ZmCg">http://code.jquery.com/<wbr />jquery-2.1.3.min.js</a>"></script>

after i changed the order of the script link. it works perfect