Javascript 角度模板未加载/布线_Javascript_Html_Angularjs

Javascript 角度模板未加载/布线

javascript html angularjs

Javascript 角度模板未加载/布线,javascript,html,angularjs,Javascript,Html,Angularjs,我正在学习angular，但我在显示我的部分内容时遇到了问题。这可能是我忘记的一些小事，但我似乎找不到它 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/boot

我正在学习angular，但我在显示我的部分内容时遇到了问题。这可能是我忘记的一些小事，但我似乎找不到它

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>

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() {
        };
    }]);

我的部分代码在tool-new.html和empty.html中

我真的不知道我错过了什么：

-index.html作为布局，ng view作为我的局部视图的占位符

基本路线+后退
我的控制器链接到我的模板
html文件作为我的模板，里面有随机的东西
我在本地的网络服务器上运行一切

我已经尝试将控制器添加为angulardoc中编写的依赖项，我还尝试在我的ng show标记之间的脚本标记中专门调用模板

谢谢你的建议

尝试这样添加视图（只需删除视图名称开头的“/”）：

并从工具控制器.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() { }; }]);

html中缺少控制器的名称，即toolController也会切换到文件的javascript命名约定，这将使您更容易编码。html中的实际代码应具有ng controller=“toolController”加载控制器时，应将其放在div标签上。
文件index.html和empty.html是否在任何文件夹中？因为前面有一个斜杠的
templateUrl:'/empty.html'
。另外，请检查您的控制台以查看是否有任何错误，您可以尝试
目前所有内容都在同一个文件夹中，我已尝试了/“empty”和“empty”，但它不起作用：（.我在控制台中没有错误它在那里，在我的new.html中：
它在那里不起作用为了加载部分你必须告诉html哪个控制器有你的ng内容查看你的body标签或索引中的div标签。html必须包含ng控制器才能加载tool-new.htmlMan，请查看我的更新答案。它起作用了！请检查我的t回答我。好的，谢谢你，伙计。我已经移除了[]它修复了它。你能解释一下为什么吗？它重置了我的依赖关系吗？我在一个教程中看到，我认为保留它为空是一种惯例。你只需要声明一次依赖关系。在app.js的开头，我个人建议你做一些类似var app=angular.module（'myTool'，['ngRoute'）的事情；…//在另一个文件app.controller（…）中
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: '/' }); });

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() { }; }]);