AngularJS - Views

O AngularJS suporta aplicativos de single page por meio de várias views em uma única página. Para isso, o AngularJS fornece as tags ng-view e ng-template e o service $routeProvider.

ng-view

A tag ng-view simplesmente cria um espaço reservado onde uma view correspondente (html ou ng-template) pode ser colocada com base de acordo com a configuração.

Uso

Definir um div com ng-view dentro do módulo principal.

ng-template
A tag ng-template é usada para criar uma view html usando a tag script. Ele contém o atributo "id" que é usado pelo $ routeProvider para mapear uma visualização com um controlador.

Uso
Defina um bloco de script com o tipo como ng-template dentro do módulo principal.

$routeProvider

É uma função sob a configuração do módulo mainApp usando a chave como '$routeProvider'.

Uso

Defina um bloco de script com o módulo principal configurando o roteamento.

• $routeProvider quando define um url "/ addStudent", este é mapeado para "addStudent.htm". O "addStudent.htm" deve estar presente no mesmo caminho que a página html principal. Se a página htm não estiver definida, então ng-template será usado com o id = "addStudent.htm". Nós usamos o ng-template. 

•  "otherwise" é usado para definir a view padrão.

• "controller" define o controller da view.

Exemplo

O exemplo a seguir mostra as tags usadas acima.

testAngularJS.htm

Tela Gerada

Abra o arquivo testAngularJS.htm em um browser.

AngularJS - AJAX

O AngularJS possui o comando $https: Funciona como um service para ler dados do servidor. O servidor faz uma chamada ao banco de dados para obter os registros desejados. O framework precisa de dados no formato JSON. Quando os dados estiverem prontos, o comando $https: pode ser usado para obter os dados do servidor da seguinte maneira:

Aqui, o arquivo data.txt contém os registros dos alunos. O service $https: faz uma chamada com ajax definindo os dados dos alunos. A model de alunos pode ser usada para criar as tabelas em HTML.

SAÍDA:

Para rodar, é preciso colocar os arquivos teste_angularjs_ajax.htm e data.txt em um servidor web. Abra o arquivo teste_angularjs_ajax.htm usando a URL do seu servidor em um navegador da web.