0

I am learning AngularJS and trying to make sime redirecting application. I have index.html with dxTreeView (using devExtreme components). My goal is to load different view on click at item in the TreeView menu.

here is example of my index.html:

<body class="dx-viewport">
<div class="container" ng-app="MainContainer" ng-controller="MainController">
    <div class="left-content">
        <div id="simple-treeview" dx-tree-view="treeViewOptions"></div>
    </div>

    <div class="right-content">
        <div data-options="dxView: {name: 'mainView', title: 'Main View'}" id="right-view">
        </div>
    </div>
</div>

index.js:

MainApp.controller("MainController", function MainController($scope) {

$scope.treeViewOptions = {
    dataSource: treeLoginOption,
    selectionMode: "single",
    selectByClick: true,
    displayExpr: "name",
    keyExpr: "name",
    onItemClick: function (e) {
        var viewType = e.itemData.type;

        if (viewType == "Login") {
            $("#right-view").load("../views/" + viewType + ".dxview");
            LoginController(); !!!!Here is my problem !!!
            rebuildMenu();
        }
        else
        {
            $("#right-view").load("../views/" + viewType + ".html");
        }   
    }
} });

What I need is to call another html page, which have .js file with another controller. With my approach, the page is called but not the .js file with controller.

Login.html:

<div class="form" ng-controller="LoginController">
        <div class="dx-fieldset">
            <div class="dx-fieldset-header">Přihlášení uživatele</div>

            <div class="dx-field">
                <div class="dx-field-label">Jméno</div>
                <div class="dx-field-value">
                    <div dx-text-box="textBox.name" id="textBox.name"></div>
                </div>
            </div>

            <div class="dx-field">
                <div class="dx-field-label">Heslo</div>
                <div class="dx-field-value">
                    <div dx-text-box="textBox.password" id="textBox.password"></div>
                </div>
            </div>
        </div>
    </div>

and Login.js:

MainApp.controller('LoginController', function ($scope) {

console.log("Login page generate called.");

$scope.textBox = {
    name: {
        placeholder: "Jméno",
        visible: true
    },
    password: {
        placeholder: "Heslo",
        mode: "password",
        visible: true
    }
}; });

I would realy like your help. Thanks in advice.

David Bašta
  • 55
  • 1
  • 1
  • 7

1 Answers1

0

For routing in angularJS you should use the angular-route package. You can read more about it here on the AngularJS docs

Favna
  • 302
  • 1
  • 9
  • Well, thanks. I managed to add angular-route and it calls controllers now. Cool. But i have another problem. How do i call the redirect in .js controller? The goal is to have dynamically generated menu, so i can not have tags in my Layout. – David Bašta Feb 22 '19 at 09:12
  • I'm not 100% on this but I believe you can change `$location` in combination with either `reload()` or `updateParams` as described [here](https://docs.angularjs.org/api/ngRoute/service/$route) – Favna Feb 22 '19 at 09:15
  • I updated the index.html `
    ` And used `$window.location.href = "login";` Now its redirecting to http://localhost:50073/login and throwing 404 error     – David Bašta Feb 22 '19 at 09:42
  • AngularJS Routing will by default route to `/#/login`. If you want to change this please look into using HTML5Mode and mind that when you push to a production this requires some hosting solution with i.e. ExpressJS so it won't work on Github Pages. [This SO answer describes further](https://stackoverflow.com/questions/14319967/angularjs-routing-without-the-hash). If you have further questions please create a new SO thread as they getting are offtopic from the current question. I would also appreciate if you could mark this answer as the solution. – Favna Feb 22 '19 at 09:46