【问题标题】:My ng-view" directive doesn't function the way it is supposed to我的 ng-view" 指令没有按应有的方式运行
【发布时间】:2019-10-27 03:38:19
【问题描述】:

我调用 ng-view,但程序从不呈现我的 home.html 或 cart.html 页面。如何让 ng-view 工作?

我尝试使用多种类型的引用。我以不同的方式调用了 ng-view,但似乎没有任何效果。

<!--My home.html:-->

<h2> HOME </h2>
<h1>{{message}}</h1>

<!--My cart.html:-->

<h2> CART </h2>
<h1>{{message2}}</h1>

下面是我的 index.html 和 app.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/home', {
        templateUrl: 'views/home.html',
        controller: 'homeController'
    })
    when('/cart', {
        templateUrl: 'views/cart.html',
        controller: 'cartController'
    })
    otherwise({
        redirect: '/home'
    });
}]);

myApp.controller('homeController', function($scope) {
    $scope.message = 'Home Page';
})

myApp.controller('cartController', function($scope){
    $scope.message2 = 'Cart Page';  
})
<!DOCTYPE html>
<html>
    <head>

        <title>Test Web App</title>

        <meta chrset="utf-8">

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

    </head>

    <body ng-app="myApp">
        
        <center><h1>Shopping Cart App</h1></center>
        

        <tr><td class="menu">
            <a href="#/home">Home</a>
            <a href="#/cart">Cart</a>
        </td></tr>
        <dev ng-view></dev>
    </body>
</html>

我希望当点击主页链接或购物车链接时,ng-view 会呈现它们的模板。

【问题讨论】:

  • .config 块有语法错误。第二个when 方法需要是点符号属性访问器。与otherwise 方法相同。

标签: html angularjs ngroute ng-view


【解决方案1】:

您有语法错误。尝试在when前加点

myApp.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'homeController'
    })
    .when('/cart', {
        templateUrl: 'views/cart.html',
        controller: 'cartController'
    })
    .otherwise({
        redirect: '/home'
    });
}]);

【讨论】:

  • 哦,做到了!谢谢!
  • 如果这对您有用,请将其标记为已接受,以便其他有相同问题的人知道该怎么做! @dsafaro
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多