Question

index.html看起来像：

<!DOCTYPE html>
<html lang="en" ng-app="HomeApp">
  <head>
  <link rel="stylesheet" href="css/general_style.css">
  <script src="js/angular_core/angular.min.v.1.2.16.js"></script>
  <script src="js/angular_core/angular-resource.min.v.1.2.16.js"></script>
  <script src="js/angular_core/angular-route.min.v.1.2.16.js"></script>
  <script src="js/home_apps.js"></script>
  <script src="js/home_controllers.js"></script>
  <script src="js/home_services.js"></script>
    <title>AngularJS Routing example</title>
  </head>
  <body>
        <div>
           <ul>
                <li><a href="#contactus"> contact</a></li>
                <li><a href="#login"> login </a></li>
                <li><a href="#home"> home </a></li>
            </ul>
        </div>
        <div ng-view></div>

  </body>
</html>

home_apps.js看起来像：

var MyHomeApp = angular.module('HomeApp', [
            'ngRoute',
            'HomeControllers'
            ]);

MyHomeApp.config(['$routeProvider',
                function($routeProvider) {
                  $routeProvider.
                    when('/login', {
                      templateUrl: 'partials/login.html'
                    }).
                    when('/contactus', {
                      templateUrl: 'partials/contactus.html'
                    }).
                    when('/home', {
                        templateUrl: 'partials/home.html',
                        controller: 'WGHomeLanCtrl'
                      }).
                    otherwise({
                      redirectTo: 'partials/home.html',
                      controller: 'WGHomeLanCtrl'
                    });
                }]);

最后，在/ partials文件夹下，有3个html文件：的login.html：

        <div>
            <p class="right_margin">
                <h1><a href="index.html">log in...</a></h1>
            </p>
        </div>

contactus.html：

        <div>
            <p class="right_margin">
                <h1>Contactus</h1>
            </p>
        </div>

home.html的：

        <div>
            <p class="right_margin">
                <h1>home</h1>
            </p>
        </div>

在现实世界中，当我从firefox打开index.html时，url就像：

{file path} /index.html#/contactus

然而，来自contactus.html的内容未显示 - 在这种情况下，ng-view不起作用。

我觉得那里错误隐藏的地方会是一个棘手的地方，因为我花了很多时间。任何调试都将非常感谢!!!

Answer 1

工作正常

看看这个

<强> Working Demo

var MyHomeApp = angular.module('HomeApp', []);

MyHomeApp.config(['$routeProvider',
                function($routeProvider) {
                  $routeProvider.
                    when('/login', {
                      templateUrl: 'login.html'
                    }).
                    when('/contactus', {
                      templateUrl: 'contactus.html'
                    }).
                    when('/home', {
                        templateUrl: 'home.html',
                        controller: 'WGHomeLanCtrl'
                      }).
                    otherwise({
                      redirectTo: 'home.html',
                      controller: 'WGHomeLanCtrl'
                    });
                }]);   

MyHomeApp.controller( 'WGHomeLanCtrl', function ( $scope ) {
});

Answer 2

这里是路由的基本示例：

var app = angular.module('routeApp',['ui.bootstrap','ngRoute']).

config(function($routeProvider){

$routeProvider.when('/',{

templateUrl: 'templates/main.php'   

}).when('/first',{
templateUrl: 'templates/first.php'

}).when('/second',{
    templateUrl: 'templates/second.php'
});

}).controller('routeController',function($scope,$timeout){

        //your code
});

标记：

<!DOCTYPE html>
<html ng-app='routeApp' class="scope">
<head>
  <meta content="text/html;charset=UTF-8"/>
  <link href="./css/tether.min.css" type="text/css" rel="stylesheet" />
  <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head> 
<body ng-controller='routeController' class="scope">

<a href="#!">main</a>
<a href="#!first">first</a>
<a href="#!second">second</a>

<div ng-view>

</div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    

 </script>
 <script src="./js/tether.min.js">

 </script>
 <script src="./js/bootstrap.min.js">

 </script>
 <script src="./js/angular.min.js">

 </script>
 <script src="./js/ui-bootstrap-tpls-2.5.0.min.js">

 </script>

 <script src="./js/angular-route.min.js">

 </script>

  <script src="./js/flat-ui.min.js">

  </script> 
  <script src="./js/main.js">

  </script> 
</body> 
</html>

说明：您的路由源自您的角度版本，此标记与
相关 1.6.1版本。因此，要注意＆＃39;＃＆＃39;在1.6.1中登录您的地址栏您将拥有的版本＆＃39;＃！＆＃39;。

Angular JS路由不起作用

2 个答案: