Por padrão, o CronApp utiliza a página de login no sistema (projetos web com autenticação) como página inicial, porém existem projetos que necessitam de páginas que sejam abertas ao público e tenham um link para permitir o usuário realizar seu cadastro e/ou logar. Esse é um procedimento bem simples no CronApp.

Pré-requisitos

Antes de começar a seguir os passos do tutorial é preciso ter certeza de que se tem um ambiente minimamente preparado para reproduzir o exemplo. Abaixo estão os requisitos principais.

Requisitos:

Projeto do tipo mobile ou web criado. Caso haja dúvidas de como criar esse tipo de projeto acesse o link ( Criar novo projeto );
A Permissão de Segurança deverá está configurado corretamente. (Configuração da Permissão de Segurança [Backup])

Passo a passo

As páginas de um projeto CronApp ficam dentro do diretório vIew ( localizada em "Código Fonte / Principal / Código Fonte Cliente /") e nele encontramos pastas com restrições de acesso, como a "logged" que só permitem o acesso após realizado o login. Vamos criar uma pasta dentro de view com o nome "public" (o nome dos arquivos são case-sensitive, ou seja, letras maiúsculas e minúsculas fazem diferença). (Figura 1)

Apesar da pasta "public" não existir dentro dentro do diretório view, ela já é pré configurada em "Permissão de Segurança" do sistema.

É possível criar outras pastas e configurá-las com outras permissões. Veja mais em Configuração da Permissão de Segurança [Backup].

Figura 1 - Criando o Diretório pré configurado "public"

Adicione a página inicial dentro da pasta "public". nesse exemplo daremos o nome de paginaInicial.view.html. (Figura 2)

Figura 2 - Página inicial criada dentro da pasta "public"

Lembre-se de adicionar na página um botão ou link de acesso ao login, referenciando-o para "#/login".

Redirecionando o acesso inicial

Abra o arquivo customStateProvider.js (localizada em "Código Fonte / Principal / Código Fonte Cliente / js /") e retire o comentário ( // ) de toda a função "window.customStateProvider = function($stateProvider)" (linha 4 para baixo). Para facilitar, selecione todo o código e utilize o atalho para comentar / descomentar: CTRL+;

O arquivo customStateProvider.js é responsável pelo controle de Rotas customizadas na IDE.

Altere o trecho ".state('login', {", modificando o controller de "LoginController" para "PageController" e o templateUrl de "views/login.view.html" para "views/public/paginaInicial.view.html" (ou o nome da pasta criada). (Figura 3 e 4)

Figura 5 e 6 - Antes e depois da alteração do state('main')

Após as alterações, o arquivo customStateProvider.js deverá ficar como no código abaixo:

/*
To add your route in the angular, uncomment the code and use this structure
*/
window.customStateProvider = function($stateProvider) {
  $stateProvider
    .state('login', {
      url: "",
      controller: 'PageController',
      templateUrl: 'views/public/paginaInicial.view.html'
    })
    .state('social', {
      url: "/connected",
      controller: 'SocialController',
      templateUrl: 'views/login.view.html'
    })
    .state('socialError', {
      url: "/notconnected",
      controller: 'SocialController',
      templateUrl: 'views/login.view.html'
    })
    .state('main', {
      url: "/login",
      controller: 'LoginController', /// Tem que está relacionado com o controller aqui para funcionar, senão dará erro. Avisar no tuto...
      templateUrl: 'views/login.view.html'
    })
    .state('publicRoot', {
      url: "/public/{name:.*}",
      controller: 'PageController',
      templateUrl: function(urlattr) {
        return 'views/public/' + urlattr.name + '.view.html';
      }
    })
    .state('public', {
      url: "/home/public",
      controller: 'PublicController',
      templateUrl: function(urlattr) {
        return 'views/public/home.view.html';
      }
    })
    .state('public.pages', {
      url: "/{name:.*}",
      controller: 'PageController',
      templateUrl: function(urlattr) {
        return 'views/public/' + urlattr.name + '.view.html';
      }
    })
    .state('home', {
      url: "/home",
      controller: 'HomeController',
      templateUrl: 'views/logged/home.view.html'
    })
    .state('home.pages', {
      url: "/{name:.*}",
      controller: 'PageController',
      templateUrl: function(urlattr) {
        return 'views/' + urlattr.name + '.view.html';
      }
    })
    .state('404', {
      url: "/error/404",
      controller: 'PageController',
      templateUrl: function(urlattr) {
        return 'views/error/404.view.html';
      }
    })
    .state('403', {
      url: "/error/403",
      controller: 'PageController',
      templateUrl: function(urlattr) {
        return 'views/error/403.view.html';
      }
    });
}

Testando

Salve os arquivos alterados e execute a aplicação (F9) ou Debug (F11). Após abrir a aplicação, o sistema deverá direcionar a página Inicial que criamos, como mostrado na figura 7.

Figura 7 - Página inicial sem a necessidade de logar no sistema