NA VRH
AngularJS
DOMOV HTML CSS JavaScript jQuery AngularJS PHP MySQL Python C# Sass WordPress
glave/headings

AngularJS - namestitev - spoznavanje Izrazi Moduli Knjižnica

AngularJS

AngularJS je framework (strukturni okvir) za razvoj spletnih aplikacij. Omogoča nam uporabo HTML kot predlogo, in razširi HTML sintakso, ter odstrani velik del kode. Uporablja drugačen pristop, ker, ko potrebuje določene specifikacije za aplikacijo, enostavno pokliče iz knjižnice, in prikaže v brskalniku. Pisal bom o direktivah, izrazih, filtrih, modulih in kontrolorjih, ter še dodal dogodke, obrazce, vnos uporabnika in še veliko drugega.

AngularJS

Najprej si moramo na sistem namestiti node.js. Potem gremo v nastavitve, kjer omogočimo vtičnika Angular in AngularJS.

Namestitev AngularJS v PHPStorm

Nameščati kaj posebnega ni potrebno, vse kar moramo narediti je, da v glavo <head> vpišemo naslednja script-a. Modul ngSanitize ponuja funkcionalnost za čiščenje HTML-ja.

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"><script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-sanitize.js"></script>
        

Bistvo AngularJS je, da razširi HTML spletno stran, podobno kot jQuery. HTML razširja s svojimi ng-app direktivami, ki definira AngularJS aplikacijo. Ogledali si bomo prvo direktivo ng-bind, ki veže HTML podatke za ogled.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="">
        <p>Vpiši nekaj v vhodno polje.</p>
        <p>Besedilo: <label><input type="text" ng-model="x"></label></p>
        <p ng-bind="x"></p>
    </div>
    </body>
    </html>
            

V primeru je videno, kako se AngularJS zažene samodejno, ko se spletna stran naloži, direktiva ng-app angular-ju pove, da je element <div> "lastnik" aplikacije. Vrednost vhodnega polja (ang. Input) na ime spremenljivke, veže direktiva ng-model, medtem ko direktiva ng-bind veže vsebino <p> elementa na ime spremenljivke aplikacije.

ng direktive:

  1. AngularJS podaljša HTML
  2. AngularJS razširi HTML z ng-direktivami
  3. ng-app določa angular aplikacijo
  4. ng-model veže vrednost HTML kontrol na podatke aplikacije
  5. ng-bind podatke aplikacij veže s HTML pogledom

Spoznavanje in prvi zagon AngularJS

Videli smo, da so direktive AngularJS HTML atributi s predpono ng, ki nastavi prvotne vrednosti spremenljivke.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    </head>
    <body>
    <div ng-app="" ng-init="ime='Pozdravljen '">
        <p><span ng-bind="ime"></span> svet!</p>
    </div>
    </body>
    </html>
            
  1. AngularJS moduli definirajo AngularJS aplikacije.
  2. AngularJS krmilniki nadzirajo AngularJS aplikacije.
  3. Direktiva ng-app določa aplikacijo, direktiva ng-controller določa regulator.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

        <style>
            table tbody th {
                text-align: left;
            }
        </style>
    </head>
    <body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <table>
            <tbody>
            <tr>
                <th>Prvi del:</th>
                <td>
                    <label><input type="text" ng-model="prvi"></label>
                </td>
            </tr>
            <tr>
                <th>Drugi del:</th>
                <td>
                    <label><input type="text" ng-model="drugi"></label>
                </td>
            </tr>
            <tr>
                <th>Tretji del:</th>
                <td>
                    <label><input type="text" ng-model="tretji"></label>
                </td>
            </tr>
            <tr>
                <th>Četrti del:</th>
                <td>
                    <label><input type="text" ng-model="cetrti"></label>
                </td>
            </tr>
            </tbody>
        </table><br>

        Povezani deli: {{tretji + " " + prvi + " " + cetrti + " " + drugi}}
    </div>

    <script>
        var app = angular.module('myApp', [])
        app.controller('myCtrl', function ($scope) {
            $scope.prvi = "v"
            $scope.drugi = "vadnici!"
            $scope.tretji = "Dobrodošli"
            $scope.cetrti = "AngularJS"
        })
    </script>
    </body>
    </html>
            

AngularJS moduli definirajo aplikacije:

    var app = angular.module('myApp', []);
    

AngularJS kontrolorji, kontrolirajo aplikacije:

    app.controller('myCtrl', function ($scope) {
    $scope.prvi = "ime";
    $scope.drugi = "priimek";
    });