npm ERR! Unexpected end of JSON input while parsing near

To resolve this error, we need to type the below command,

npm cache clean --force

This command is forcefully cleaning the cache.

Read More

Loader Example Using Loader Image in AngularJS.

In this article, We will discuss about a Loader Example using Loader Image in AngularJS.

Here, we are using loader Image in place of HTML loader. So first add any loader image into your Solution.

After that we added background overlay means when the loader will load then at that time it will disable the background so we can't able to perform any kind of operation and whose css is as below,

     .overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }

Now, Let's add angular js first in our head section like this,

<script src="Scripts/angular.min.js"></script>

After that We Will create our Module and Controller like this under the script tag,

   <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = true;
            //$scope.myLoader = false; // Use When you want to hide the loader
        });
    </script>

Now, let's Create our div tag and in that place one image tag Whose src is the loader image which we added earlier  and Where we will Use our either ngHide or ngShow and Which is Shown in below,

<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-show="myLoader">
                <img src="Image/loader.gif" id="img1" style="margin-left:169px;"/>
            </div>
        </div>
    </form>
</body>

Here, We used ng-show but any one can use ng-hide also.

So when we will run the application, as $scope.myLoader = true; the loader Will display and if you want to hide the loader then We have to use $scope.myLoader = false; .

The Whole Code looks like as below,

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = true;
            //$scope.myLoader = false; // Use When you want to hide the loader
        });
    </script>
    <style>
        .overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }
    </style>
</head>
<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-show="myLoader">
                <img src="Image/loader.gif" id="img1" style="margin-left:169px;"/>
            </div>
        </div>
    </form>
</body>
</html>

The Output of the Code looks like this,

Read More

Loader Example Using ngHide in AngularJS.

In this article, We will discuss about a Loader Example using ngHide in AngularJS.

Here, we are using HTML loader and whose CSS Shown below,

       .loader {
            background: #e9e9e9;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid blue;
            border-right: 16px solid green;
            border-bottom: 16px solid red;
            border-left: 16px solid pink;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

After that we added background overlay means when the loader will load then at that time it will disable the background so we can't able to perform any kind of operation and whose css is as below,

.overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }

Now, Let's add angular js first in our head section like this,

<script src="Scripts/angular.min.js"></script>

After that We Will create our Module and Controller like this under the script tag,

    <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = false;
            //$scope.myLoader = true; // Use When you want to hide the loader
        });
    </script>

Now, let's Create our div tag Where we will Use our ngHide and Which is Shown in below,

<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-hide="myLoader">
                <div class="loader"></div>
            </div>
        </div>
    </form>
</body>

So when we will run the application, as $scope.myLoader = false; the loader Will display and if you want to hide the loader then We have to use $scope.myLoader = true; .

The Whole Code looks like as below,

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = false;
            //$scope.myLoader = true; // Use When you want to hide the loader
        });
    </script>
    <style>
        .overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }

        .loader {
            background: #e9e9e9;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid blue;
            border-right: 16px solid green;
            border-bottom: 16px solid red;
            border-left: 16px solid pink;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-hide="myLoader">
                <div class="loader"></div>
            </div>
        </div>
    </form>
</body>
</html>

The Output looks like this,

Note:- This is Just a Sample Code and You can Change as per your requirement.

Read More

Loader Example Using ngShow in AngularJS.

In this article, We will discuss about a Loader Example using ngShow in AngularJS.

Here, we are using HTML loader and whose CSS  are Shown below and need to add this css under style tag,

.loader {
            background: #e9e9e9;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid blue;
            border-right: 16px solid green;
            border-bottom: 16px solid red;
            border-left: 16px solid pink;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

After that we added background overlay means when the loader will load then at that time it will disable the background so we can't able to perform any kind of operation and whose css is as below,

       .overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }

Now, Let's add angular js first in our head section like this,

<script src="Scripts/angular.min.js"></script>

After that We Will create our Module and Controller like this under the script tag,

    <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = true;
            //$scope.myLoader = false; // Use When you want to hide the loader
        });
    </script>

Now, let's Create our div tag Where we will Use our ngShow and Which is Shown in below,

<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-show="myLoader">
                <div class="loader"></div>
            </div>
        </div>
    </form>
</body>

So when we will run the application, as $scope.myLoader = true; the loader Will display and if you want to hide the loader then We have to use $scope.myLoader = false; .

The Whole Code looks like as below,

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("testLoader", []);
        app.controller("testLoaderController", function ($scope) {
            $scope.myLoader = true;
            //$scope.myLoader = false; // Use When you want to hide the loader
        });
    </script>
    <style>
        .overlay {
            background: #e9e9e9;
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0.5;
        }

        .loader {
            background: #e9e9e9;
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid blue;
            border-right: 16px solid green;
            border-bottom: 16px solid red;
            border-left: 16px solid pink;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body data-ng-app="testLoader">
    <form id="form1" runat="server">
        <div data-ng-controller="testLoaderController">
            <div class="overlay" data-ng-show="myLoader">
                <div class="loader"></div>
            </div>
        </div>
    </form>
</body>
</html>

The Output looks like this,

Note:- This is Just a Sample Code and You can Change as per your requirement.

Read More

When to use data-ng and When to use ng in AngularJS.

In this article, We will discuss When to use data-ng and When to use only ng in Angular JS.

Well, We can Use either data-ng or ng. There Will be no error generate When we use either data-ng or ng but sometimes it will Show Warning.

When we use ng and if HTML is not used in that page then it will Show Warning like "Validation(HTML5):Attribute 'ng-app' is not a valid attribute of element 'body'". 

But to resolve this Warning we need to add data befor ng like this, data-ng in AngularJS.

So due to avoid those Warnings it is recommended to Use data-ng but Still We can Use ng also.

Read More

Validation (HTML5): Attribute 'ng-app' is not a valid attribute of element 'body'.

In this article, We will discuss Why Attribute 'ng-app' is not a valid attribute of element 'body' or 'div' tag.

Well, this is not a issue actually rather it is just a warning.

Even if we can easily run our application and get back the result Without any Error.

This Warning is showing because HTML5 is not defined in this page.

To resolve this warning, We need to add data- before all ng tags Which is as follows,

Read More

angular is not defined in angularjs

The main reason behind this issue is angular js not defined in your page. 
You are not defined the angular js file and trying to use it. 
To defined in your page just drag and drop either angular.js or angular.min.js file on top and after that paste your any other js file where you wrote your module,controller etc.

example:-
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="test.js"></script>

Read More

Error: [$controller:ctrlreg] The controller with the name 'myController' is not registered in angular js.

The reason behind this is that, if we write our controller in some js file then compulsory that js file need to add in our page otherwise it will show you error.

Example:-

suppose i added my controller in js file called test.js then in whatever the page i want to use that controller then compulsory i need to add the js file like this,

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

and make sure before that add angular js file and our module file if exists.

Read More

.then is not a function in angularjs

In this article, We will discuss then is not a function in angularjs. 

I will explain you how to use the .then function in the best way by example which is as follows:-

Example:-
$http({
            method: "POST",
            url: "User/Test"            
        }).then(function onSuccess(response) {            
              // your code  if any
        }).catch(function onError(response) {
            alert("Error");
        });

Read More

Jquery is not working with AngularJS.

In this article we will discuss about Why Jquery is not working with AngularJS.

The main Problem behind this issue is we are trying to Use both AngularJs and Jquery Simultaneously and Problem arises when we used angularJs Previously and now we are trying to use Jquery at that time already $ is already defined in AngularJs and again we are trying to define $ in Jquery, due to which the Jquery will not work in AngularJs.

To resolve the issue we need to use $.noConflict(); in Jquery So that our AngularJs as well as Jquery both will work fine.

Example:-
--------------

Let us consider i have a project and where i have master page(Layout1.cshtml) and in that i used AngularJS and which is absolutely working fine.

After that take one Index.cshtml page and which includes master page(Layout.cshtml) and there i want to Use Jquery but if i used directly then it will show the $ is not a function error in your console window of Browser.

To resolve this error we need to use $.noConflict(); in the pageload in Index.cshtml page so that Jquery also works with AngularJS.

Read More