ui.路由器不工作?这是我在plunker上的应用程序:http://plnkr.co/edit/JdRB2m0aWjl

我是angularjs的新手，我做了一个示例应用程序，现在我添加ui。路由器到应用程序，它显示什么，甚至链接都不工作。我想提交一个表格，并显示关于about.html的所有表单数据。 index . html

 <!DOCTYPE html>
     <html ng-app="mylinkApp">
     <head>
        <title>Angular app (Task)</title>
      <meta charset="utf-8">
       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <link href="css/simple-sidebar.css" rel="stylesheet">
       <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
       <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
       <script src="js/script.js"></script>
        <script src="js/homeDataDirective.js"></script>
      </head>
          <!-- ########################################### -->
        <body ng-controller="mainController">
               <div class="wrapper">
                 <header id="header" class="clear">
                <h1><img src="../Code/img/logo.png" style="width:200px" height="100px"/></h1>
            </header>
           </div>
         <div id="wrapper">
            <!-- Sidebar -->
              <div id="sidebar-wrapper">
                  <ul class="sidebar-nav">
                      <li class="sidebar-brand">
                          <a href="">
                              Quick Links
                          </a>
                      </li>
                      <li>
                          <a href="#home">Home</a>
                      </li>
                      <li>
                          <a href="#about">About</a>
                      </li>
                      <li>
                          <a href="#siteMap">SiteMap</a>
                      </li>
                   </ul>
              </div>
      <div id="page-content-wrapper">
                  <div class="container-fluid">
                      <div >
                           <div ng-view class="jumbotron text-center" style="height:475px"></div>
                      </div>
                  </div>
              </div>

        </div>
     <div id="wrapper">
         <footer id="footer" class="clear">
        <p style="text-align:center">Copyright &copy; 2015 - All Rights Reserved</p>
       </footer>
    </div>
     </body>
     </html>

script.js

// create the module and name it mylinkApp

var mylinkApp= angular.module('mylinkApp'，['ui.router']);mylinkApp。配置([stateProvider美元,"urlRouterProvider美元",函数($stateProvider， $urlRouterProvider) {

   $urlRouterProvider.otherwise('/index.html'); 
  // See route.webapp.js for allowed routes 
 $stateProvider 
    .state('home', { 
             url: '/home', 
            templateUrl: '../templates/home.html', 
            controller: 'homeController' 
          }) 
     .state('about', { 
    url: '/about', 
      templateUrl: '../templates/about.html', 
              controller: 'aboutController' 
            }) 
       .state('siteMap', { 
       url: '/siteMap', 
      templateUrl: '../templates/sitemap.html', 
      controller: 'contactController' 
           }) 
       } 
       ]); 
    // create the controller and inject Angular's $scope 
   mylinkApp.controller('homeController', function($scope) { 
      // create a message to display in our view 
       $scope.message = 'Everyone come and see how good I look!'; 
    }); 
        // create the controller and inject Angular's $scope 
  mylinkApp.controller('mainController', function($scope,$state) { 
   // create a message to display in our view 
     // $scope.message = 'Everyone come and see how good I look!'; 
     $state.go('home'); 
          }); 
     mylinkApp.controller('aboutController', ['$scope', 'userService', function($scope, userService) { 
       $scope.userService = userService;
       $scope.user = $scope.userService.user; 
       $scope.message = 'Look! I am an about page.'; 
   }]); 
      mylinkApp.controller('contactController', function($scope) { 
      $scope.message = 'Contact us! JK. This is just a demo.'; 
  });

谁能指导我如何制作ui ?路由器工作吗?

有更新的柱塞- WORKING

你的代码几乎完美。我所做的唯一更改-是修复错误的名称引用文件。首先，根文件(由Plunker运行)应该是index.html而不是Code/index.html。此外，各州应该使用与文件名相关的templateUrl，即，而不是这样:

.state('home', { 
    url: '/home', 
    templateUrl: '../templates/home.html', 
    ...
                  }) 
.state('about', { 
    url: '/about', 
    templateUrl: '../templates/about.html', 
    ...

我们需要

.state('home', { 
    url: '/home', 
    templateUrl: 'Code/templates/home.html', 
    ...
                  }) 
.state('about', { 
    url: '/about', 
    templateUrl: 'Code/templates/about.html', 
    ...

另外，当传递错误的url时使用的重定向，应该针对某些状态的url (不是模板或根html文件):

//$urlRouterProvider.otherwise('/index.html'); 
$urlRouterProvider.otherwise('/home');

有很多这样的打字错误或拼写错误。但仅此而已。其余的工作。只要记住-如果我们使用类型 email 进行注册:

<input type="text" class="form-control" ng-model="user.name">
<input type="email" class="form-control" ng-model="user.email">

它必须是真正有效的电子邮件提供(或实际上一些验证逻辑禁用注册)-看到下一个屏幕的结果，例如

user name:  me
user email: me@my.one

查看更新版本

我可以看到一些东西

当使用ui-router时，你应该使用指令ui-view，而不是ng-view(这是针对ngRoute的)
对于链接，你应该使用ui-sref="stateName"而不是href="/"，因为ui-sref="home"

相关内容

最新更新

热门标签：