0

当我触发 ng-route 时，控制器负载出现问题。这是我的主页：

    <!DOCTYPE html>
    <html>
    <head ng-app="testapp">
        <script type="text/javascript" src="angular.js"></script>
        <script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
            <title>XX</title>
    </head>
    <body>
        <nav ng-controller="defaultnav"></nav>
        <div ng-view></div>
    </body>
    </html>

这是我的 app.js 文件：

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

app.config(function ($routeProvider) {
            $routeProvider.
                when("/", {
                    templateUrl: "index.html"
                })
                .when("/page1", {
                    templateUrl: "page1.html"
                })
        })

在 page1.html 中，我像这样启动控制器：

<div ng-controller="page1">

</div>

<script type="text/javascript">
    app.controller('page1', function ($scope) {
        // code...
    })
</script>

我不知道处理这个问题的最佳实践。当我对此进行编码时，我收到 [Error, ctrlreg] 错误，它表示我在注册控制器时遇到问题。请给我建议来解决这个问题。提前致谢。

4

1 回答 1

1
  1. 在 JS 中，一行中的应用名称var app = angular.module('enterprise', ['ngRoute']);是enterprise
  2. 在 HTML 中<head ng-app="testapp">，应用名称是testapp。改成<head ng-app="enterprise">
  3. 最好的做法是单独加载 java 脚本。所以从html中删除js代码并将其保存在单独的文件中并加载它

单击此处查看 plnkr 中的工作演示。

您可以使用 AngularJS ngRoute：

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider

  // route for the home page
    .when('/home', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('/about', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })

  // route for the contact page
  .when('/contact', {
    templateUrl: 'pages/contact.html',
    controller: 'contactController'
  })

  //otherwise redirect to home
  .otherwise({
    redirectTo: "/home"
  });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!!!!';
});

scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us!.';
});
于 2018-03-04T08:57:48.240 回答