Angular UI-路由器未将模板插入到 ng-view 元素中

Question

我正在尝试使用 angular UI-路由器构建一个非常简单的应用程序。

我的 index.html 文件：

<!DOCTYPE html>
<html ng-app="elara">
<head>
<script type="text/javascript" src="/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/ctrl/indexCtrl.js"></script>
<script type="text/javascript" src="/js/ctrl/registerCtrl.js"></script>
</head>
<body>
    <ng-view>   </ng-view>
</body>
</html>

app.js 文件

angular.module('elara', ['ui.router'])

.run(
    ['$rootScope', '$state', '$stateParams',
        function($rootScope, $state, $stateParams) {

            // It's very handy to add references to $state and $stateParams to the $rootScope
            // so that you can access them from any scope within your applications.For example,
            // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
            // to active whenever 'contacts.list' or one of its decendents is active.
            $rootScope.$state = $state;
            $rootScope.$stateParams = $stateParams;
        }
    ]
)

.config(
    ['$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider

            .state('home', {
                url: '/',
                templateUrl: '/tmpl/index.html',
                controller: 'indexCtrl'
            })

            .state('register', {
                url: '/register',
                templateUrl: '/tmpl/register/register.tmpl.html',
                controller: 'registerCtrl'
            })
        }
    ]);

indexCtrl.js 文件

app = angular.module('elara', []);

app.controller('indexCtrl', ['$scope', function($scope){
    $scope.message = "index"
}])

和registerCtrl.js是一样的。只是控制器名称和消息不同。

在我的 x.tmpl.html 文件中，我只想写入消息变量。

{{message}}

问题是，当我导航到 url / 或 #/register 时，我总是看到空白页面。消息变量不在页面中或我的模板 html 未加载。

控制台也没有错误。

Answer 1

各州的目标是 ui-view

// <ng-view>   </ng-view>
<div ui-view=""></div>

以防万一，我们使用命名 views : {'myName': { ... } } 我们提供这样的名称

<div ui-view="myName"></div>

Angular UI-路由器未将模板插入到 ng-view 元素中

Angular UI-Router is not inserting templates into ng-view element

state

view

angularjs

angular-ui-router