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

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文件中维护路由，如：

 (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: {} }) } })();

此外，您不需要为每个视图设置多个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

演示

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

问题描述

2 个解决方案

解决方案1
3 2017-05-16 07:19:22

解决方案2
2 已采纳 2017-05-16 07:40:04

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

问题描述

2 个解决方案

解决方案1 3 2017-05-16 07:19:22

解决方案2 2 已采纳 2017-05-16 07:40:04

解决方案1
3 2017-05-16 07:19:22

解决方案2
2 已采纳 2017-05-16 07:40:04