ng-view在我的angularJS应用中没有显示任何内容

时间:2019-10-01 09:51:27

标签: angularjs

我是Angular的新手。我有一个简单的应用程序,用于按角度路由页面。我有两个页面,我想按角度更改URL页面:

// item1.html:

<section>{{name}}</section>

// item2.html:

<section>{{details}}</section>

这是我的HTML主页:

<body ng-app="myApp">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="# ">Home</a></li>
            <li><a href="#/item1">Item 1</a></li>
            <li><a href="#/item2">Item 2</a></li>
          </ul>
        </div>
      </nav>

      <div class="container" ng-view>
        <h3>Basic Navbar Example</h3>
        <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
      </div>      
</body>

// routeApp.js:

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

myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/',{
    templateUrl:'partial/item1.html',
    controller:'ListController'
}).when('/item2',{
    templateUrl:'partial/item2.html',
    controller:'DetailsController'
}).otherwise({
    redirect:'/'
});
}]);

// routeController.js:

var personController = angular.module("personController",[]);

personController.controller("ListController", function($scope){
$scope.name="Ali Qadomy";
});

personController.controller("DetailsController", function($scope){
$scope.details="Angular Developers";
});

我花了两天多的时间来研究问题,但找不到。 有帮助吗?

0 个答案:

没有答案