Javascript 安格拉斯。。。。无法插入视图。_Javascript_Html_Angularjs

Javascript 安格拉斯。。。。无法插入视图。

javascript html angularjs

Javascript 安格拉斯。。。。无法插入视图。,javascript,html,angularjs,Javascript,Html,Angularjs,第一篇关于stacko so的帖子会针对任何noob错误进行道歉我已经开始使用AngularJS学习一些web开发。我使用netbeans设置了一个空白项目，并向项目中添加了一些文件。结构如下所示：根公共网页应用程序控制器 homecontroller.js hydrotelcontroller.js css 字体 js angular-route.js angular-route.min.js app.js bootstrap.js bootstrap.min.js jquer

第一篇关于stacko so的帖子会针对任何noob错误进行道歉

我已经开始使用AngularJS学习一些web开发。我使用netbeans设置了一个空白项目，并向项目中添加了一些文件。结构如下所示：

根
- 公共网页
- 应用程序
  - 控制器 homecontroller.js hydrotelcontroller.js
  - css
  - 字体
  - js angular-route.js angular-route.min.js app.js bootstrap.js bootstrap.min.js jquery-2.2.0.js npm.js
  - 观点 Hydrotel.html home.html

我的网页在这一点上是非常基本的。我只想让它加载主屏幕，并使用home.html作为加载页面时注入的视图。我在标题中还有一个下拉列表，我希望能够选择hydrottel.html

<h2>This is my hydrotel page</h2>
<h3>{{ message }}</h3>

无论我尝试什么，视图都不起作用。。。。。我环顾四周，尝试了很多教程，但我被卡住了

my index.html

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" href="app/css/bootstrap.min.css" >
        <link rel="stylesheet" href="app/css/bootstrap.css" >
    </head>

    <!-- Define an angular controller -->
    <body ng-controller="homeController">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="navbar-header">
                <div class="container-fluid">
                    <ul class="nav">
                        <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Metering <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#/hydrotel">Hydrotel</a></li>
                                    <li><a href="#">WISKI</a></li>
                                </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div class="main">           
            <div ng-view></div>
        </div>


        <!-- Angular Declaration -->
        <script src="app/js/angular.min.js" type="text/javascript"></script>
        <!-- Include the AngularJS routing library -->        
        <script src="App/js/angular-route.min.js" type="text/javascript"></script>
        <!-- Jquery -->
        <script src="app/js/jquery-2.2.0.js" type="text/javascript"></script>

        <!-- Bootstrap js -->
        <script src="app/js/bootstrap.min.js" type="text/javascript"></script>

        <!-- Modules-->
        <script src="App/js/app.js" type="text/javascript"></script>
        <!-- Controllers -->
        <script src="App/controllers/homeController.js" type="text/javascript"></script>

    </body> 
</html>

my homecontroller.js

   //script.js
    //create the module and name it MetApp
    //create the controller and inject angular's $scope
    app.controller('homeController',['$scope',function($scope){
        //create a message to display in our view
        $scope.message = 'Everyone come see how good I look!';
    }]);

我的家.html

<!DOCTYPE html>
<div class="jumbotron text-center">
    <div class="container">
    <h1>My new home page</h1>
    <h2>{{ message }}</h2>
    </div>
</div>

my hydrotel.html

<h2>This is my hydrotel page</h2>
<h3>{{ message }}</h3>

这是我的hydrotel页面
{{message}}

非常感谢您在这方面提供的任何帮助以及撰写更好问题的技巧

欢呼声

这一声不容易辨认：）

所以问题只是键入了

templateurl

，而它应该是

templateurl

（在路由器中有两次）

我必须调整你的相对路径，使它在Plunker中工作

这里有工作

另一件现在对你没有影响（但仍然不好）的小事是：

您正在路由器中为视图指定控制器，因此不确定是否需要它

问题问得很好，提供了足够的信息。欢迎来到这里

浏览器控制台上显示任何错误消息？感谢您的快速响应。直接工作。。。。。现在应该知道区分大小写的重要性：-）。

<h2>This is my hydrotel page</h2>
<h3>{{ message }}</h3>

.when('/home',{
    templateUrl: 'home.html',
    controller: 'homeController'
 })