Aplicação do AngularJS
Agora é hora de criar um aplicativo da Web de página única AngularJS (SPA) real.
Exemplo de aplicação do AngularJS
Você aprendeu o suficiente sobre o AngularJS e agora pode começar a criar seu primeiro aplicativo AngularJS:
Contagem de palavras restante: 100
Explicação do aplicativo
Instância de AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </head> <body ng-ng-ng-ng-ng- " ng-Controller = "MyNotectrl"> <H2> minhas notas </h2> <textarea ng-model = "message" cols = "40" lobos = "10"> </sexttarea> <p> <butter ng-click = "salvar ()"> salvar </botão <butão> <pclick = "Clear)"> click = " ng-bind = "left ()"> </span> </p> <script src = "myNoteApp.js"> </script> <script src = "mynotectrl.js"> </script> </body> </html>
Resultados em execução:
Contagem de palavras restante: 100
Arquivo de aplicativo "myNoteApp.js":
var app = angular.module ("myNoteApp", []);
Arquivo do controlador "myNotectrl.js":
app.controller("myNoteCtrl", function($scope) { $scope.message = ""; $scope.left = function() {return 100 - $scope.message.length;}; $scope.clear = function() {$scope.message = "";}; $scope.save = function() {alert("Note Saved");};});O elemento <html> é o contêiner para aplicação angularjs: ng-app = "mynoteApp":
<html ng-app = "mynoteApp">
<div> é o escopo do controlador na página HTML: ng-controller = "myNoteCtrl":
<div ng-controller = "myNoteCtrl">
A Diretiva Ng-Modelo se liga <sexttarea> à mensagem da variável do controlador:
<textarea ng-model = "message" cols = "40" linhas = "10"> </sexttarea>
Dois eventos de clique ng chamam as funções do controlador CLEM () e SAVE ():
<Button ng-click = "Salvar ()"> Salvar </botão> <botão ng-click = "clear ()"> claro </butut>
A diretiva NG-Bind liga a função do controlador à esquerda () a <pan> para exibir os caracteres restantes:
Número de caracteres restantes: <span ng-bind = "left ()"> </span>
O arquivo da biblioteca de aplicativos precisa ser carregado depois que o AngularJS pode ser executado:
<script src = "myNoteApp.js"> </script> <script src = "mynotectrl.js"> </script>
Arquitetura de aplicativos AngularJS
O exemplo acima é um aplicativo Web de página única completa do AngularJS (SPA).
O elemento <html> contém o aplicativo AngularJS (ng-app =).
O elemento <div> define o escopo do controlador AngularJS (Ng-Controller =).
Em uma aplicação, ele pode ser composto de muitos controladores.
O arquivo de aplicativo (meu ... app.js) define o código do modelo de aplicativo.
Um ou mais arquivos controladores (meu ... ctrl.js) define o código do controlador.
Resumo - como funciona?
A diretiva NG-APP está localizada sob o elemento raiz do aplicativo.
Para aplicativo da Web de página única (SPA), a raiz do aplicativo geralmente é o elemento <html>.
Uma ou mais diretivas de controlador NG definem o controlador do aplicativo. Cada controlador tem seu próprio escopo :: elementos HTML definidos.
O AngularJS inicia automaticamente no evento HTML DOMCOntentLoaded. Se a diretiva NG-APP for encontrada, o AngularJS carregará o módulo na diretiva e compila NG-App como a raiz do aplicativo.
A raiz do aplicativo pode ser a página inteira ou uma pequena parte da página e, se for uma pequena parte, será compilada e executada mais rapidamente.
O exposto acima é uma explicação detalhada da aplicação simples dos angulares. Espero que possa ajudar a programação do AngularJS.