Latest web development tutorials

angularjs Applications

Teraz jest czas, aby stworzyć prawdziwe angularjs single-page Aplikacje webowe (pojedyncza strona aplikacja internetowa, SPA) a.

Angularjs przykłady zastosowań

Nauczyłeś wystarczającej wiedzy na temat angularjs, można rozpocząć tworzenie pierwszej aplikacji angularjs:

Moje notatki



Pozostała Word Count:100


Wyjaśnić aplikację

angularjs przykłady

<Html ng-app = "myNoteApp ">
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-controller = "myNoteCtrl ">

<H2> moje notatki </ h2>

<P> <textarea ng model = "message" cols = "40" rows = "10"> </ textarea> </ p>

<P>
<Przycisk ng-click = "save ()"> Zapisz </ button>
<Przycisk ng-click = "clear ()"> Usuń </ button>
</ P>

<P> Liczba znaków lewej: <span ng-wiążą = "left ()"> </ span> </ p>

</ Div>

<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>

</ Body>
</ Html>

Spróbuj »

Pliki aplikacji "myNoteApp.js":

var app = angular.module ( "myNoteApp", []);

Kontroler plików "myNoteCtrl.js":

app.controller ( "myNoteCtrl", function ($ zakres) {
$ Scope.message = "";
$ Scope.left = function () {return 100 - $ scope.message.length;};
$ Scope.clear = function () {$ scope.message = "";};
$ Scope.save = function () {alert ( "Uwaga zbawieni");};
});

<Html> Element jest angularjs zastosowanie: NG-app = "myNoteApp" pojemnik:

<Html ng-app = "myNoteApp ">

Strony <div> HTML w kontrolerze: NG-controller = "myNoteCtrl" zakres:

<Div ng-controller = "myNoteCtrl ">

Dyrektywa ng model wiążą <textarea> do wiadomości zmiennej kontrolera:

<textarea ng-Model = "message " cols = "40" rows = "10"> </ textarea>

Dwa ng kliknij zdarzenie wywołuje funkcję kontrolera clear () i save ():

<Przycisk ng-click = "save ()"> Zapisz </ button>
<Przycisk ng-click = "clear ()"> Usuń </ button>

Komenda ng-wiążą się wiązać z lewej funkcji kontrolera () <span>, jest używany do wyświetlania pozostałe znaki:

Ilość znaków w lewo: <ng rozpiętość -bind = "left ()"> </ span>

Aplikacje plików bibliotek potrzebnych do wykonania po angularjs załadunku:

<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>

Angularjs Application Architecture

Przykłady powyższe jest kompletnym angularjs single-page Aplikacje webowe (jedna strona aplikacji internetowych, SPA).

<Html> element zawiera aplikacji angularjs (ng-app =).

<Div> określa zakres (ng-controller =) angularjs kontrolera.

Aplikacje mogą być wykonane w wielu kontrolerów.

Plik aplikacji (mój ... App.js) definiuje stosowanie kodu modelu.

Jeden lub więcej plików kontrolery (mój ... Ctrl.js) definiuje kod kontrolera.

Podsumowanie - Jak to działa?

Dyrektywa ng-app w elemencie głównym aplikacji.

Dla pojedynczej strony aplikacji internetowych (pojedyncza strona aplikacji internetowej, SPA), aplikacje korzeniowych zwykle <html> elementu.

Jeden lub więcej Dyrektywa ng kontroler definiuje kontroler aplikacji. Każdy kontroler posiada elementy HTML :: swojej własnej definicji zakresu.

Angularjs rozpocznie się automatycznie w przypadku HTML DOMContentLoaded. Jeśli okaże się, dyrektywę ng-app, angularjs moduł instrukcji obciążenia i NG-app jako root aplikacji, które są opracowywane.

Aplikacja Korzeń może być niewielka część całej strony lub stron, jeśli jest to niewielka część będzie szybsza kompilacja i wykonanie.