AngularJS - Part 7

Before continuing this, please refer AngularJS - Part 6

AngularJS – Internalization

AngularJS supports inbuilt internationalization for three types of filters currency, date and numbers. We only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.

AngularJS - Views

AngularJS supports Single Page Application via multiple views on a single page. To do this AngularJS has provided ng-view and ng-template directives and $routeProvider services.

 

ng-view

ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.

Usage

Define a div with ng-view within the main module.

<div ng-app = "mainApp">

   ...

   <div ng-view></div>

</div>    

 

ng-template

ng-template directive is used to create an html view using script tag. It contains "id" attribute which is used by $routeProvider to map a view with a controller.

Usage

Define a script block with type as ng-template within the main module.

<div ng-app = "mainApp">

   ... 

   <script type = "text/ng-template" id = "addStudent.htm">

      <h2> Add Student </h2>

      {{message}}

   </script>

</div>    

 

$routeProvider

$routeProvider is the key service which set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same.

Usage

Define a script block with type as ng-template within the main module.

<div ng-app = "mainApp">

   ...      

   <script type = "text/ng-template" id = "addStudent.htm">

      <h2> Add Student </h2>

      {{message}}

   </script>

</div>    

Usage

Define a script block with main module and set the routing configuration.

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

mainApp.config(['$routeProvider', function($routeProvider) {

   $routeProvider.

   when('/addStudent', {

      templateUrl: 'addStudent.htm', controller: 'AddStudentController'

   }).

   when('/viewStudents', {

      templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController'

   }).

   otherwise({

      redirectTo: '/addStudent'

   });

}]);

Following are the important points to be considered in above example.

• $routeProvider is defined as a function under config of mainApp module using key as '$routeProvider'.
• $routeProvider.when defines a url "/addStudent" which then is mapped to "addStudent.htm". addStudent.htm should be present in the same path as main html page.If htm page is not defined then ng-template to be used with id="addStudent.htm". We've used ng-template.
• "otherwise" is used to set the default view.
• "controller" is used to set the corresponding controller for the view.

AngularJS – Ajax

AngularJS provides $http control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner −

function studentController($scope,$http) {

var url = "data.txt";

   $http.get(url).success( function(response) {

      $scope.students = response; 

   });

}

<<Angular JS -Part 6