Directive Restrictions in AngularJS

In AngularJS, while creating a custom directive, we can have different kinds of restrictions depending on how we are going use that directive.

The different kinds of Restrictions are:

1. A - Attribute (Note : A is the Default Restriction)
2. C - Class
3. E - Element
4. M - Comment

Example:

1. A- Attribute :

If you want to use your directive as attribute of any element then you have to write the restriction as 'A'.

Javascript:

        var myApp = angular.module('myApp', []);

        myApp.directive('myDirective', function () {

            return {

                restrict: 'A',

                link: function () {

                    alert("A is working..");

                }

            }

        })


Html  :

<html ng-app="myApp">

<head>

<title>AngularJS Directives</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

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

</head>

<body>

    <div myDirective></div>

</body>

</html>


Note: We are using our directive as Attribute for "div" element.

2. C - Class :

If you want to use your directive as class then you have to write the restriction as 'E'.


Javascript:

        var myApp = angular.module('myApp', []);



        myApp.directive('myDirective', function () {

            return {

                restrict: 'C',

                link: function () {

                    alert("c is working..");

                }

            }           

        })


Html  :

<html ng-app="myApp">

<head>

<title>AngularJS Directives</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

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

</head>

<body>

    <div class="myDirective"></div>

</body>

</html>


Note: Here we are using our directive as a class.

3. E - Element :

If you want to use your directive as html element then you have to write the restriction as 'E'.

Javascript:

        var myApp = angular.module('myApp', []);



        myApp.directive('myDirective', function () {

            return {

                restrict: 'E',

                template:'<div>This text is from custom directive..</div>'

            }                       

        })


Html :

<html ng-app="myApp">

<head>

<title>AngularJS Directives</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

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

</head>

<body>

    <myDirective></myDirective>

</body>

</html>


Note: Here we are using our directive as element.

4. M - Comment :

If you want to use your directive as comment then you have to write the restriction as 'M'.

Javascript :

        var myApp = angular.module('myApp', []);



        myApp.directive('myDirective', function () {

            return {

                restrict: 'M',

                link: function () {

                    alert('M is working..');

                }

            }                                   

        })


Html :

<html ng-app="myApp">

<head>

<title>AngularJS Directives</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

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

</head>

<body>

    <!-- directive:myDirective -->

    <div></div></body>

</html>


Note: Here you are invoking your directive using a comment(careful with the spaces in comment. If comment is not properly formed, you may not get the result).

These are the different kinds of directives restrictions in AngularJS.

For more posts on angularJS refer: AngularJS

Read more...

Uncaught ReferenceError:Controller is not defined in AngularJS

If you have some AngularJS code like this,

var mailApp = angular.module('myMail', []);

function emailRouteConfig($routeProvider) {
    $routeProvider.when('/', { controller: listController, templateUrl: 'list.html' }).
                   when('/view/:id', { controller: DetailController, templateUrl: 'detail.html' }).
                   otherwise({ redirectTo: '/'});
}


and controller like this,

mailApp.controller('listController',function ($scope) {
    $scope.messages = messages;
})

mailApp.controller('DetailController',function ($scope, $routeParams) {
    $scope.message = messages[$routeParams.id];
})


then this will generate a error in console saying Uncaught ReferenceError: controller is not defined in module.

To overcome this issue there are two solutions.

Solution 1:

The issues is because of this
    $routeProvider.when('/', { controller: listController, templateUrl: 'list.html' }).
                   when('/view/:id', { controller: DetailController, templateUrl: 'detail.html' })


This is telling Angular to point at the listController object, which is undefined and causes an error.

Now, enclose the controller name in quotes like this,

    $routeProvider.when('/', { controller: 'listController', templateUrl: 'list.html' }).
                   when('/view/:id', { controller: 'DetailController', templateUrl: 'detail.html' })


Solution 2:

Define your controllers like this

function listController($scope) {
    $scope.messages = messages;
}

function DetailController($scope,$routeParams) {
    $scope.message=messages[$routeParams.id];
}


Read more...

DataBinding in AngularJS


Note: To understand this post please read our AngularJS Tutorial 1


In our previous tutorial we saw how to get data from model. We have written code in our javascript file. But what if we could have all this work done without writing code? What if we could just declare which parts of the UI map to which JavaScript properties and have them sync automatically? This way of programming is called data binding.

In this tutorial i am using the same example as in previous tutorial and just making it dynamic. In the previous example the HelloController sets the model Message.text once and it never changes. To make it live, lets change the previous example by adding a textbox. Using that textbox we can change the value of Message.text when the user types sometihng in the textbox.

<html ng-app>
<head runat="server">
    <title>AngularJS</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>  
    <div>
        <input ng-model='name' />
        <p> Hai, {{name}} World!! </p>
    </div>  
</body>
</html>


Now run this code and type some name in textbox, you can see the text changes accordingly.  In this way we can dynamically update the view using AngularJS's DataBinding.
Read more...

AngularJS Tutorial

AngularJS, the open source Javascript framework that uses Model-View-Controller(MVC) architecture, databinding, client-side templates and dependency injection for building web apps. It also used to develop smaller, light-weight web apps that are simple to create and easy to test and maintain.

Model View Controller (MVC)


The idea behind MVC is that you have clear separation between managing its data model, the application logic (controller, and the UserInterface(view).

The view gets data from the model . When a user interacts with the
application by clicking or typing, the controller responds by changing data in the model.
And finally, the model notifies the view that a change has occurred so that it can update it's view.
In Angular applications, the view is the Document Object Model(DOM), the controllers
are JavaScript classes, and the model data is stored in object properties

Now we will look at a basic Hello World program using AngularJS.

<html ng-app>
<head runat="server">
    <title>AngularJS</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script type="text/javascript">
        function HelloController($scope) {
            $scope.Message = {text: 'Hello'};
        }
    </script>
</head>
<body>  
    <div ng-controller="HelloController">
    <p> {{Message.text}} World!! </p>
    </div>  
</body>
</html>

The first script tag is to add AngularJS to our HTML page. In second script tag i have written the function HelloController in which a object "Message" is created.

When you run the above code, The browser displays Hello World !! as output.


Read our Next Tutorial :  DataBinding in AngularJS


Read more...

Check element visibility with jquery


In jQuery, it is possible to toggle the visibility of an element. We can use the functions .hide(), .show() or .toggle().

 We can also check whether a element is hidden or visible using jQuery.

To check whether a element is visible or not you can use 

if(  $(element).is(":visible") )
 {
    //your code here
 }  

or you can also use

if(  $(element).css('display') == 'none'  )
{
     //your code here
 }

If you want to select all the elements which are hidden use this 

$('element:hidden')

If you want to select all the elements which are visible use this 

$('element:visible')

Read more...

Hyperlink open in new Tab

If you want any page to open in a new tab using html anchor tag you have to include target="_blank" attribute.

Example:

<a href="/content/Name.aspx" target="_blank">Click to open file </a>

Read more...

Test your website under different resolutions

The primary thing that we do consider is only the designing part of the webpage/site. But its not that only the viewers surf through the desktop; they can even through mobile/tablet or any other device. So, we need to particular in such things like: when we make the designing of the page, we need to develop in such a way that  the user can view the same sort of things/layout and consistence either in mobile/tablet/PC. So, many of the newer methodologies have come into existence. And one of the latest one is Responsie Web Design. So, make sure that you follow those rules to make your look same all-over. Developing that is one issue and to test is another issue. So, once after developing, you can test your website under different resolutions at: https://quirktools.com/screenfly/ or http://www.responsinator.com/ ;  which are some of the best tools that we found. So, make sure your app looks unique and consistent through all the resolutions.
Read more...