Question

关于stacko的第一篇文章，所以对任何noob错误都有所了解。

我已经开始使用AngularJS来学习一些Web开发。我使用netbeans设置了一个空白项目，并将一些文件添加到我的项目中。结构看起来像：

根
- 的public_html
- 应用
  - 控制器 homecontroller.js hydrotelcontroller.js
  - CSS
  - 字体
  - JS 角route.js 角route.min.js app.js bootstrap.js bootstrap.min.js jQuery的2.2.0.js npm.js
  - 观 Hydrotel.html home.html的

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

无论我尝试什么，这些观点都不起作用.....我已经环顾四周并尝试了一些教程，但我卡住了。

我的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>

我的app.js

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

app.config(['$routeProvider',
        function ($routeProvider){
    $routeProvider
            .when('/home',{
                templateurl: 'app/views/home.html',
                controller: 'homeController'
    })
            .when('/hydrotel', {
                templateurl: 'app/views/hydrotel.html',
                controller: 'hydrotelController'
            })
            .otherwise({
                redirectTo: '/home'
    });
}]);

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!';
    }]);

my home.html

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

我的hydrotelcontroller.js

app.controller('hydrotelContoller',['$scope',function($scope){
    //create a message to display in our view
    $scope.message = 'This is my hydrotel controller';
}]);

我的hydrotel.html

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

非常感谢任何有关此问题的帮助以及撰写更好问题的提示。

干杯

Answer 1

这一点并不容易发现:)

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

所以问题只是错字templateurl，而它应该是templateUrl（你在路由器中有两次）

我不得不调整你的相对路径，让它在Plunker中工作。

这是有效的Plunker

另一个小问题，现在不影响你（但仍然不好）是：

<body ng-controller="homeController">

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

P.S。问题很好，提供了足够的信息。欢迎来到Angular！

AngularJS ....无法注入视图。

1 个答案: