RenderPage and RenderBody

RenderPage
RenderPage method also exists in the Layout page to render other page exists in your application. A layout page can have multiple RenderPage method.
@RenderPage(“~/Views/Shared/_Header.cshtml”)

RenderBody
RenderBody method exists in the Layout page to render child page/view. It is just like the ContentPlaceHolder in master page. A layout page can have only one RenderBody method.
@RenderBody()

Return types of a controller action method

The following are just a few return types of a controller action method. In general an action method can return an instance of a any class that derives from ActionResult class.

ActionResult Helper Method Description
EmptyResult (None) returns a null result
FileResult File Returns a binary output to write to the response
JavaScriptResult JavaScript Returns a script that can be executed on the client
JsonResult Json When you want to return a serialized JSON object
ContentResult Content Returns a user-defined content type
RedirectToRouteResult RedirectToRoute Redirect to another action method
RedirectResult Redirect When you want to redirect to another action method we will use RedirectResult
PartialViewResult PartialView As the name describe PartialViewResult renders the partial view.
ViewResult View ViewResult Renders a view as a web page.

PartialView As the name describe PartialViewResult renders the partial view.
RedirectResult Redirect When you want to redirect to another action method we will use RedirectResult
RedirectToRouteResult RedirectToRoute Redirect to another action method
ContentResult Content Returns a user-defined content type
JsonResult Json When you want to return a serialized JSON object
JavaScriptResult JavaScript Returns a script that can be executed on the client
FileResult File Returns a binary output to write to the response
EmptyResult (None) returns a null result

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.