个人中心
gpt4 book ai didi

javascript - ui.router 不工作？这是我在 plunker :http://plnkr. co/edit/JdRB2m0aWjllDcze09S2?p=preview 上的应用程序

转载 作者：行者123 更新时间：2023-11-27 23:55:01 24 4
gpt4 key购买 nike

我是 angularjs 的新手，我制作了一个示例应用程序，现在我将 ui.router 添加到应用程序中，它没有显示任何内容，甚至链接也不起作用。我想提交一个表单并在 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.config(['$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.router 工作？

最佳答案

有updated plunker - 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');

其中有很多拼写错误或拼写错误。但仅此而已。其余的正在工作。请记住 - 如果我们使用电子邮件类型进行注册:

<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

检查updated version here

关于javascript - ui.router 不工作？这是我在 plunker :http://plnkr. co/edit/JdRB2m0aWjllDcze09S2?p=preview 上的应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32343941/

24 4 0
文章推荐： c++ - 状态错误 C2440 :" ' =': cannot convert from ' const FDHNode *' to ' FDHNode *'"?
文章推荐： javascript - 我的 Hello World AngularJS 应用程序出了什么问题？
文章推荐： html - 如何让我的 flexbox 布局占用 100% 的垂直空间？
文章推荐： javascript - 如何提交表单并在表单验证后重定向到页面
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com