javascript - ng-route 不工作

标签 javascript angularjs html

我正在发布我的代码,请问代码中有什么问题吗? 当我点击 anchor 标记“联系人”时,它不会改变 View ...... 我已经定义了单独的 Controller 。

提前致谢......):

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="scripts/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
    <!--<script src="scripts/angular-route.js"></script>-->
    <script src="js/app.js">enter code here</script>
</head>
<body ng-app="myModule">
<h1>Welcome to ITYX</h1>
    <p><a href="#main">Home</a></p>
    <p><a href="#contact">Contact</a></p>
    <div ng-view></div>
</body>
</html>

app.js

var app =angular.module("myModule",['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
    $routeProvider.
        when('/',{
            templateUrl:'templates/main.html',
            controller:'mainController'
    }).
    when('/contact',{
        templateUrl:'templates/contact.html',
         controller:'contactController'
    }).
    otherwise({
        redirectTo:'/'
    });
}]);
app.controller('mainController',function($scope){
    $scope.message ="hi am in main section";
});
    app.controller('contactController',function($scope){
        console.log("contact controller");
    $scope.message ="hi am in contact section";
});

ma​​in.html

<h1>Main Section</h1>
{{message}}

contact.html

<h1>Contact Section</h1>
{{message}}

最佳答案

您需要将其作为,

 <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1>Welcome to ITYX</h1>
        <div class="nav">
          <a href="#main" class="button">Main</a>
          <a href="#contact" class="button">Contact</a>
        </div>
      </div>
    </div>
  </div>

<强> DEMO

关于javascript - ng-route 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41567904/

相关文章:

javascript - 为什么 "return"点击事件没有执行默认的浏览器行为?

Javascript 函数在 IE 浏览器中不起作用

javascript - 执行不同组件的功能

javascript - 在指定位置弹出

javascript - 使用 Coffeescript 设置 AngularJS Controller 属性不能是最后一行

javascript - Angularjs 监视父作用域的变化

javascript - StarDict 支持 JavaScript 和 Firefox OS 应用程序

javascript - 重新加载页面以添加内容

javascript - Angular 1.5.x - 嵌套组件的问题

javascript - Windows Server 2003 上不显示 HTML5 拖放样式