Question

我已经在这里看了几十个关于Angular路由的问题，但是还没有能够实现这一点。如果我忽视任何事情，我道歉。我一直在尝试使用Angularjs官方教程和种子库来获得一个简单的应用程序。此代码托管在Web服务器上，但为此，我将代码复制到Plunker here。代码也在下面 - 感谢您提供的任何见解。

的index.html

<!DOCTYPE html>
<html ng-app>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-route.js"></script>
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
    <script type="text/javascript" src="script3.js"></script>
  </head>

  <body>
    <header ng-include="'header.html'"></header>
    <div ng-view></div>
  </body>

</html>

home.html的

<div ng-controller='homeCtrl'>
    <h2>{{ location }}</h2>
    <p>This is the home page content.</p>
    <a href='#faq'>FAQ</a>
</div>

的faq.html

<div ng-controller='faqCtrl'>
    <h2>This is the FAQ.</h2>
    <p>{{ question }}</p>
</div>

SCRIPT1

angular.module('testApp', [
    'ngRoute',
    'home',
    'faq'
])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.otherwise('/');
}]);

SCRIPT2

angular.module('home', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl : 'home.html',
        controller : 'homeCtrl'
    });
}])

.controller('homeCtrl', [function ($scope) {
    $scope.location = 'USA';
}]);

Script3

angular.module('faq', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/faq', {
        templateUrl : 'faq.html',
        controller : 'faqCtrl'
    });
}])

.controller('faqCtrl', [function ($scope) {
    $scope.question = 'Who am I?';
}]);

Answer 1

您的应用中存在一些错别字/遗漏：

在index.html中，您错过了<html ng-app="testApp">中的应用名称：

.controller('homeCtrl', ['$scope', function ($scope) {

在你的家中＆＃34;和＆＃34; faq＆＃34;控制器，您需要使用correct syntax进行注射：

使用：

.controller('homeCtrl', [function ($scope) {

而不是：

ng-controller

最后，在home.html和faq.html中，根本不要使用@NotBlank private String var_name; @NotNull private Object result; public DataObject(String var_name, Object result) { this.var_name = var_name; this.result = result; } @JsonProperty @JsonSerialize(using = CustomSerializer.class) public String getName() { return var_name;} @JsonProperty @JsonSerialize(using = CustomSerializer.class) public void setName(Object var_name) { this.result = var_name;} @JsonProperty @JsonSerialize(using = CustomSerializer.class) public Object getResult() { return result;} @JsonProperty @JsonSerialize(using = CustomSerializer.class) public void setResult(Object result) { this.result = result;} public class CustomSerializer extends JsonSerializer<Object> { public void serialize(Object value, JsonGenerator jgen, SerializerProvider provider) throws IOException, JsonProcessingException { jgen.writeStartObject(); jgen.writeObjectField(***how can i insert var_name here***, value); jgen.writeEndObject(); } }。在路径定义中，您指定要用于每个路径的控制器。在模板内再次指定它将导致第二个控制器被实例化。

Plnkr

Angular 1.5.x路由不起作用

1 个答案: