CODEWITHSUNDEEP
angularjsngroute
Wannabe
Wannabe

Reputation: 596

Initial page not showing in angular

I am trying to learn angular. Can someone tell me why home.html does not show on my angular app? I have all required angular files included. No error happens when I start the app, just a blank screen. The jquery, bootstrap, and fontawesome were previously working, so no issues there. I can add a debugger statement and see that app.js is called, but home view does not show.

Folder Structure in my solution:

Root:

/index.html

/home.html

App Folder:

app/angular-route.js

app/app.js

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Learning Angular</title>

    <link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="libs/fontawesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <script src="libs/angular/angular.min.js"></script>
    <script src="app/angular-route.js"></script>
    <script src="app/app.js"></script>
</head>

<body ng-app="myApp">
    <div class="container">
        <div ng-view></div>
    </div> <!-- /container -->
</body>

    <script src="libs/jquery/jquery-2.1.4.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>

</html>

home.html

<p>
    Welcome to Home {{user.firstName}}
</p>

<div class="row">
    <div class="col-md-6">
        <form class="registrationForm">
            <h2 class="form-signin-heading faArrowIcon">Please sign in</h2>
            <label for="inputEmail">Email address</label>
            <input type="email" id="inputEmail" class="form-control validateIt" placeholder="Email address" required autofocus>
            <label for="inputPassword">Password</label>
            <input type="password" id="inputPassword" class="form-control validateIt" placeholder="Password" required>
            <div style="padding: 0; margin: 0;" class="col-md-3 pull-right">
                <button id="submitButton" class="btn btn-lg btn-primary btn-block" type="submit" disabled>Sign in</button>
            </div>
        </form>
    </div>
</div>

app.js

var sampleApp = angular.module('myApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
      when('/AddNewOrder', {
        templateUrl: 'templates/add_order.html',
        controller: 'AddOrderController'
    }).
      when('/ShowOrders', {
        templateUrl: 'templates/show_orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/home.html'
      });
}]);

sampleApp.controller('AddOrderController', function($scope) {

    $scope.message = 'This is Add new order screen';
});

sampleApp.controller('ShowOrdersController', function($scope) {

    $scope.message = 'This is Show orders screen';
});

Upvotes: 1

Views: 4230

Answers (1)

Nitsan Baleli
Nitsan Baleli

Reputation: 5458

you need to specify a route for home and set it as your main route.

here's an example:

app.config(function($routeProvider) {
  $routeProvider.
  when('/', {
    templateUrl: 'home.html',
  }).
  when('/route2', {
    templateUrl: 'route2.html',
  }).
  otherwise({
    redirectTo: '/'
  });
});

index.html

<body ng-controller="MainCtrl">
  <div>
    <a href="#/home">home</a>
    <a href="#/route2">route2</a>
  </div>
  <div ng-view></div>
</body>

and a working plnkr

Upvotes: 2

Related Questions