ng-hide directive and ng-click directive

ng-hide directive hides a given control.

In below example, we’ve added ng-hide attribute to a HTML button and pass it a model. Then we’ve attached the model to a checkbox and can see the variation.

<input type = “checkbox” ng-model = “showHide2”>Hide Button
<button ng-hide = “showHide2”>Click Me!</button>

ng-click directive represents a AngularJS click event.

In below example, we’ve added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = “clickCounter = clickCounter + 1”>Click Me!</button>

Factories Vs Service

Factories are functions that return the object, while services are constructor functions of the object which are instantiated with the new keyword.

Factory can return anything which can be a class(constructor function), instance of class, string, number or boolean. If you return a constructor function, you can instantiate in your controller.

Example:

myApp.factory(‘myFactory’, function () {

// any logic here..

// Return any thing. Here it is object
return {
name: ‘Joe’
}
}

If you’re using an object, you could use the factory provider.

Service does not need to return anything. But you have to assign everything in this variable. Because service will create instance by default and use that as a base object.

myApp.service(‘myService’, function () {

// any logic here..

this.name = ‘Joe’;
}
If you’re using a class you could use the service provider

How Angular creates the rootscope and scope objects

The Browser first loads the HTML page and creates a DOM (Document object model) and Angular runs over the DOM. Below are the steps how Angular creates the rootscope and scope objects.

Step 1: Angular parser first encounters the “ng-app” directive and creates a “$rootScope” object in memory.

Step 2: Angular parser moves ahead and finds the expression {{SomeValue}}. It creates a variable

Step 3: Parser then finds the first “DIV” tag with “ng-controller” directive which is pointing to “Function1” controller. Looking at the “ng-controller” directive it creates a “$scope” object instance for “Function1” controller. This object it then attaches to “$rootScope” object.

Step 4: Step 3 is then repeated by the parser every time it finds a “ng-controller” directive tag. Step 5 and Step 6 is the repetition of Step 3.

Implementing Angular routing

Implementing Angular route in five simple step process: –

Step 1: – Add the “Angular-route.js” file to your view.

Step 2: – Inject “ngroute” functionality while creating Angular app object.
var app = angular.module(“myApp”, [‘ngRoute’]);

Step 3: – Configure the route provider.
In route provider we need to define which URL pattern will load which view. For instance in the below code we are saying “Home” loads “Yoursite/Home” view and “Search” loads “YourSite/Search” view.

app.config([‘$routeProvider’,
function ($routeProvider) {;

$routeProvider.
when(‘/Home, {
templateUrl: ‘Yoursite/Home’,
controller: ‘HomeController’
}).
when(‘/Search’, {
templateUrl: YourSite/Search’,
controller: ‘SearchController’
}).
otherwise({
redirectTo: ‘/’
});
}]);

Step 4: – Define hyperlinks.

Define hyper link with the “#” structure as shown below. So now when user clicks on the below anchor hyperlinks, these actions are forwarded to route provider and router provider loads the view accordingly.

Step 5: – Define sections where to load the view.

Angular Directives

There are different type of Angular directives depending till what level you want to restrict your custom directive.

In other words we can create our custom directive to be applied only on HTML element or only on an attribute or just to CSS etc.

So there are four different kinds of custom directives:-

Element directives (E)
Attribute directives (A)
CSS class directives (C)
Comment directives (M)

Below is a simple custom directive implementation at the element level.

myapp.directive(‘userinfo’, function()
{
var directive = {};
directive.restrict = ‘E’;
directive.template = “User : {{user.firstName}} {{user.lastName}}”;
return directie;
});

ng-hide directive

ng-hide directive hides a given control.

In below example, we’ve added ng-hide attribute to a HTML button and pass it a model. Then we’ve attached the model to a checkbox and can see the variation.

<input type = “checkbox” ng-model = “showHide2”>Hide Button
<button ng-hide = “showHide2”>Click Me!</button>