Data-ng-view w Angular.

0

Koledzy mam index.html

 
<!DOCTYPE html>
<html lang="en" data-ng-app="cmsAngularModule">
<head>
    <meta charset="UTF-8">
    <title>Car Manager System</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
<div id="divLogo">
    CAR MANAGER SYSTEM
</div>
<br><br><br><br><br><br>

<div id="divMain">
    <div id="divButton" style="float: left;width: 20%">
        <button id="ButtonLogin" class="buttonDiv" type="button" onclick="window.location.href='#/login'">Logowanie</button>
        <br><br><br>
        <button id="ButtonAddUser" class="buttonDiv" type="button" onclick="window.location.href='#/dodajUzytkownika'">Rejestracja użytkownika</button>

    </div>
    <div id="divTemplate" style="float: right;width: 70%" data-ng-view>



</div>

</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.5/angular-route.min.js"></script>
<script src="angular/module.js"></script>
<script src="angular/route.js"></script>

<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src="JScript/java.js"></script>
</html>

Dlaczego kiedy wrzucam do divTemplate przez data-ng-view poniższy kod - nie działaja na tym formularzu css style.

 
<div class="easyui-panel" title="New Topic" style="width:400px">
    <div style="padding:10px 60px 20px 60px">
        <form id="ff" class="easyui-form" method="post" >
            <table cellpadding="5">
                <tr>
                    <td>Imie:</td>
                    <td><input class="easyui-textbox" type="text" name="firstName" data-options="required:true"></td>
                </tr>
                <tr>
                    <td>Nazwisko:</td>
                    <td><input class="easyui-textbox" type="text" name="lastName" data-options="required:true"></td>
                </tr>

                <tr>
                    <td>Login:</td>
                    <td><input class="easyui-textbox" type="text" name="login" data-options="required:true"></td>
                </tr>

            </table>
        </form>
        <div style="text-align:center;padding:5px">

            <a id ="addUser" href="javascript:void(0)" class="easyui-linkbutton">Zapisz</a>
            <a id ="clearFieldsAddUser" href="javascript:void(0)" class="easyui-linkbutton">Czyść pola</a>
        </div>
    </div>
</div>

</div>
0

Tutaj nie ma zadnej filozofii - kwestia jest tylko taka czy jezeli zmieniam kawalki kodu przez cos takiego:

 
cmsAngularModule.config(function($routeProvider){
$routeProvider

    .when("/",{
        templateUrl : "strony/logo.html"
    })
    .when("/login",{
        templateUrl : "strony/login.html"
    })
    .when("/dodajUzytkownika",{
        templateUrl : "strony/dodajUzytkownika.html"
    })
});

to te kawalki powinny czerpać ze style css zdefiniwane w glownym pliku html ? bo u mnie nie to nie dziala i wszystko wrzuca sie bez oprawy graficznej ...

0

Oczywiście, że powinno, nie ma w tym żadnej filozofii. W końcu to tylko jeden DIV na stronie, która ma określone CSSy załadowane... chyba, że jednak nie są załadowane..

0

Przeczytałem, poniższego posta:
http://stackoverflow.com/questions/18220197/angularjs-does-not-load-scripts-within-ng-view
i wydaje mi sie że angular wcale nie jest taki idealny do single page aplication w parze z JQuery.
Prosze o info w jaki sposob zbudowac w aplikacji strukture stron i podstron ? Czy JQuery posiada mozliwosc zamiany div tak jak Angular i ng-view ?

0

Pozwolę sobie zauważyć, że mieszasz kilka oddzielnych wątków w jednym temacie: angular ng-view. Sugeruję otworzyć nowy do dyskusji nad SPA w Angularze.

Odnośnie jednak pytania, w mojje opinii Angular sprawdza się całkiem fajnie. Masz do dyspozycji moduły (możesz mieć jedną aplikację Angular, które będzie zawierała wspólne dla wszystkich modułów funkcje, etc. i tylko ją dodawać) i różne zakresy ($scope, $rootScope,..) itd.
Masz też eventy, np. $viewContentLoaded, dzięki któremu możesz uruchamiać określone funkcjonalności już po załadowaniu się widoku, itd.

1 użytkowników online, w tym zalogowanych: 0, gości: 1