Angularjs 无法使用angular ui显示内容_Angularjs

Angularjs 无法使用angular ui显示内容

angularjs

Angularjs 无法使用angular ui显示内容,angularjs,Angularjs,简单的角度ui示例不起作用。控制台中没有错误以下是一个例子： <!DOCTYPE html> <html lang="en"> <head> <title>Home</title> </head> <script> window.onload = function () {

简单的角度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>


家
window.onload=函数（）
{
var myApp=angular.module（'myApp'，['ui.router']）；
myApp.controller（'MainCtrl'，函数（$scope）{
});
myApp.config（函数（$stateProvider，$urlRouterProvider）{
//默认路由
$urlRouterProvider。否则（“/first”）；
//用户界面路由器状态
$stateProvider
.州（'第一'{
url:“/first”，
观点：{
标题：{
模板：“第一个标题”，
控制器：功能（$scope）{
}
},
内容：{
模板：“第一个内容”，
控制器：功能（$scope）{
}
},
页脚：{
模板：“第一个页脚”，
控制器：功能（$scope）{
}
}
}
});
});
}

我已经包含了使用外部cdn的所有资源。不显示以角度书写的模板内容。我做得对吗

下面是提示：

您在视图中的任何位置都没有提到应用程序名称

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

这是正在工作的

删除

窗口。onload

。确保在脚本之前加载angular和ui路由器脚本。并将缺少的

ng app=“myApp”

添加到html元素中

Plunkr:

与我的答案有什么不同？除了一些解释外，没有什么不同。你为什么认为应该有所不同？修复OP代码的方法不多。我们只是同时写了我们的答案。我想说“同时”我使用ui路由器只是使用angluar加载公共页眉和页脚。我不确定这是正确的方法？？当然，页眉会根据登录状态进行登录/注销。我只使用ui路由器使用angluar加载公共页眉和页脚。我不确定这是正确的方法？？当然，根据登录状态，标题将具有登录/注销