• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Angular JS

T

Tronjer

Senior HTML'ler
Ich arbeite mich gerade in AngularJS und Firebase ein. Ist vielleicht noch jemand hier mit diesem Framework unterwegs? So zwecks gemeinsamen Erfahrungsaustauschs.
 
Ich hab mich mal mit Angular auseinandergesetzt und ein bisschen damit rumgespielt. Im moment liegt es aber jedoch wieder ein bisschen bei der Seite, mit dem festen Ziel es nochmals anzuschauen.
 
Um hier das Thema mal wieder ein bisschen aufleben zu lassen. Hab mal ein kleines menu mit angular gebastelt um einige Funktionen anzuschauen. Will das mal niemanden vorenthalten und vielleicht gibts ja auch noch ein paar Ideen.

index.html
HTML: 
<html lang="en" data-ng-app="ngViewExample">
    <head>
        <link rel="stylesheet" href="css/style.css">
        <script src="js/angular.min.js"></script>

        <script src="js/angular-route.min.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controller.js"></script>
    </head>
    <body>
      
        <nav data-ng-controller="MenuController">
            <ul id="nav">
                <li data-ng-repeat="entry in menuEntrys" class="{{entry.className}}">
                    <a href="{{entry.menuLink}}">{{entry.menuName}}</a>
                        <ul class="dropdown-menu" data-ng-show="entry.sub">
                            <li ng-repeat="sub in entry.sub">
                                <a href="{{sub.menuLink}}">{{sub.menuName}}</a>
                            </li>
                        </ul>
                </li>
            </ul>  
        </nav>
        <div data-ng-controller="MainController" data-ng-view="" id="content" style="clear:both">
      
      
        </div>
      
      
    </body>
</html>

entry1.html
HTML: 
<article data-ng-repeat="article in contentEntrys">
    <header>
        <h1>{{article.title}}</h1>
    </header>
    <p>
        {{article.content}}
    </p>


</article>

style.css

Code: 
nav ul {
    margin:0 40px;
    padding: 0;
    min-height:34px;
    list-style:none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    letter-spacing:-0.5px;
    font-size:13px;
  
    text-shadow: 0 -1px 3px #202020;
    /* Shadoooow */

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
  
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;

    float:left;
    }

nav ul li {
    display:block;
    float:left;
  
    width:105px;
    height:34px;
  
    border-right:1px solid #5d5d5d;
    border-left:1px solid #929292;
    border-bottom:1px solid #575757;
    border-top:1px solid #797979;
    /* Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}

nav ul li:hover {

    /* Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
  
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}

nav ul li:active {

    /* Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
  
    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}


nav ul li a {
    color:white;
    text-decoration:none;
    text-align:center;
    display:block;
    line-height:34px;
    outline:none;
}
/* First li element (main menu) */
nav ul li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
  
    border-left:none;  
}

/* Last li element (main menu) */
nav ul li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
  
    border-right:none;
}


/* Submenu "ul Box" */
nav ul li ul {
    margin:0;
    visibility: hidden;

}

/* li with sub hovered */
nav ul li:hover  ul{
    visibility: visible;

}

/* Submenu li element */
nav ul li ul li {

    border-top: 1px solid #929292;
    border-bottom: 1px solid #5d5d5d;

  
}

/* First li element */

nav ul li ul li:first-child {
    -moz-border-radius:4px 4px 0 0;
    -webkit-border-radius:4px 4px 0 0;
    border-radius:4px 4px 0 0;
    border-top: none;
}

/* Last li element */

nav ul li ul li:last-child {
    -moz-border-radius:0 0 4px 4px;
    -webkit-border-radius:0 0 4px 4px;
    border-radius:0 0 4px 4px;
    border-bottom:none;
}

controller.js

Code: 
function MenuController($scope) {
   $scope.menuEntrys =
     [
       {menuName : 'Home', menuLink : '#', className : "" },
       {menuName : 'Entry1', menuLink : 'index.html#entry1', className : "" },
       {menuName : 'Entry2', menuLink : '#', className : "" },
       {menuName : 'Sub', menuLink : '#', className : "dropdown", sub :
         [
           {menuName : 'SubEntry1', menuLink : '#', className : ""},
           {menuName : 'SubEntry2', menuLink : '#', className : ""}
         ]}
     ];
}

angular.module('ngViewExample', ['ngRoute'], function ($routeProvider, $locationProvider) {
   $routeProvider.when('/entry1', {
     templateUrl: 'entry1.html',
     controller: 'Entry1Controller'
   });
});
  
   function MainController($route, $location) {
     this.$route = $route;
     this.$location = $location;
   }
  
   function Entry1Controller($scope) {
     $scope.contentEntrys =
     [
       {title : 'Home', content : 'blalblbjla dlajjldjj asdlkfla fdaljljasdfj'},
       {title : 'Supermaaaaan', content : 'bbbbbbbbbbbbbbb bbbbbbbbbbbbbbbbbbbbbbbbbb'},
       {title : 'Superlas,cyn', content : 'cccccccc ddddddddd ffffffffff wwwwwwwww qqqqqqqq jjjjjj'}
     ];

   }
  
   function Entry2Controller() {
     this.name = 'Entry2';

   }
 
Zuletzt bearbeitet:
Dem Router fehlt noch das otherwise() mit redirectTo '/'.

Wobei eine Navigation mit AngularJS eigentlich nur Sinn ergibt, wenn die Inhalte dynamisiert werden sollen. Beispielsweise für eine Lokalisierung, bei der die einzelnen Menüpunkte je nach Sprache als i18n Keys interpoliert werden. Ich habe habe das offizielle Tutorial mehrere Male durchgearbeitet und abgewandelt um es richtig zu verstehen. Mir danach "Up and running with AngularJS" bei lynda.com angeschaut und bin im Anschluss zu thinkster.io gewechselt.

Mein Problem mit den verfügbaren Lernquellen besteht darin, dass diese entweder zu Basic sind und die Daten aus hardcodierten JSON-Objekten übernehmen (was in der Praxis natürlich niemand macht), oder zu fortgeschritten und nicht auf Anhieb verständlich. Es fehlt so etwas der Middleground, welcher AngularJS im Zusammenspiel mit dem Backend einsteigergerecht vermittelt.

Vor einiger Zeit hatte ich mal eine SinglePage App auf Basis von JavaScript und RoR geschrieben, welche die WebCam des Rechner einschaltet und aus dem Videostream Einzelbilder aufnimmt, in dem sie diese als base64 String auf ein Canvas zeichnet.

https://github.com/Tronjer/camera_app

Das wollte ich nun auf AngularJS in Form eines Live-Chats übertragen, bei dem aufgenommene Bilder automatisch zwischen allen Teilnehmern übertragen werden.
 
Das otherwise fehlt in der Tat, ich dachte ich hätte es mal drin gehabt.

Was meiner Meinung nach definitiv Sinn machen würde, wäre eine MongoDB anbindung mit Angular, womit dann das hardcodierte JSON wegfällt, aber quasi genau gleich angebunden wird.

Was ich an angular schade finde, ist der vernachlässigte Standard nach W3C mit den Directives. Es gibts zwar möglichkeiten, doch die "eigenen" Tags sprechen ja quasi gegen den W3C Standard, werden aber in den meisten beispielen verwendet. Aber wie im Eingangpost beschrieben, ich habe nicht sehr viel mit Angular gemacht bisher. thinkster.io habe ich jedoch auch mal durchgearbeitet.

Ich kann noch 2 Dinge empfehlen:

https://github.com/jmcunningham/AngularJS-Learning
sowie:
http://egghead.io/
 
Die Directives bei Angular gefallen mir auch nicht besonders, weil das eigentlich nichts anderes als obstrusives JavaScript ist. Ich fände es besser, wenn MVC-gerecht Unterseiten in View Modules gruppiert würden, wobei es für das Module einen Controller und für die einzelnen Views jeweils eine Action innerhalb des Controllers gäbe. Auf der Habenseite wiederum steht, dass Angular Partials kennt, sowie eine Template-Engine und Testsuite gleich an Bord hat. Das macht es "vollständiger" als Backbone.

Genau genommen geht es mir darum, auf das "richtige" Framework zu setzen, welches sich innerhalb der nächsten Jahre als Quasi-Standard für serverseitiges JS entwickelt. So wie jQuery im Frontend den Standard gesetzt hat.

Danke für die Links und btw. ist es möglich direkt aus Angular heraus mit MongoDB zu interagieren, oder muss man NodeJS zwischenschalten?
 
Ich find Angular auf jeden Fall ansprechender als Backbone. Mit der starken Testsuite treibt es ja eigentlich auch TDD (Test-Driven-Development) voran, was meiner Meinung nach aus Entwickler und Testersicht nur Vorteile hat. Zudem entgeht man dem Problem, nicht den Anforderungen zu entsprechen.

Angular direkt mit Mongo funktioniert meiner Meinung nach nicht. Doch wird in dem Zusammenhang häufig vom MEAN Stack gesprochen (MongoDB, Express, Angular, Node) Wobei der Einarbeitungsaufwand bei "neuen" Technologien leider im Recht hoch ist.

Doch für die Zukunft denke ich, wird Angular durchaus ein Mitspieler sein. Als kleines Beispiel setzen unsere Frontententwickler seit ca. einem Monat auf Angular im Frontendbereich. (Das Backend bleibt aufgrund bestehender Applikationen wohl bei Java EE (Da bereue ich doch fast im falschen Team gelandet zu sein ;) )
 
Angular direkt mit Mongo funktioniert meiner Meinung nach nicht. Doch wird in dem Zusammenhang häufig vom MEAN Stack gesprochen (MongoDB, Express, Angular, Node) Wobei der Einarbeitungsaufwand bei "neuen" Technologien leider im Recht hoch ist
Zum Vergrößern anklicken....

Hatte ich befürchtet. Aus dem Grunde werde ich dann wohl erstmal auf Firebase als Backend setzen.
 
Zuletzt bearbeitet:
Um das Thema AngularJS noch mal hinsichtlich Lernressourcen aufzugreifen:

Empfehlenswert an Webressourcen ist http://www.thinkster.io/angularjs/GtaQ0oMGIl Allerdings verknüpft dieses Tutorial lediglich andere Tutorials. Wer allerdings etwas zusammenfassendes sucht, was auf dem aktuellen Stand und zudem noch fehlerfrei ist, muss länger graben. Ich hatte mir "Mastering Web Applications mit AngularJS" von Pawel Kozlowski, das "ng-book" von Ari Lerner und "AngularJS" von Brad Green /O'Reilly zugelegt, und die waren alle unbefriedigend.

Was ich hingegen empfehlen kann, ist das im April erschiene "Pro AngularJS" von Adam Freeman.
http://www.apress.com/9781430264484

Das ist vom Umfang her vergleichbar mit dem dicken Werk von Ari Lerner. Aber wesentlich besser strukturiert und Freeman kann auch gut verständlich erklären.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben