AngularJS Routing

AngularJs enables us to build single page applications (SPA) in which you can navigate to different pages of your application dynamically without page reloading.

The "ngRoute" module routes your application to different pages without reloading the entire application.  

Steps for Routing :

1. Include the AngularJS Route module.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>  

   

2. Add the as a dependency in the application module 

var app = angular.module("app", ["ngRoute"]);  

3. Use the $routeProvider to configure different routes in your application

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home.htm"
  })
  .when("/services", {
    templateUrl : " services.htm"
  })
  .when("/products", {
    templateUrl : "products.htm"
  })
  .when("/contact", {
    templateUrl : "contact.htm"
  });
});

With $routeProvider, we can define what page to display when user clicks a link without reloading entire page.

4. Add a container for Routing

<div ng-view></div>  

An Application can only have one "ng-view" directive, and this will be the placeholder for all views provided by the route.  

When a user clicks 'services' link, the contents of 'services.htm' will be added to the child of the element where ng-view directive is present.

Click here to read about custom directives.

Deals At Amazon

AngularJS Controller

A Controller is defined by a JavaScript constructor function in AngularJS. AngularJS controllers control the data of AngularJS applications.  The ng-controller directive defines the application controller.

AngularJS Controller Example

<div ng-app="App" ng-controller="Ctrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
    $scope.firstName = "Angular";
    $scope.lastName = "Js";
});</script>

The ng-controller="Ctrl" attribute is an AngularJS directive. It defines a controller.

The "Ctrl" function is a JavaScript function and AngularJs will invoke the Ctrl function with $scope.  In AngularJS, $scope is the application object which can access all controller functions and variables. 

Here the controller creates two variables, firstName and lastName. Both the varialbes are bound with ng-model directive which is a two way binding. When the user types the first name in the input field, it will be updated in firstName variable.

A controller can have methods which are variables as functions. These functions can be invoked from HTML and inside the controllers.

AngularJS Controller functions Example

<div ng-app="App" ng-controller="Ctrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
    $scope.firstName = "Angular";
    $scope.lastName = "JS";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});</script>

Here fullName is a controller function which is bound using expression binding. This function has the access to the controller variables and returns the full name. 

Click here to read about Custom directives.

Click here to read about Data binding.

AngularJS Custom Directives

AngularJS custom directives are one of the most powerful components of AngularJS, helping you extend basic HTML elements/attributes and create reusable code.

Custom Directive types:

In AngularJS we can create the custom directive for the following types of elements. 

Element directives:

Directive activates when a matching element is encountered. Restrict mode is defined by "E".

Example: <ng-directives></ng-directives>

Attribute: 

Directive activates when a matching attribute is encountered. Restrict mode is defined by "A".

Example: <span ng-directive></span>

CSS: 

Directive activates when a matching css style is encountered. Restrict mode is defined by "C".

Example: <span class="ng-directive"></span>

Comment:

Directive activates when a matching comment is encountered. Restrict mode is defined by "M".

Example: <!-- directive: ng-directive -->

How to create custom directives:

Example 1:

100. <html>  

100.   

100. <head>  

100.     <title>Angular JS Custom Directive Example</title>  

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

100.         </script>  

100.         <style>  

100.             .sparkline  

100.             {  

100.                 background-color: brown;  

100.                 font-size: large;  

100.                 height: 100px;  

100.                 width: 200px;  

100.                 color: aqua  

100.             }  

100.         </style>  

100.   

100. </head>  

100.   

100. <body>  

100.     <h2>AngularJS Custom Directive Example</h2>  

100.     <div ng-app="mainApp">  

100.         <divng-demo>  

100.             </div>  

100.             </div>  

100.   

100. </body>  

100. <script>  

100.     var mainApp = angular.module("mainApp", []);  

100.     mainApp.directive('ngDemo', function()  

100.     {  

100.         return  

100.         {  

100.             restrict: 'A',  

100.             template: '<div class="sparkline">Simple Custom Directive of Element Type</div>'  

100.         }  

100.     });  

100. </script>  

100.   

100.   

100. </html>  

In the above code we defined the name of the directive (ngDemo). Type of the directive is an attribute that is defined by restrict: 'A'. Here the restrict option is used to define the type of element for which this directive will invoke.

In template option we define the text (template) that replaces the content of the element that invokes this directive. Template is an option where we are specifying the html that will be appended or append.

<divng-demo></div>

Using the above code we invoked the directive. Notice that when we invoke it (ng-demo) and the name of directive (ngDemo), both are not the same. This is because AngularJS will handle translating the camel cased name when we define it to the snake case when we invoke it.


Click here to read about data binding.

View unsafe pointer as an array in C# watch window

Introduction

MS visual studio C# watch window does not support size specifier for pointer to view it as an array whereas c++ watch window does it.

Using the code

Refer below image for the unsafe fuction which receives the pointer arguments like "float * Vertices". We can use "Vertices,10" in C++ watch window to view the contents of the pointer. How to do that in C#??

Step 1: Immediate window
Declare a float array in immediate window as the following image.

Step2: Watch windowType the following line in watch window.
Marshal.Copy((IntPtr)Vertices, fVerticesArray, 0, noVertices)

After the expression is evaluated in the watch window, type the variable name which we declared in immediate window. Expand the variable to view the contents of the pointer. That's all. :)

AngularJS Data Binding

Data binding in AngularJS is the synchronization process between the model and the view.

In angularjs, when model data is changed, the view data will change automatically and vice versa.

We have two types of data bindings available in angularjs,

                1. One-Way data binding

                2. Two-Way data binding

AngularJS One-Way Data Binding:

In One-Way data binding, view (UI part) not updates automatically when data model changed and we need to write custom code to make it updated every time

AngularJS One way Data Binding Example:

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs One Binding Example

</title>

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

<script type="text/javascript">

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

app.controller('Ctrl', function ($scope) {

$scope.name = 'I am one way binding';

});

</script>

</head>

<body ng-app="app">

<div ng-controller="Ctrl">

<p>

Message:   {{ name }}

</p>

</div>

</body>

</html>

AngularJS Two-way Data Binding:

In Two-way data binding, view (UI part) updates automatically when data model changed

AngularJS Two-way Data Binding Example:

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Two Binding Example

</title>

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

<script type="text/javascript">

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

app.controller('Ctrl', function ($scope) {

$scope.name = 'I am two way binding_2';

});

</script>

</head>

<body ng-app="app">

<div ng-controller="Ctrl">

Enter Name : <input type="text" ng-model="name" style="width:250px" />

<p>

Entered Name:   {{ name }}

</p>

</div>

</body>

</html>

In the example above, whenever we change input control value, automatically the appearance value also will get changed.

Click here to read about custom directives.