gpt4 book ai didi

javascript - 在单页应用程序中使用 Angularjs 在按钮单击时加载 View

转载 作者:太空宇宙 更新时间:2023-11-04 14:55:10 24 4
gpt4 key购买 nike

我是 AngularJS 的新手。这是我的第一个项目,如果我的问题很基础,请原谅我。

我使用简单的 HTML 创建了一个页面,并在上面放了三个按钮。在这些按钮上单击我想在屏幕的底部加载 View 。

索引.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: '/' });
});

到目前为止, View 非常简单...

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

任何人都可以帮助我理解我在这里遗漏的内容或将我重定向到包含完整示例的某个页面。

这是单页应用。

最佳答案

您可以尝试不调用单击按钮的函数,只需将路由与 anchor 标记链接

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


}
})();

此外,您不需要为每个 View 设置多个 ng-view有一个 ng-view

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

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

关于javascript - 在单页应用程序中使用 Angularjs 在按钮单击时加载 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43994546/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com