partials aren't loading angularjs

Question

please tell me why it isn't loading partials. I'm trying to do routing and inserting a partial templates into the layout HTML page when you click on a specific hyperlink such as Home, about or contact. I checked in every line of code and I didn't find the source of problem for not loading partials. Routes are doing fine, it just isn't loading. Here's my code:

index.html

<html ng-app="streamApp">
    <head>
        <meta charset="utf-8">
        <!-- To ensure proper rendering and touch zooming -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>StreamTest App</title>
        <!-- load bootstrap and fontawesome -->
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="styles/style.css"/>
    </head>
    <body ng-app="streamApp" ng-controller="MainController">

    <div id="main">

        <!-- including header -->
        <div ng-include="'views/templates/header.html'"></div>

        <!-- this is where content will be injected -->
        <div id="container" style="margin-top: 50px;">
            <ng-view></ng-view>
        </div>

        <!-- including footer -->
        <div ng-include="'views/templates/footer.html'"></div>

    </div>

    </body>
    <!-- Scripts -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="node_modules/angular-route/angular-route.min.js"></script>
    <script src="app.js"></script>
    <!-- Scripts End -->
</html>

app.js

// create the module named streamapp and include ngRoute for routing needs
var streamApp = angular.module('streamApp',['ngRoute']);

//configure app's routes
streamApp.config(['$routeProvider',function ($routeProvider) {
   $routeProvider
       //route for the home page
       .when('/home', {
           templateURL : 'views/partials/home.html',
           controller  : 'MainController'
       })
       //route for the about page
       .when('/about', {
           templateURL : 'views/partials/about.html',
           controller  : 'aboutController'
       })
       //route for the contact page
       .when('/contact', {
           templateURL : 'views/partials/contact.html',
           controller  : 'contactController'
       })
       .otherwise({
           redirectTo: '/home'
       });
}]);
// create the controller and inject Angular's $scope
streamApp.controller("MainController", function ($scope) {
    // create a message to display in our view
    $scope.home="Welcome Home!";
});
streamApp.controller("aboutController", function ($scope) {
    // create a message to display in our view
    $scope.about="Wanna hear about us! Here you are :)";
});
streamApp.controller("contactController", function ($scope) {
    // create a message to display in our view
    $scope.contact="Don't be shy to contact us!";
});

header.html

<header>
    <nav class="navbar navbar-default">
     <div class="container">
         <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="#home">StreamTEST</a>
            </div>

             <ul class="nav navbar-nav navbar-right">
                 <li><a href="#home"><i class="fa fa-home"></i> Home</a></li>
                 <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                 <li><a href="#contact"><i class="fa fa-envelope"></i> Contact</a></li>
             </ul>
         </div>
     </div>
    </nav>
</header>

home.html

<div class="jumbotron text-center">
    <h1>Home Page</h1>

    <p>{{ home }}</p>
</div>

about.html

<div class="jumbotron text-center">
    <h1>About Page</h1>

    <p>{{ about }}</p>
</div>

contact.html

<div class="jumbotron text-center">
    <h1>Contact Page</h1>

    <p>{{ contact }}</p>
</div>

Atom · Accepted Answer · 2018-01-01 13:19:21Z

1

I had changed the default hash-prefix from '!' to empty string '' in app.js cause I'm using angularjs 1.6

$locationProvider.hashPrefix('');

answered Jan 1, 2018 at 13:19

Atom

4412 gold badges6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr Lister · Accepted Answer · 2018-01-01 14:43:40Z

0

Remove ng-app from your body element. You already have it on the outer html element.

I use ui-router instead of ngRoute, but they are very similar. A couple of things.

You need to set Html5Mode, which means you need to inject $locationProvider into your config and then issue:
```
$locationProvider.html5Mode(true)
```
You should set the base href in the <head> section of your index.html with:
```
<base href="/" >
```
You might also want to try ng-href instead of href on your links.

edited Jan 1, 2018 at 14:43

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Dec 29, 2017 at 22:36

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

1 Comment

Atom Over a year ago

Okey, but it the result is the same. Do you have any idea if it might help. Thank you!

Collectives™ on Stack Overflow

partials aren't loading angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related