Question

我对AngularJS很新。这是我的第一个项目，如果我的问题很基本，请原谅我。

我使用简单的HTML创建了一个页面，并在其上放置了三个按钮。在这些按钮上单击我想在屏幕的低部分加载视图。

的index.html

<body ng-app="MyApp">
    <div class="tab" ng-controller="TabControlController">
        <button class="tablinks" onclick="openTab(event, 'Environments')" ng-click="Views/EnvironmentsView.html">Environments</button>
        <button class="tablinks" onclick="openTab(event, 'SIT_Downloader')" ng-click="Views/SITDownloaderView.html">Download PCP Client</button>
        <button class="tablinks" onclick="openTab(event, 'Users')">PCP Users</button>
    </div>

    <div id="Environments" class="tabcontent" ng-controller="environmentController">
        <div>
            <div ng-view></div>
        </div>
    </div>

    <div id="SIT_Downloader" class="tabcontent" ng-controller="SITDownloaderController">
        <div>
            <div ng-view></div>
        </div>
    </div>

    <div id="Users" class="tabcontent">
        <div>
            <div ng-view></div>
        </div>
    </div>
</body>

Bootstrap.js

var MyApp= angular.module('MyApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/',
            {
                templateUrl: 'Views/EnvironmentsView.html',
                controller: window.environmentController
            })
            .otherwise({ redirectTo: '/' });
    });

截至目前，

观点非常简单......

<h3>PCP Users</h3>
<p>This screen will be used to add/remove users</p>

任何人都可以帮助我理解我在这里缺少的内容，或者将我重定向到某个页面，并提供相应的完整示例。

这是单页应用程序。

Answer 1

您可以尝试而不是单击按钮调用函数，只需使用锚标记链接路径

 <a href="#/your route"></a>

在单独的js文件中维护路由像：

＆＃13;

(function() {
  'use strict';

  angular.module('app.home').config(appRoutes);
  appRoutes.$inject = ['$routeProvider', '$locationProvider'];

  function appRoutes($routeProvider, $locationProvider) {

    $routeProvider
      .when('/', {
        templateUrl: '../yourhtmlfile.html',
        controller: 'controllerName',
        resolve: {}
      })


  }
})();

＆＃13;

此外，您不需要为每个视图都有多个ng-view 有一个ng-view

    <div>
        <div ng-view></div>
    </div>

这有助于在单击标记时加载html页面并加载相应的html文件。

Answer 2

您的样本中存在一些问题。

1 - 将<button ng-click=".." ></button>更改为<a href="/YORE ROUTE"></a>

你也可以使用按钮，但你应该创建一个功能，改变当前路线到新路线。

 <button ng-click="changeRoute('/home')" >Home</button>
  $scope.changeRoute = function(newRoute){
     $location.path(newRoute);
  }

2 - 路由中定义controller的语法错误。（在每条路线中放置控制器）

3 - 不需要多个ng-view

Demo

在单页面应用程序中使用Angularjs单击按钮时加载视图

2 个答案: