Angular template not loading / routes

Question

I'm learning angular and i'm having an issue with displaying my partial. It's probably something trivial that i forgot but i can't seem to find it.

index.html

    <!DOCTYPE html>
    <html ng-app="myTool">
     <head>
     <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>
      <script type="text/javascript" src="app.js"></script>
     <script type="text/javascript" src="tool-controller.js"></script>
     </head>

    <body>
    <div class="container">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#"><img alt="myTool" src="/templogo.png"></a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            <li><a ng-href="#/dashboard">DashBoard</a></li>
            <li><a ng-href="#/new">New</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
            <li><a ng-href="#">Logout </a> </li>
            </ul>
          </div>
        </div>
      </nav>
    <div ng-view>
    </div>
    </div>

    </body>
    </html>

app.js

    angular.module('myTool',['ngRoute'])
    .config(function($routeProvider){
      $routeProvider.when('/new', {
       templateUrl: '/tool-new.html',
        controller:'ToolController',
        controllerAs: "tool"
      })
      .when('/dashboard', {
       templateUrl: '/empty.html'
      })
      .when('/', {
      templateUrl: '/index.html'
      })
      .otherwise({ redirectTo: '/' });
    });

tool-controller.js

    angular.module('myTool', [])
    .controller('ToolController',['$scope', function($scope) {
      $scope.list = [];
      $scope.tool = {};
      $scope.submit = function() {
              $scope.list.push(this.tool);
              $scope.succes = 'sent';
          };
      $scope.search = function() {
        };
    }]);

and my partial are in tool-new.html and empty.html.

I don't really see what i'm missing :

-index.html as layout with ng-view as placeholder for my partial

basic routes + fall back
my controller linked to my template
html files as my templates with random stuff inside.
im running everything on a local webserv

I've tried adding the controller as a dependency as written in the angulardoc , i've also tried specifically calling the templates in script tags in between my ng-show tags.

Thanks for the suggestions.

Answer 1

Try adding your views like this(just remove '/' at the beginning of the view name):

angular.module('myTool',['ngRoute'])
.config(function($routeProvider){
  $routeProvider.when('/new', {
   templateUrl: 'tool-new.html',
    controller:'ToolController',
    controllerAs: "tool"
  })
  .when('/dashboard', {
   templateUrl: 'empty.html'
  })
  .when('/', {
  templateUrl: 'index.html'
  })
  .otherwise({ redirectTo: '/' });
});

And also remove [] from tool-controller.js

angular.module('myTool')
.controller('ToolController',['$scope', function($scope) {
  $scope.list = [];
  $scope.tool = {};
  $scope.submit = function() {
          $scope.list.push(this.tool);
          $scope.succes = 'sent';
      };
  $scope.search = function() {
    };
}]);

Answer 2

您在 html 中缺少控制器的名称，即 toolController 也切换到您的文件的 javascript 命名约定，您将更容易编码。您在 html 中的实际代码应该有 ng-controller="toolController" 应该放置在您的 div 标签上以加载控制器。

Angular template not loading / routes

Question

2 answers

solution1
2 ACCPTED 2015-09-19 21:50:37

solution2
0 2015-09-19 21:50:56

Angular template not loading / routes

Question

2 answers

solution1 2 ACCPTED 2015-09-19 21:50:37

solution2 0 2015-09-19 21:50:56

solution1
2 ACCPTED 2015-09-19 21:50:37

solution2
0 2015-09-19 21:50:56