我的ng-view“指令无法正常运作

时间:2019-06-12 15:06:10

标签: html angularjs ngroute ng-view

我调用ng-view,但是该程序从不渲染我的home.html或cart.html页面。如何使ng-view正常工作?

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

Host

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

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

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

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

<h2> CART </h2>
<h1>{{message2}}</h1>
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';  
})

我希望当单击首页链接或购物车链接时,ng-view会呈现其模板。

1 个答案:

答案 0 :(得分:0)

您有语法错误。尝试将点放在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'
    });
}]);