ng-view is not working in angularjs 1

Question

ng-view is not working in angularjs 1

93 Views Asked by Sangram Badi At 30 July 2018 at 06:48

i have angularjs 1 application.

i am trying to render htmls by using ngRoute. But in app.js app.config() method is not executing by which i am not getting html in ng-view. I am not getting any error also.

can anyone help me on this?

index.html

<head>
    <title>Apollo</title>
    <meta charset="utf-8" />
    <title>
        Testing
    </title>
    <meta name="description" content="Latest updates and statistic charts">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--begin::Web font -->
    <script src="public/lib/webfont.js"></script>
    <script>
        WebFont.load({
            google: { "families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"] },
            active: function () {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <link href="assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
    <link href="assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />

    <link href="public/css/custom.css" rel="stylesheet" type="text/css" />

    <script src="public/lib/angular.min.js"></script>
    <script src="public/lib/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="src/controllers/HtmlController.js"></script>
</head>

<body ng-app="fiveer" class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
    <!-- begin:: Page -->
    <div class="m-grid m-grid--hor m-grid--root m-page">
        <!-- BEGIN: Header -->

            <!-- content of html -->
            <div class="m-grid__item m-grid__item--fluid m-wrapper">
                <div class="m-content">
                    <div class="m-portlet m-portlet--space">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <div ng-view></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- end of content html -->
        </div>
        <div ng-include="'footer.html'"></div>
    </div>

    <div id="m_scroll_top" class="m-scroll-top">
        <i class="la la-arrow-up"></i>
    </div>

    <script src="assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
    <script src="assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
</body>

app.js

"use strict";
var app = angular.module("fiveer", ['ngRoute']);

app.config(function($routeProvider, $locationProvider) {
    alert('Hii');
    $routeProvider
        .when('/', {
            templateUrl: 'dashboard.html',
            controller: 'HtmlController'
        })

        .when('/html1', {
            templateUrl: 'src/views/html1.html',
            controller: 'HtmlController'
        })

        .when('/html2', {
            templateUrl: 'src/views/html2.html',
            controller: 'HtmlController'
        })

        otherwise({redirectTo: '/'});

        $locationProvider.hashPrefix('');
});

HtmlController.js

"use strict";
var app = angular.module("fiveer", []);

app.controller('HtmlController', ['$scope', function($scope) {
    alert('Hii');
}]);

Project structre

Original Q&A

There are 3 best solutions below

**Sajeetharan** · Answer 1 · 2018-07-30T06:49:30.843000

You are instantiating the module again in the controller. Remove it

"use strict";
var app = angular.module("fiveer", []); //not necessary here

your HomteCOntroller.js should look like,

HtmlController.js

app.controller('HtmlController', ['$scope', function($scope) {
    alert('Hii');
}]);

**Rahul Sharma** · Answer 2 · 2018-07-30T07:32:19.880000

Rahul Sharma On 30 July 2018 at 07:32

Remove [] from angular.module in controller.

"use strict";
var app = angular.module("fiveer");

app.controller('HtmlController', ['$scope', function ($scope) {
    alert('Hii');
}]);

**paresh** · Answer 3 · 2018-07-30T08:37:23.983000

Check angular and angular-route version.

Change your file name always follow camlecase.

   <script src="src/controllers/htmlController.js"></script>

Always use controller name in camlecsae. Your controller is not getting initialize.

app.controller('htmlController', ['$scope', function($scope) {
alert('Hii');
}]);

You havent initialize ng-controller in application.

 <head>
  <title>Apollo</title>
  <meta charset="utf-8" />
  <title>
    Testing
 </title>
<meta name="description" content="Latest updates and statistic charts">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--begin::Web font -->
<script src="public/lib/webfont.js"></script>
<script>
    WebFont.load({
        google: { "families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"] },
        active: function () {
            sessionStorage.fonts = true;
        }
    });
</script>

<link href="assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
<link href="assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />

<link href="public/css/custom.css" rel="stylesheet" type="text/css" />

<script src="public/lib/angular.min.js"></script>
<script src="public/lib/angular-route.js"></script>
<script src="app.js"></script>
<script src="src/controllers/htmlController.js"></script>
</head>

<body ng-app="fiveer" class="m-page--fluid m--skin- m-content--skin-light2 m-header-- 
 fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside- 
 left- 
-o ffcanvas m-footer--push m-aside--offcanvas-default">
 <!-- begin:: Page -->
 <div ng-controller="htmlController" class="m-grid m-grid--hor m-grid--root m-page">
     <!-- BEGIN: Header -->

        <!-- content of html -->
        <div class="m-grid__item m-grid__item--fluid m-wrapper">
            <div class="m-content">
                <div class="m-portlet m-portlet--space">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <div ng-view></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- end of content html -->
    </div>
    <div ng-include="'footer.html'"></div>
   </div>

  <div id="m_scroll_top" class="m-scroll-top">
     <i class="la la-arrow-up"></i>
   </div>

 <script src="assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
  <script src="assets/demo/default/base/scripts.bundle.js" type="text/javascript">

ng-view is not working in angularjs 1

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in NGROUTE

Related Questions in ANGULARJS-NG-ROUTE

Trending Questions

Popular # Hahtags

Popular Questions