Question

我仍然是Angular的初学者，我的问题在于角度路由，在任何情况下我都无法调出ng-view。出于测试目的，所有文件都在同一文件夹中，控制器包含在admin.module.js

中

 **Index.html**     
            <!DOCTYPE html>
                <html ng-app="myApp">
                <link rel="stylesheet" src="/css/style.css">
                    <script src="/libs/angular/angular.js"></script>
                    <script src="/libs/angular-route/angular-route.js"></script>
                    <script src="admin.module.js"></script>
                    </script>
                <body>
                <div ng-view></div>
                </body>

  **admin.module.js**

            (function () {
            "use strict";

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

            app.config(function ($routeProvider) {
                $routeProvider
                    .when('/test', {
                        templateUrl: 'test.html',
                        controller: 'AppCtrl'
                    })
                    .otherwise({
                        redirectTo: '/'
                    });
            });

            app.controller("AppCtrl", function ($scope) {
                $scope.message = 'hello from the other side';
            });
        }());

    **test.html**

        <h1>{{message}}</h1>
    <p>Some text</p>

指向plunker的链接。

我没有任何控制台错误，所有文件都加载了。

Answer 1

我在你的plunker中发现了3个错误：

您使用了角度2和角度1语法
有redirectTo：'/'但你只有/ test route
没有ng-app指令

请参阅固定的plunker：http://plnkr.co/edit/Nki3Djk4adihx31HABUi?p=preview

(function () {
    "use strict";

    var app = angular.module("myApp", ["ngRoute"]);

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/test', {
                templateUrl: 'test.html',
                controller: 'AppCtrl'
            })
            .otherwise({
                redirectTo: '/test'
            });
    });

    app.controller("AppCtrl", function ($scope) {
        $scope.message = 'hello from the other side';
    });
}());

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <ng-view></ng-view>
  </body>

</html>

基本角度路由不起作用

1 个答案: