Javascript 角度JS布线不'；行不通_Javascript_Angularjs

Javascript 角度JS布线不'；行不通

javascript angularjs

Javascript 角度JS布线不'；行不通,javascript,angularjs,Javascript,Angularjs,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="

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>

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视图不起作用

我觉得这将是一个棘手的地方，错误隐藏在那里，因为我花了很多时间。任何调试都将不胜感激

工作正常吗

看看这个

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 ) {
});

它工作得很好

看看这个

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 ) {
});

以下是路由的基本示例：

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版本。因此，请注意1.6.1中地址栏中的“#”符号

您将拥有的版本为“#！”

这里是路由的基本示例：

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版本。因此，请注意1.6.1中地址栏中的“#”符号

您将拥有的版本为“#！”

您在try.html中的app.js文件包括在哪里。您在try.html中的app.js文件包括在哪里。虽然不太确定哪里出错，但我使用了您提供的示例，解决了问题。谢谢虽然不太确定哪里出了问题，但我使用了您提供的样本，解决了问题。谢谢