Question

简单的角度ui示例不起作用。控制台中没有错误。

以下是示例：

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Home</title>
        </head>

        <script>
            window.onload = function ()
            {
                var myApp = angular.module('myApp', ['ui.router']);

                myApp.controller('MainCtrl', function ($scope) {
                });

                myApp.config(function ($stateProvider, $urlRouterProvider) {

                    // default route
                    $urlRouterProvider.otherwise("/first");

                    // ui router states
                    $stateProvider
                            .state('first', {
                                url: "/first",
                                views: {
                                    header: {
                                        template: '<h1>First header</h1>',
                                        controller: function ($scope) {
                                        }
                                    },
                                    content: {
                                        template: '<p>First content</>',
                                        controller: function ($scope) {
                                        }
                                    },
                                    footer: {
                                        template: '<div>First footer</div>',
                                        controller: function ($scope) {
                                        }
                                    }
                                }
                            });
                });
            }
        </script>
        <body ng-controller="MainCtrl">
            <ul>
                <li><a href="#" ui-sref="first">First</a></li>
                <li><a href="#" ui-sref="second">Second</a></li>
            </ul>    

            <div ui-view="header"></div>
            <div ui-view="content"></div>
            <div ui-view="footer"></div>

            <!-- Bootstrap core JavaScript + Angular Js
      ================================================== -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>   
        </body>
    </html>

我已经使用外部cdn包含了所有资源。不显示以角度写入的模板内容。我正确地做到了吗？

以下是plunker：Plunker

Answer 1

您尚未在视图中的任何位置提及应用名称。

<html lang="en" ng-app="myApp">

这是工作Plunker

Answer 2

删除window.onload。确保在脚本之前加载angular和ui-router脚本。并将缺少的ng-app="myApp"添加到html元素。

Plunkr：http://plnkr.co/edit/XaR3KD2hJ1jOVZ2mWi5H?p=preview

无法使用角度ui显示内容

2 个答案: