Angularjs 设置角度视图中ui视图的默认视图_Angularjs_Angular Ui Router

Angularjs 设置角度视图中ui视图的默认视图

angularjs

Angularjs 设置角度视图中ui视图的默认视图,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我有一个简单的角度项目结构 app index.html view main.html home.html landingPage.html html看起来像 <body ng-app="myApp"> <div ui-view> </div> </body> $urlRouterProvider.otherwise('/landingPage'); $stateProvider.

我有一个简单的角度项目结构

app
   index.html
   view
       main.html
       home.html
       landingPage.html

html看起来像

<body ng-app="myApp">
  <div ui-view>
  </div>
</body>

$urlRouterProvider.otherwise('/landingPage');
 $stateProvider.state('landingPage', {
            url: '/landingPage',
            abtract: true,
            templateUrl: 'view/landingPage.html'
 })
 .state('landingPage.home', {
            url: '/home',
            templateUrl: 'view/home.html'
 }).state('landingPage.main', {
            url: '/main',
            templateUrl: 'view/main.html'
 });;

及登录页看起来像

    <header></header>
    <div>
            <div ui-view>
            </div>
    </div>

当我运行应用程序时，我正确地看到了标题，但没有看到home.html内容。如何每次都将home.html设为默认值？正如你所看到的，我有一个抽象的真理，但那是行不通的。我还尝试了ng include，它可以工作，但得到了错误

TypeError:cannotread属性'insertBefore'为null

示例主页应该在运行时显示，但没有显示任何内容

请尝试将url从状态主页设置为：

url: ''

希望有帮助：）

尝试将url从州主页设置为：

url: ''

希望有帮助：）

您需要在登录页上定义另一个

ui视图

，因为登录页是home和main的父视图，因为使用了

符号

如果你想设置一个带有

ui.router

的路由器，这里有一个FAQ部分可以解释，基本上你可以通过url来实现

每次转到父状态时，都可以将其重定向到子状态，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@<2" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      var app = angular.module('yourApp', ['ui.router']);
      app.config(
        function($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/landingPage');
          $urlRouterProvider.when('/landingPage', '/landingPage/home');
          $stateProvider
          .state('landingPage', {
            url: '/landingPage',
            abtract: true,
            template: ' <a ui-sref="landingPage.home">Home</a><a ui-sref="landingPage.main">Main</a><div ui-view></div>'
          })
          .state('landingPage.home', {
            url: '/home',
            template: '<div>HOME</div>'
          })
          .state('landingPage.main', {
            url: '/main',
            template: '<div>MAIN</div>'
          });
        }
      );
    </script>
  </head>
  <body ng-app="yourApp">
    <div ui-view>
    </div>
  </body>
</html>

$urlRouterProvider.when（'/landingPage'，'/landingPage/home'）
在代码中，将如下所示：
<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@<2" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      var app = angular.module('yourApp', ['ui.router']);
      app.config(
        function($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/landingPage');
          $urlRouterProvider.when('/landingPage', '/landingPage/home');
          $stateProvider
          .state('landingPage', {
            url: '/landingPage',
            abtract: true,
            template: ' <a ui-sref="landingPage.home">Home</a><a ui-sref="landingPage.main">Main</a><div ui-view></div>'
          })
          .state('landingPage.home', {
            url: '/home',
            template: '<div>HOME</div>'
          })
          .state('landingPage.main', {
            url: '/main',
            template: '<div>MAIN</div>'
          });
        }
      );
    </script>
  </head>
  <body ng-app="yourApp">
    <div ui-view>
    </div>
  </body>
</html>


var-app=angular.module（'yourApp'，['ui.router']）；
app.config(
函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/landingPage'）；
$urlRouterProvider.when（'/landingPage'，'/landingPage/home'）；
$stateProvider
.state（'landingPage'{
url:“/landingPage”，
是的，
模板：“示例
您需要在登录页上定义另一个ui视图
，因为登录页是home和main的父视图，因为使用了
符号
如果你想设置一个带有ui.router
的路由器，这里有一个FAQ部分可以解释，基本上你可以通过url来实现
每次转到父状态时，都可以将其重定向到子状态，如下所示：
<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@<2" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      var app = angular.module('yourApp', ['ui.router']);
      app.config(
        function($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/landingPage');
          $urlRouterProvider.when('/landingPage', '/landingPage/home');
          $stateProvider
          .state('landingPage', {
            url: '/landingPage',
            abtract: true,
            template: ' <a ui-sref="landingPage.home">Home</a><a ui-sref="landingPage.main">Main</a><div ui-view></div>'
          })
          .state('landingPage.home', {
            url: '/home',
            template: '<div>HOME</div>'
          })
          .state('landingPage.main', {
            url: '/main',
            template: '<div>MAIN</div>'
          });
        }
      );
    </script>
  </head>
  <body ng-app="yourApp">
    <div ui-view>
    </div>
  </body>
</html>

$urlRouterProvider.when（'/landingPage'，'/landingPage/home'）；

在代码中，将如下所示：
<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@<2" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="ui-router@0.3.1" data-semver="0.3.1" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script>
      var app = angular.module('yourApp', ['ui.router']);
      app.config(
        function($stateProvider, $urlRouterProvider) {
          $urlRouterProvider.otherwise('/landingPage');
          $urlRouterProvider.when('/landingPage', '/landingPage/home');
          $stateProvider
          .state('landingPage', {
            url: '/landingPage',
            abtract: true,
            template: ' <a ui-sref="landingPage.home">Home</a><a ui-sref="landingPage.main">Main</a><div ui-view></div>'
          })
          .state('landingPage.home', {
            url: '/home',
            template: '<div>HOME</div>'
          })
          .state('landingPage.main', {
            url: '/main',
            template: '<div>MAIN</div>'
          });
        }
      );
    </script>
  </head>
  <body ng-app="yourApp">
    <div ui-view>
    </div>
  </body>
</html>


var-app=angular.module（'yourApp'，['ui.router']）；
app.config(
函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/landingPage'）；
$urlRouterProvider.when（'/landingPage'，'/landingPage/home'）；
$stateProvider
.state（'landingPage'{
url:“/landingPage”，
是的，
模板：'example
关于url:'hmm是的，它在你的小提琴中工作。我尝试了同样的操作，但没有工作。可能是它的cuz嵌套ui视图？小提琴演示没有嵌套状态关于url:'hmm是的，它在你的小提琴中工作。我尝试了同样的操作，但没有工作。可能是它的cuz嵌套ui视图？小提琴演示没有“没有嵌套状态这是我想要的您可以看到主页内容未打印这是我想要的您可以看到主页内容未打印