Code-Searching: March 2017

Tuesday, 28 March 2017

What problem can arise with refreshing the a Angular page ?

While navigating the pages when you refresh (F5) the included/child page , the style may go away and tiles layout may lost.

Solution
Add base tag with URL / on the main layout page

<html ng-app="module1">
<head>
    <title>Hello</title>
<base href="/" />
    <script src="scripts/angular.min.js" />
    <script src="scripts/angular-route.min.js" />
</head>
<body>
    <table>
   <tr>
      <td colspan="2" class="header">
<h1>Website header</h1>
      </td>
   </tr>
     <tr>
<td class="menu">
   <a href="#/home">Home</a>
   <a href="#/trainings">Trainings</a>
   <a href="#/students">Students</a>
</td>
        <td class="container">
   <ng-view></ng-view>
          </td>
       </tr>
   <tr>
<td colspan="2" class="footer">
<h1>Website Footer</h1>
</td>
       </tr>
    </table>
</body>
</html>

How to use routeparams in routing ?

STEPS

Pass the parameter (using binding expression) with the URL
Configure the route with parameter like, <URL>/:<param> with corresponding template and controller
Define the controller with object $routeParams and use the passed parameters using this object

EXAMPLE
Main page
index.html in previous examples

TEMPLATES
students.html
<h1>Student List</h1>
<ul>
   <li ng-repeat="student in students">
<a href="students/{{student.id}}">
            {{ student.name }}
       </a>
   </li>
</ul>

studentDetails.html
<h1>Student Details</h1>
<table>
<tr>
   <td>Id</td>
   <td>{{ student.id }}</td>
</tr>
<tr>
   <td>Name</td>
   <td>{{ student.name }}</td>
</tr>
<tr>
   <td>Gender</td>
   <td>{{ student.gender }}</td>
</tr>
</table>

<a href="students">List of students</a>

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

app.config( function ($routeProvider) {
   $routeProvider
    .when("/home", {
        templateUrl: "templates/home.html",
        controller: "homeController"
     })
    .when("/trainings", {
        templateUrl: "templates/trainings.html",
        controller: "trainingController"
    })
    .when("/students", {
       templateUrl: "templates/students.html",
       controller: "studentController"
    })
    .when("/students/:id", {
       templateUrl: "templates/studentDetails.html",
       controller: "studentDetailsController"
    })
});

app.controller("homeController", function ($scope) {
   $scope.message = "Welcome to Home page";
});

app.controller("trainingController", function ($scope) {
   $scope.trainings = ["AngularJS", "HTML", "CSS", "Javascript"];
});

app.controller("studentController", function ($scope, $http) {
   $http.get("service/api/GetAllStudents").then( function(response) {
      $scope.students = response.data;
   })
});

app.controller("studentDetailsController", function ($scope, $http, $routeParams) {
   $http({
url:"service/api/GetStudent",
params:{ id:$routeParams.id },
method:"get"
   })
   .then( function(response) {
      $scope.student = response.data;
   })

});

Monday, 27 March 2017

How to set a default route ?

Use otherwise function of $routeProvider object to provide a default route.

JS
var app = angular.module("module1", ["ngRoute"]);
app.config( function ($routeProvider) {
   $routeProvider
   .when("/home", {
   templateUrl: "templates/home.html",
         controller: "homeController"
   })
   .when("/trainings", {
   templateUrl: "templates/trainings.html",
         controller: "trainingController"
   })
   .when("/students", {
   templateUrl: "templates/students.html",
         controller: "studentController"
   })
     .when("/contact", {
         template : '<h1>Contact Template loaded</h1>'
     })
     .otherwise( {
   redirectTo: '/home'
     }) });

When /home is called, it will include home.html at <ng-view> place.
When /XYZ is called, it goes to otherwise condition and redirect to route /home (Still includes home.html)

Sunday, 26 March 2017

How to use ng-route JS and ng-view directive for routing ?

Steps

Include script angular-route.min.js
Define a home page with various links and a placeholder defined by ng-show directive

The other template pages will be injected at the location of ng-show

Create multiple templates (pages) to include dynamically on home page
Define module and ngRoute dependency, which provides $routeProvider object
Define module config containing mappings of URLs with :

Templates (Pages to include)
Controllers (Logic to run before view/pages)

Define all controllers

Example

<head>
   <title>Hello</title>
   <script src="scripts/angular.min.js" />
   <script src="scripts/angular-route.min.js" /> </head> <body>
   <table>
<tr>
   <td colspan="2" class="header">
<h1>Website header</h1>
   </td>
      </tr>
      <tr>
   <td class="menu">
   <a href="#/home">Home</a>
   <a href="#/trainings">Trainings</a>
   <a href="#/students">Students</a>
   </td>
         <td class="container">
   <ng-view></ng-view>
         </td>
      </tr>
<tr>
   <td colspan="2" class="footer">
<h1>Website Footer</h1>
   </td>
      </tr>
   </table> </body>

TEMPLATES
Create a directory "templates" and put below pages in it

home.html
<h1>{{ message }}</h1>
.......
.....
.....

trainings.html
<h1>Trainings offered</h1>
<ul>
<li ng-repeat="training in trainings">
   {{ course }}
</li>
</ul>

students.html<h1>Student list</h1>
<ul>
<li ng-repeat="student in students">
    {{ student.name }} </li></ul>

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

app.config( function ($routeProvider) {
   $routeProvider
   .when("/home", {
   templateUrl: "templates/home.html",
         controller: "homeController"
   })
   .when("/trainings", {
   templateUrl: "templates/trainings.html",
         controller: "trainingController"
   })
   .when("/students", {
   templateUrl: "templates/students.html",
         controller: "studentController"
   })
});

app.controller("homeController", function ($scope) {
   $scope.message = "Welcome to Home page";
});

app.controller("trainingController", function ($scope) {
   $scope.trainings = ["AngularJS", "HTML", "CSS", "Javascript"];
});

app.controller("studentController", function ($scope, $http) {
   $http.get("service/api/GetStudents").then( function(response) {
      $scope.students = response.data;
   })
});

Notes

Access application using : <host>:<port>/index.html
When you click on the first link "Home", you will get URL :
<host>:<port>/index.html#/home
According to the Config

"/home" is mapped with "homeController" to populate the model and execute the business logic
Template "templates/home.html" will be injected at the placeholder defined by directive ng-view on index.html

Remove # from URLs

Enable HTML5 mode using $locationProvider
Remove # from called URLs

JS
app.config( function ($routeProvider, $locationProvider) {
   $routeProvider
    .when(...)
    .when(...)
    .otherwise(...)

    $locationProvider.html5Mode( {
      enabled: true,
      requireBase: false
    });

});

Index.html
<a href="/home">Home</a>
<a href="/trainings">Trainings</a>
<a href="/students">Students</a>

Thursday, 23 March 2017

How to use routing feature in your application ?

AngularJS Route module is another JS file : angular-route.min.js
You can download and use JS file directly or use the CDN (Remote) link.

DOWNLOADED AND USE JS

You can download it from AngularJS 1x Home > Download > Browse additional modules

HTML
Assume you have all JS in a "scripts" directory in parallel

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Hello</title>
   <script src="scripts/angular.min.js" />
   <script src="scripts/angular-route.min.js" />
</head>
<body>
   ......
</body>
</html>

USE CDN LINK

Go to AngularJS 1x Home > Download > Copy CDN link
Edit the CDN URL to use angular-route.min.js instead of angular.min.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js

Use it directly in src attribute of script :