使用 UI-View 将 Angular 应用程序链接到索引后.html无法获取 HTML 视图

我的HTML页面没有通过index.html中使用的ui-view进行路由。然而我在控制器中定义了所有声明。我在控制器中使用了$stateProvider来进入特定的 HTML。这是显示"....索引.html#/welcome"，但页面中未显示任何内容。请帮助我摆脱这种情况。

索引.html

<!doctype html>
    <html>
        <head>
            <link    rel="stylesheet" href="bower_components/font-awesome-
 4.7.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="lib/angular-loading-bar/loading-
 bar.css">
            <link rel="stylesheet" 
 href="bower_components/chosen/chosen.css">
            <!-- endbuild --> 

            <!-- build:css content/css/main.css -->
            <link rel="stylesheet" href="content/css/bootstrap.min.css">
            <link rel="stylesheet" href="content/css/bootstrap-
select.min.css">
            <link rel="stylesheet" href="content/css/style.css">
            <link rel="stylesheet" href="content/css/common.css">
        </head >
        <body >
            <!--[if lt IE 9]>
                <p class="browserupgrade">You are using an 
<strong>outdated</strong> browser. Please <a 
href="http://browsehappy.com/">upgrade your browser</a> to improve your 
experience.</p>
            <![endif]-->
       <div>
            <div  class="body-overlay" style="z-index:1051;">
                <div class="overlay-content" id="bodyOverlayContent">
                     <p></p> 
                </div>
            </div>
            <div class="main-section" ng-app="testApp">
                <div ui-view="welcome" ng-cloak>
            </div> 
     </div>
    </div>

                <script src="bower_components/angular/angular.js"></script>
            <script src="angular-ui-router.js"></script>
            <script src="mytest.controller.js"></script>  
            <script src="bower_components/jquery/dist/jquery.js"></script>
    </body>
    </html>

mytest.controller.js

  var app = angular.module('testApp', ['ui.router']);
  app.config(['$stateProvider', 
  '$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('welcome', {
        url : '/welcome',
        templateUrl : 'welcome.html',
       controller : 'testController'
    });
    $urlRouterProvider.otherwise('/welcome');
    console.log($stateProvider);
  }]);
  app.controller('testController', function($scope) {
    $scope.showInfoMessages="Contact Information";
  });

欢迎.html

  <div><p> Hi </p></div>

删除分配给ui-view的字符串

改变

  <div ui-view="welcome" ng-cloak>

对此

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

还要在html标签上添加ng-app

演示

相关内容

最新更新

热门标签：