Load view on button click with Angularjs in single page application

Question

I am very new to AngularJS. This is my first project so please forgive me if my question is very basic.

I am created a page using simple HTML and put three button on it. On these button click I want to load views in the lowel part of screen.

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

views are very simple as of now...

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

Can anyone help me to understand what I am missing here or redirect me to some page with full example of this.

This is single page application.

can you create fiddle? in controller it should be environmentController instead of window.controller — MehulJoshi
– MehulJoshi, Commented May 16, 2017 at 7:10

SAN · Accepted Answer · 2017-05-16 07:19:22Z

3

You can try instead of calling a function onclick of a button ,just link the route with anchor tag

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

Maintain the routes in separate js file like:

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


  }
})();

Also you dont need to have multiple ng-view for each view have a single ng-view

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

this helps in loading the html page when you click on the tag and loads the corresponding html file.

answered May 16, 2017 at 7:19

SAN

3261 gold badge6 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhash786 Over a year ago

I tried above code but it don't work for me.and for every loaded Html I need different controller...

SAN Over a year ago

for every route you can have the controller

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You have some problem in your sample.

1- change <button ng-click=".." ></button> to <a href="/YORE ROUTE"></a>

you can use button also but you should crate a function that changes the current route to new route.

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

2- wrong syntax for define controller in route.(put controller in each route)

3- Don't need to multiple ng-view

Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 16, 2017 at 7:40

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

2 Comments

Abhash786 Over a year ago

Thanks Hadi for your help... Just one more point... This code is working with inline HTML. but when I create separate file it doesn't work... routerApp.config(function ($routeProvider) { $routeProvider .when('/Environment', { template: 'Views/EnvironmentsView.html', controller: 'environmentController' }) .when('/PcPDownload', { template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>', controller: 'SITDownloaderController' }) .otherwise({ redirectTo: '/' }); });

Hadi Over a year ago

For separate file you should use templateUrl and put the path of file.

Collectives™ on Stack Overflow

Load view on button click with Angularjs in single page application

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related