Question

我试图将HTML文件分开以使其更具可重用性，但遗憾的是它不起作用。谷歌搜索并遵循教程，但没有任何作用，也许我忽略了一些东西。为了清楚地概述我的问题，添加了整个模块。也许它有一些错误。代码在index.html中运行完美，但希望将其拆分为不同的html文件。以下示例应在＆＃34; wheretobuy.html＆＃34;中运行。文件。任何可以帮助我的人。

＆＃13;

var app = angular.module("myApp", ["ngRoute", "slideshow", "json", "accessoires", "wheretobuy"]);
app.config(function($routeProvider) {
  // $locationProvider.html5Mode(true);
  $routeProvider
    .when('/', {
      templateUrl: 'pages/home.html',
      controller: 'HomeController'
    })
    .when('/accessories', {
      templateUrl: 'pages/accessories.html',
      controller: 'AccessoriesController'
    })
    .when('/wheretobuy', {
      templateUrl: 'pages/wheretobuy.html',
      controller: 'WheretobuyController'
    })
    .when('/service', {
      templateUrl: 'pages/service.html',
      controller: 'ServiceController'
    })
    .when('/forum', {
      templateUrl: 'pages/forum.html',
      controller: 'ForumController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

app.controller('HomeController', function($scope) {
  $scope.message = 'Hello from HomeController';
});
app.controller('AccessoriesController', function($scope) {
  $scope.message = 'Hello from AccessoriesController';
});
app.controller('WheretobuyController', function($scope) {
  $scope.message = 'WheretobuyController';
});
app.controller('ServiceController', function($scope) {
  $scope.message = 'Hello from ServiceController';
});
app.controller('ForumController', function($scope) {
  $scope.message = 'Hello from ForumController';
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>

  <script type="text/ng-template" id="pages/wheretobuy.html">
    <div class="row" ng-controller="TabController">
      <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked">
          <li class="{active: isSet}">
            <a href ng-click="setTab(1)" class="country">Asia</a>
          </li>

          <li class="{active: isSet}">
            <a href ng-click="setTab(2)" class="country">Europe</a>
          </li>

          <li class="{active: isSet}">
            <a href ng-click="setTab(3)" class="country">South-America</a>
          </li>

          <li class="{active: isSet}">
            <a href ng-click="setTab(4)" class="country">Oceania</a>
          </li>
        </ul>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#/">Products</a>
          </li>
          <li><a href="#/accessories">Accessories</a>
          </li>
          <li><a href="#/wheretobuy">Where to buy</a>
          </li>
          <li><a href="#/service">Service</a>
          </li>
          <li><a href="#/forum">Forum</a>
          </li>
        </ul>
      </div>
</body>
</script>

＆＃13;

Answer 1

请检查以下解决方案，这里的关键点是

使用$routeProvider
使用ng-app指令引导应用程序。
在视图中使用ng-view指令来呈现模板。
指定使用text/ng-template类型创建的html模板的 id ，以匹配关联的templateUrl属性的值

＆＃13;

var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'pages/home.html',
      controller: 'HomeController'
    })
    .when('/accessories', {
      templateUrl: 'pages/accessories.html',
      controller: 'AccessoriesController'
    })
    .when('/wheretobuy', {
      templateUrl: 'pages/wheretobuy.html',
      controller: 'WheretobuyController'
    })
    .when('/service', {
      templateUrl: 'pages/service.html',
      controller: 'ServiceController'
    })
    .when('/forum', {
      templateUrl: 'pages/forum.html',
      controller: 'ForumController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

app.controller('HomeController', function($scope) {
  $scope.message = 'Hello from HomeController';
});

app.controller('AccessoriesController', function($scope) {
  $scope.message = 'Hello from AccessoriesController';
});

app.controller('WheretobuyController', function($scope) {
  $scope.message = 'Hello from WheretobuyController';
});

app.controller('ServiceController', function($scope) {
  $scope.message = 'Hello from ServiceController';
});

app.controller('ForumController', function($scope) {
  $scope.message = 'Hello from ForumController';
});

＆＃13;

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul li {
  padding: 5px;
}

＆＃13;

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.js"></script>

<div ng-app="myApp">
  <ul>
    <li>
      <a href="#/">Products</a>
    </li>
    <li>
      <a href="#/accessories">Accessories</a>
    </li>
    <li>
      <a href="#/wheretobuy">Where to buy</a>
    </li>
    <li>
      <a href="#/service">Service</a>
    </li>
    <li>
      <a href="#/forum">Forum</a>
    </li>
  </ul>
  <ng-view></ng-view>

  <script type="text/ng-template" id="pages/home.html">
    <h1 ng-bind="message"></h1>
  </script>

  <script type="text/ng-template" id="pages/accessories.html">
    <h1 ng-bind="message"></h1>
  </script>

  <script type="text/ng-template" id="pages/wheretobuy.html">
    <h1 ng-bind="message"></h1>
  </script>

  <script type="text/ng-template" id="pages/service.html">
    <h1 ng-bind="message"></h1>
  </script>

  <script type="text/ng-template" id="pages/forum.html">
    <h1 ng-bind="message"></h1>
  </script>
</div>

＆＃13;

试图将HTML页面分开Angular

1 个答案: