UI móvel angular - configuração do projeto

Este capítulo trabalhará na configuração do projeto. Faremos uso dessa configuração para trabalhar com exemplos no restante dos capítulos.

A configuração do projeto será feita usando o npm, pois é fácil instalar quaisquer pacotes necessários.

Abra seu prompt de comando e crie um diretório chamado uiformobile / e entre no diretório usando o comando cd.

Agora execute o seguinte comando -

npm init

O comando npm init irá inicializar o projeto -

Ele criará o package.json conforme mostrado abaixo -

{
   "name": "uiformobile",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

Agora execute o seguinte comando para instalar a interface do usuário móvel.

npm install --save mobile-angular-ui

Para trabalhar com a UI Angular móvel, precisamos do AngularJS. Vamos instalar isso usando o seguinte comando -

npm install --save-dev angular

Também precisamos da rota angular para trabalhar com roteamento. Para instalá-lo, o comando é -

npm install --save-dev angular-route

Precisaríamos de um servidor que executasse nosso aplicativo no navegador. Faremos uso de expresso.

O comando para instalar o Express é -

npm install --save-dev express

Crie um arquivo server.js dentro da pasta raiz. Este arquivo terá o comando expresso para iniciar o servidor.

Aqui estão os detalhes de server.js -

const express=require('express')
const app=express();
const port=3000;
var path=require("path");
app.use("/node_modules", express.static("D:/uiformobile/node_modules"));
app.use("/src", express.static("D:/uiformobile/src/"));
app.use("/src/js", express.static("D:/uiformobile/src/js"));
app.all("/*", function (req, res, next) {
   res.sendFile("index.html", { root: "D:/uiformobile/" });
});
app.listen(port, () => console.log('Starting your Mobile Angular App on port ${port}!'))

Para iniciar o servidor, use o seguinte comando -

node server.js.

O servidor iniciará na porta 3000. Você pode usar http://localhost:3000/ para ver a IU em seu navegador.

A estrutura final da pasta é mostrada abaixo -

A pasta node_modules / tem todos os pacotes instalados para mobile_angular_ui, angularjs e angular-route.

o src/pasta terá os arquivos HTML e js necessários para o desenvolvimento da IU. O index.html é o ponto inicial que será visto quando você clicarhttp://localhost:3000/.

Agora os pacotes necessários estão instalados. Vamos agora falar sobre os arquivos css e js importantes de que precisamos. Embora a estrutura seja destinada a aplicativos móveis, também pode ser usada para aplicativos de desktop.

A seguir estão os arquivos css importantes que devem ser incluídos em seus arquivos .html.

Sr. Não	Descrição do arquivo
1	mobile-angular-ui-base.css Este arquivo css é destinado a dispositivos móveis e tablets.
2	mobile-angular-ui-desktop.css Arquivo css responsivo destinado ao uso em desktops e dispositivos móveis.
3	mobile-angular-ui-hover.css Isso tem regras css para pairar.
4	angular.min.js Arquivo AngularJS de que precisamos para iniciar o projeto.
5	mobile-angular-ui.min.js Este é o arquivo js do AngularJS móvel que precisamos usar no módulo de dependência no módulo AngularJS. Este é o módulo principal.
6	angular-route.min.js Este é um arquivo de rota AngularJS usado para roteamento.

Todos os arquivos acima estão presentes dentro node_modules/. Terminamos a configuração do projeto, agora vamos fazer uso deste projeto no próximo capítulo para desenvolver nosso primeiro aplicativo.