在單頁應用程序中使用Angularjs點擊按鈕時加載視圖

我對AngularJS非常陌生。這是我的第一個項目，所以請原諒我，如果我的問題是非常基本的。在單頁應用程序中使用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>

誰能幫我瞭解我是什麼在這裏丟失或重定向我的一些頁面，完整的例子。

這是單頁面應用程序。

來源

2017-05-16 Abhash786

你可以創建小提琴嗎？在控制器中它應該是environmentController而不是window.controller – MehulJoshi

您的示例中存在一些問題。

變化<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

來源

2017-05-16 07:40:04

感謝哈迪爲你的幫助......還有一點......這段代碼使用內聯HTML。但是當我創建單獨的文件，這是行不通的...... routerApp.config（函數（$ routeProvider）{ $ routeProvider 。當（ '/環境'，{ 模板： '查看/ EnvironmentsView.html' ，控制器： 'environmentController' }）。當（ '/ PcPDownload'，{ 模板： '

'，控制器： 'SITDownloaderController' }）。否則（{redirectTo： '/'}）; }）; – Abhash786

對於單獨的文件，您應該使用'templateUrl'並放置文件的路徑。 –

明白了......謝謝.... – Abhash786

你可以嘗試，而不是調用一個函數的onclick按鈕，只是鏈接的路線與定位標記

<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視圖爲每個視圖有一個單一的ng-view

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

這有助於在您點擊標籤並加載相應的html文件時加載html頁面。

來源

2017-05-16 07:19:22 SanjanaHE

我試過上面的代碼，但它不適用於我。爲每個加載的Html我需要不同的控制器... – Abhash786

爲每個路線，你可以有控制器 – SanjanaHE

在單頁應用程序中使用Angularjs點擊按鈕時加載視圖

回答

{{title}}

{{shortTitle}}

在單頁應用程序中使用Angularjs點擊按鈕時加載視圖

回答

{{title}}

{{shortTitle}}

相關問題