Latest web development tutorials

angularjs moduł

Moduł definiuje aplikację.

Moduł jest pojemnik w różnych aplikacji.

Moduł Controller jest aplikacją kontenera.

Kontroler zazwyczaj należą do modułu.


Utwórz moduł

Można utworzyć moduł przez angularjs z funkcjąangular.module:

<Div ng-app = "myApp "> ... </ div>

<Script>

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

</ Script>

Parametr "MojaApl" odnosi się do wykonania elementów HTML aplikacji.

Teraz można dodania kontrolera instrukcje, filtry, itp aplikacji angularjs.


Dodaj Controller

Można użyć instrukcjing-kontrolera, aby dodać aplikacje Kontroler:

angularjs przykłady

<Div ng-app = "myApp " NG-controller = "myCtrl" >
{{FirstName + "" + lastName }}
</ Div>

<Script>

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

app.controller ( "myCtrl", function ( $ zakres) {
$ Scope.firstName = "John";
$ Scope.lastName = "Kowalski";
});

</ Script>

Spróbuj »

Można angularjs Kontrolery uzyskania dalszych informacji na temat sekcji kontrolera.


Dodaj instrukcjami

Angularjs oferuje wiele wbudowanych poleceń, można z nich korzystać, aby dodać funkcjonalność aplikacji.

Pełne instrukcje można znaleźć w treści angularjs podręcznika .

Ponadto, można użyć modułu do dodawania własnych aplikacji instrukcji:

angularjs przykłady

<Div ng-app = "myApp " w3big dyrektywą> </ div>

<Script>

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

app.directive ( "w3bigDirective", function ( ) {
powrót {
Szablon: "I stworzył konstruktora instrukcji!"
};
});
</ Script>

Spróbuj »

Można angularjs dyrektyw uzyskania dalszych informacji na temat sekcji instrukcji.


Moduły i kontrolery zawarte w pliku JS

Zazwyczaj angularjs modułu aplikacji i sterownik jest zawarty w pliku JavaScript.

W poniższych przykładach, "myApp.js" zawiera definicji stosowanych modułów programu "myCtrl.js" plik zawiera kontroler:

angularjs przykłady

<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>

<Div ng-app = "myApp " NG-controller = "myCtrl">
{{FirstName + "" + lastName }}
</ Div>

<Script src = "myApp.js"> </ script>
<Script src = "myCtrl.js"> </ script>

</ Body>
</ Html>

Spróbuj »

myApp.js

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

uwaga W definicji modułu [] Parametr ten jest stosowany w celu określenia zależności modułu.
Nawiasy [] wskazuje, że moduł nie opierają się, czy istnieje zależność, to zależy od nazwą modułu w nawiasach.

myCtrl.js

app.controller( "myCtrl" , function($scope) {
    $scope.firstName = "John";
    $scope.lastName= "Doe";
});

Działanie będzie wpływać na globalną przestrzeń nazw

JavaScript powinny unikać korzystania z funkcji globalnych. Ponieważ mogą one być łatwo pokryte innym pliku skryptu.

Angularjs zakresu modułu tak, aby wszystkie funkcje w module, aby uniknąć tego problemu.


Po załadowaniu biblioteki?

uwaga W naszym przykładzie, wszystkie biblioteki dokumentów angularjs HTML są ładowane w głowę.

Dla aplikacji HTML jest zalecane dla wszystkich skryptów są umieszczone w dolnej części elementu <body>.

Zwiększy to prędkość ładowania strony, ponieważ HTML nie podlega załadować skryptu do załadowania.

W naszym przykładzie wielu angularjs, widać angularjs biblioteka jest załadowany do obszaru <head> dokumentu.

W naszym przykładzie angularjs w sekcji <head> element jest załadowany, ponieważ wywołanie angular.module być wykonywane wyłącznie po zakończeniu ładowania biblioteki.

Innym rozwiązaniem jest załadowanie angularjs biblioteki elementu <body>, ale muszą być umieszczone w przedniej części skryptu angularjs:

angularjs przykłady

<! DOCTYPE html>
<Html>
<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-app = "myApp " NG-controller = "myCtrl">
{{FirstName + "" + lastName }}
</ Div>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "myCtrl", function ($ zakres) {
$ Scope.firstName = "John";
$ Scope.lastName = "Kowalski";
});
</ Script>

</ Body>
</ Html>

Spróbuj »