locked
Data not shown in ng-view of angular js? RRS feed

  • Question

  • User-1026236167 posted

    i have new in angular js my data not shown in <ng-view> in index page which thing is missing please execute them?

    index page of angular js

    <!DOCTYPE html>
    <html data-ng-app="demo">
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <link href="StyleSheet1.css" rel="stylesheet" />
    <script src="Scripts/script.js"></script>

    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>-->
    </head>
    <body>
    <table style="font-family: Arial">
    <tr>
    <td colspan="2" class="header">
    <h1>
    WebSite Header
    </h1>
    </td>
    </tr>
    <tr>
    <td class="leftMenu">
    <a href="#/home">Home</a>

    </td>
    <td class="mainContent">
    <ng-view></ng-view>
    </td>
    </tr>
    <tr>
    <td colspan="2" class="footer">
    <b>Website Footer</b>
    </td>
    </tr>
    </table>

    </body>
    </html>

    script page of angular js

    var app = angular.module("demo", ["ngRoute"])
    .config(function ($routeProvider) {
    $routeProvider
    .when("/home", {
    templateUrl: "Templates/home.html",
    controller:"homeController"


    })

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

    })

    home page content of angular js

    {{message}}
    <div>
    this is new
    </div>

    stylesheet of angular js

    .header {
    width: 800px;
    height: 80px;
    text-align: center;
    background-color: #BDBDBD;
    }

    .footer {
    background-color: #BDBDBD;
    text-align: center;
    }

    .leftMenu {
    height: 500px;
    background-color: #D8D8D8;
    width: 150px;
    }

    .mainContent {
    height: 500px;
    background-color: #E6E6E6;
    width: 650px;
    }

    a {
    display: block;
    padding: 5px
    }

    Friday, May 29, 2020 6:10 AM

Answers

  • User-719153870 posted

    Hi prabhjot1313,

    <a href="#/home">Home</a>

    It should be "!" instead of "/" in the href, please check AngularJS Routing for more information.

    Below is a demo build based on your code:

    index.html:

    <!DOCTYPE html>
    <html data-ng-app="demo">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
        <script>
            var app = angular.module("demo", ["ngRoute"])
                .config(function ($routeProvider) {
                    $routeProvider
                        .when("/home", {
                            templateUrl: "home.html",
                            controller: "homeController"
                        })
                })
                .controller("homeController", function ($scope) {
                    $scope.message = "Home page";
    
                })
        </script>
        <style>
            .header {
                width: 800px;
                height: 80px;
                text-align: center;
                background-color: #BDBDBD;
            }
    
            .footer {
                background-color: #BDBDBD;
                text-align: center;
            }
    
            .leftMenu {
                height: 500px;
                background-color: #D8D8D8;
                width: 150px;
            }
    
            .mainContent {
                height: 500px;
                background-color: #E6E6E6;
                width: 650px;
            }
    
            a {
                display: block;
                padding: 5px
            }
        </style>
    </head>
    <body>
        <table style="font-family:Arial">
            <tr>
                <td colspan="2" class="header">
                    <h1>
                        WebSite Header
                    </h1>
                </td>
            </tr>
            <tr>
                <td class="leftMenu">
                    <a href="#!home">Home</a>
    
                </td>
                <td class="mainContent">
                    <ng-view></ng-view>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="footer">
                    <b>Website Footer</b>
                </td>
            </tr>
        </table>
    </body>
    </html>

    Here's the result of this demo:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 1, 2020 5:21 AM