Latest web development tutorials

AngularJS Applications

Agora é o momento para criar um verdadeiro AngularJS aplicações Web de uma única página (página única aplicação web, SPA) a.

AngularJS exemplos de aplicação

Você aprendeu bastante conhecimento sobre AngularJS, agora você pode começar a criar seu primeiro aplicativo AngularJS:

minhas notas



Restante Contagem de palavra:100


Explicar a aplicação

AngularJS exemplos

<Html ng-app = "myNoteApp ">
<Head>
<Charset Meta = "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> minhas notas </ h2>

<P> <textarea ng-modelo = "mensagem" cols = linhas "40" = "10"> </ textarea> </ p>

<P>
<Button ng clique com o botão = "salvar ()"> Salvar </ button>
<Button ng-clique = "clear ()"> Limpar </ button>
</ P>

<P> Número de caracteres à esquerda: <span ng-bind = "left ()"> </ span> </ p>

</ Div>

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

</ Body>
</ Html>

tente »

Arquivos do aplicativo "myNoteApp.js":

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

Arquivo do controlador "myNoteCtrl.js":

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

<Html> elemento é a aplicação AngularJS: NG-app = container "myNoteApp":

<Html ng-app = "myNoteApp ">

<div> HTML páginas no controlador: NG-controller = "myNoteCtrl" escopo:

<Div ng-controller = "myNoteCtrl ">

directiva ng-modelo ligamento <textarea> para a mensagem variável controlador:

<Textarea ng-modelo = "mensagem " cols = linhas "40" = "10"> </ textarea>

Dois eventos ng-click chama a função de controlador de clear () e save ():

<Button ng clique com o botão = "salvar ()"> Salvar </ button>
<Button ng-clique = "clear ()"> Limpar </ button>

comando ng-bind para vincular a esquerda função de controlador () para <span>, é usado para exibir os caracteres restantes:

Número de caracteres à esquerda: <span ng -bind = "left ()"> </ span>

Aplicações arquivos de biblioteca necessário para executar após AngularJS carregamento:

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

AngularJS Application Architecture

Exemplos do acima é uma AngularJS completos de páginas únicas aplicações Web (aplicação web única página, SPA).

<Html> elemento contém aplicativo AngularJS (ng-app =).

<Div> elemento define o âmbito de aplicação (ng-controller =) AngularJS controlador.

As aplicações podem ser feitas de uma grande quantidade de controladores.

O arquivo do aplicativo (o meu ... app.js) define a aplicação do código do modelo.

Um ou mais arquivo de controladores (meu ... Ctrl.js) define o código do controlador.

Resumo - Como funciona?

directiva ng-app no ​​elemento raiz do aplicativo.

Para aplicações de uma única página da Web (aplicação web única página, SPA), aplicações de raiz normalmente elemento <html>.

Um ou mais directiva ng-controlador define o controlador de aplicação. Cada controlador tem elementos de sua própria definição do escopo HTML ::.

AngularJS iniciar automaticamente no evento HTML DOMContentLoaded. Se você encontrar directiva ng app, AngularJS módulo de instruções de carga e ng-app como a raiz do aplicativo para ser compilado.

aplicativo raiz pode ser uma pequena parte de toda a página ou páginas, se é uma pequena parte será compilação e execução mais rápida.