CODEWITHSUNDEEP
angularjsroutes
Atom
Atom

Reputation: 441

partials aren't loading angularjs

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>

Upvotes: 0

Views: 33

Answers (2)

Mike Feltman
Mike Feltman

Reputation: 5176

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.

  1. You need to set Html5Mode, which means you need to inject $locationProvider into your config and then issue:

    $locationProvider.html5Mode(true)

  2. You should set the base href in the <head> section of your index.html with:

    <base href="/" >

  3. You might also want to try ng-href instead of href on your links.

Upvotes: 0

Atom
Atom

Reputation: 441

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

$locationProvider.hashPrefix('');

Upvotes: 1

Related Questions