A melhor maneira de ver o poder de um aplicativo AngularJS é criar seu primeiro aplicativo de programa básico "Hello World" no Angular.JS.
Existem muitos ambientes de desenvolvimento integrados que você pode usar para o desenvolvimento do AngularJS, alguns dos mais populares são mencionados abaixo. Em nosso exemplo, estamos usando o Webstorm como nosso IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Estúdio visual
Olá, mundo, AngularJS
O exemplo abaixo mostra a maneira mais fácil de criar seu primeiro aplicativo "Hello world" no AngularJS.
Guru99 {{message}}
Explicação do código:
- A palavra-chave " ng-app " é usada para denotar que este aplicativo deve ser considerado um aplicativo angular js. Qualquer nome pode ser dado a este aplicativo.
- O controlador é o que é usado para manter a lógica de negócios. No tag h1, queremos acessar o controlador, que terá a lógica de exibir "HelloWorld", então podemos dizer que neste tag queremos acessar o controlador chamado "HelloWorldCtrl".
- Estamos usando uma variável de membro chamada "mensagem" que nada mais é do que um espaço reservado para exibir a mensagem "Hello World".
- A "tag de script" é usada para fazer referência ao script angular.js que possui todas as funcionalidades necessárias para o angular js. Sem essa referência, se tentarmos usar quaisquer funções AngularJS, elas não funcionarão.
- "Controlador" é o lugar onde estamos realmente criando nossa lógica de negócios, que é nosso controlador. As especificidades de cada palavra-chave serão explicadas nos capítulos subsequentes. É importante notar que estamos definindo um método de controlador chamado 'HelloWorldCtrl' que está sendo referenciado na Etapa 2.
- Estamos criando uma "função" que será chamada quando nosso código chamar este controlador. O objeto $ scope é um objeto especial em AngularJS, que é um objeto global usado em Angular.js. O objeto $ scope é usado para gerenciar os dados entre o controlador e a visualização.
- Estamos criando uma variável de membro chamada "mensagem", atribuindo a ela o valor de "HelloWorld" e anexando a variável de membro ao objeto de escopo.
NOTA : A diretiva ng-controller é uma palavra-chave definida no AngularJS (etapa 2) e é usada para definir controladores em sua aplicação. Aqui em nosso aplicativo, usamos a palavra-chave ng-controller para definir um controlador chamado 'HelloWorldCtrl'. A lógica real para o controlador será criada na (etapa 5).
Se o comando for executado com sucesso, a seguinte Saída será mostrada quando você executar seu código no navegador.
Resultado:
A mensagem 'Hello World' será exibida.
