ng-include directive example in Angularjs

ng-include directive example in Angularjs

Single Page Application concept is being widely used by developer. The concept of SPA has been explain here. The concept of SPA is to load and render content from different pages. HTML does not support embedding html pages within html page. However this is now possible by breakthrough of AngularJS. By use of ng-include directive, it is possible to load different html pages on html page. To understand about simple SPA example, one can refer to this post.

Let us see an example to understand better about how can we use ng-include.

Project Structure-

spa-project-structure

index.html

<!doctype html>
<html ng-app="myApp">
<head>
    <title>SPA</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <script type="text/ng-template" id="pages/bootstrap.html">
        <h1>Welcome to Bootstrap</h1>
        <h3>{{message}}</h3>
        <p ng-include="'views/bootstrap.html'"></p>
    </script>

    <script type="text/ng-template" id="pages/AngularJS.html">
        <h1>Welcome to AngularJS</h1>
        <h3>{{message}}</h3>
        <p ng-include="'views/AngularJS.html'"></p>
    </script>

    <script type="text/ng-template" id="pages/Code2Succeed.html">
        <h1>Welcome to Code2Succeed</h1>
        <h3>{{message}}</h3>
        <p ng-include="'views/code2succeed.html'"></p>
    </script>


    <!--Navigation definition-->
    <div class="well">
        <a class="btn btn-primary" href="#/">Home</a>
        <a class="btn btn-primary" href="#/bootstrap">bootstrap</a>
        <a class="btn btn-primary" href="#/AngularJS">AngularJS</a>
        <a class="btn btn-primary" href="#/Code2Succeed">Code2Succeed</a>
        <br /><br />
        <h4>Welcome to Single Page Application</h4>
        <p>Please click above buttons to navigate to different views</p>
        <div class="well" ng-view></div>
    </div>
    <script src="js/spaApp.js" type="text/javascript"></script>
</body>
</html>

spaApp.js

var app = angular.module('myApp', ['ngRoute']); //ngRoute dependency injection

app.config(function ($routeProvider) {
    $routeProvider.

    //The below will be loaded when url is at home page
        when('/bootstrap', {
            templateUrl: 'pages/bootstrap.html',
            controller: 'BootstrapController'
        })

        //The below will be loaded when url is changed to pageURL/AngularJS
    .when('/AngularJS', {
        templateUrl: 'pages/AngularJS.html',
        controller: 'AngularJSController'
    })

    //The below will be loaded when url is changed to pageURL/Code2Succeed
    .when('/Code2Succeed', {
        templateUrl: 'pages/Code2Succeed.html',
        controller: 'Code2SucceedController'
    })

    //If clicked on any other link from navigation which has not been handled here, will be directed to home page
    .otherwise({ redirectTo: '/' });
});


//Controller Definition

//HomeController which will be injected for home view
app.controller('BootstrapController', function ($scope) {
    $scope.message = 'Hello from HomeController';
});


//AngularJSController which will be injected for AngularJS view
app.controller('AngularJSController', function ($scope) {
    $scope.message = 'Hello from AngularJSController';
});


//Code2SucceedController which will be injected for Code2Succeed view
app.controller('Code2SucceedController', function ($scope) {
    $scope.message = 'Hello from Code2SucceedController';
});

views/bootstrap.html

<html>
<head>
    <title>
        Bootstrap
    </title>
</head>
<body>
    <h5 class="info">The content on this page is being fetched from home.html</h5>
</body>
</html>

view/angularJS.html

<html>
<head>
    <title>
        AngularJS
    </title>
</head>
<body>
    <h5>The content on this page is being fetched from AngularJS.html</h5>
</body>
</html>

views/code2succeed.html

<html>
<head>
    <title>
        Code2Succeed
    </title>
</head>
<body>
    <h5>The content on this page is being fetched from code2succeed.html</h5>
</body>
</html>

Output

http://localhost:60483/index.html#/

index

http://localhost:60483/index.html#/bootstrap

bootstrap

http://localhost:60483/index.html#/AngularJS

angularjs

http://localhost:60483/index.html#/Code2Succeed

code2succeed

We can clearly see how the different pages are being loaded on single index.html page.

Leave a Reply

Your email address will not be published. Required fields are marked *