Understanding Partials In AngularJS -Tutorial Savvy

"PARTIALS" are Similar to a Angular template.The only difference is there they can be a part of a template.

In this Demo, "We Will create a partial template for Student Which will have table rows displaying details of each student.This Student Table will be rendered when a button will be clicked".

I believe you have checked my previous post to get set up a basic Angular JS project.So In this Demo I will start from that point where a Basic AngularJS project is integrated with Angular BootStrap UI.
The project structure will look like,

Before Going in Details Let's Discuss some inbuilt angular Directives,

ng-repeat : This is similar to a for each loop which is capable of iterating object present inside an Array.Here in AngularJS template We can use this directive to iterate and construct an array of elements in UI.

ng-view:This directive is the key for AngularJS partial rendering.It is responsible for displaying content of a partial.

In This Demo We are doing following steps:-

step1: A BUTTON is created inside the scope of "StudentController".

step2: a ng-view directive element is created inside the scope of "StudentController".

step3:BUTTON is linked to CLICK event through ng-click directive Which is tied up with a method/function 'showStudentTable' inside the scope of "StudentController".

step4: 'showStudentTable' on trigger get the current URL through $location global angular variable and changes its path with an appending string ''studentsList".

step5: In app.js the application router checks the path and matches with the supplied condition and founds a match which suggest the PARTIAL file .

step6: After this this the PARTIAL file is compiled and the values of student list array is replaced and send backs to browser which get linked and render in the ng-view space.

The partial file studentListPartial.html content is as below,

<table class="table">
    <thead>
        <tr>
            <th>NAME</th>
            <th>ROLL</th>
            <th>SUBJECT</th>
            <th>MARK</th>
            <th>AGE</th>
            <th>COUNTRY</th>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="aStudent in studentList">
            <td>{{aStudent.name }}</td>
            <td>{{aStudent.roll }}</td>
            <td>{{aStudent.subject }}</td>
            <td>{{aStudent.mark }}</td>
            <td>{{aStudent.age }}</td>
            <td>{{aStudent.country }}</td>
        </tr>
    </tbody>
</table>

The index.html file contents are as below,

<!doctype html>
<html lang="en" ng-app="studentDetailApp">

    <head>
        <title>Student Details App</title>
        <link rel="stylesheet" href="css/bootstrap-combined.min.css"/>
        <link rel="stylesheet" href="css/app.css"/>
    </head>

    <body class="student-container">

    <div class="row-fluid" ng-controller="StudentController">
        <button class='btn btn-info' ng-click="showStudentTable('/studentsList')">Show Student Table</button>
        <div ng-view="studenttable"></div>
    </div>


    <!--Required JS Files List :start -->
    <script src="lib/angular/angular.js"></script>
    <script src="lib/bootstrap/ui-bootstrap-tpls-0.5.0.min.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
    <!--Required JS Files List :end -->
    </body>
</html>

The controller.js file contents,

'use strict';

/* Controllers Module for studentDetailApp application*/
var studentControllerModule = angular.module('studentDetailApp.controllers', ['ui.bootstrap']);

/*StudentController: controller for  students*/
studentControllerModule.controller('StudentController', function ($rootScope, $scope, $location, $routeParams) {

    $scope.studentList = [
        {name: "Sandeep", roll: 4, subject: 'Mathematics', mark: 25, age: 23, country: 'India'},
        {name: "Hari", roll: 5, subject: 'Geograph', mark: 35, age: 23, country: 'India'},
        {name: "Ram", roll: 3, subject: 'History ', mark: 45, age: 23, country: 'India'},
        {name: "John", roll: 2, subject: 'Mathematics', mark: 15, age: 25, country: 'UK'},
        {name: "Jim", roll: 1, subject: 'Mathematics', mark: 33, age: 23, country: 'UK'},
        {name: "Kelly", roll: 6, subject: 'Mathematics', mark: 23, age: 23, country: 'US'}
    ];

    $scope.showStudentTable = function(pathurl){

        console.log(pathurl)
        $location.path(pathurl)
    }

});

Finally We have app.js file which have all the routing information,

'use strict';

angular.module('studentDetailApp', ['studentDetailApp.controllers']).

  config(['$routeProvider', function($routeProvider,StudentController) {

    $routeProvider.when('/studentsList', {templateUrl: 'partials/studentListPartial.html', controller: 'StudentController'});

    $routeProvider.otherwise({redirectTo: '/'});

  }]);