none
Iniciando com Angular RRS feed

  • Pergunta

  • Bom dia galera, 

    Bom estou fazendo um treinamento em angular no youtube do nosso amigo Macoratti muito bom estou vendo o módulo 10 ngRoute fiz o como tudo com está nesse link mas a rota não funciona não abre nada na url muda maism mas não chama a rota que eu criei olha codigo;

    default.html

    <!DOCTYPE html>
    <html ng-app="myapp">
        <head>
            <title>AngularJS - ngRoute</title>
    
            <link href="Content/bootstrap.css" rel="stylesheet" />
    
            <script src="Scripts/angular.js"></script>
            <script src="Scripts/angular-route.js"></script>
            <script src="js/myapp.js"></script>
        </head>
        <body>
            <div class="container">
                <header>
                    <nav class="navbar navbar-default  navbar-inverse">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="#">CJProfile.net</a>
                            </div>
                            <div>
                                <ul class="nav navbar-nav">
                                    <li><a href="#/">Home</a></li>
                                    <li><a href="#/Artigo">Artigo</a></li>
                                    <li><a href="#/Sobre">Sobre</a></li>
                                    <li><a href="#/Contato">Contato</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                </header>
    
                <section>
                    <div ng-view><!--Conteudo--></div>
                </section>
    
                <hr />
    
                <footer><h5 style="text-align:center">CJProfiles.net - 2017</h5></footer>
            </div>
        </body>
    </html>
    

    myapp.js

    /// <reference path="C:\estudos\cursoangular\Angular_ConceitoBasico10\Angular_ConceitoBasico10\Scripts/angular.js" />
    /// <reference path="C:\estudos\cursoangular\Angular_ConceitoBasico10\Angular_ConceitoBasico10\Scripts/angular-route.js" />
    
    var app = angular.module('myapp', ['ngRoute']);
    
    // Definindo Rotas
    app.config(function ($routeProvider) {
        $routeProvider
            .when("/", { templateUrl: "/views/home.html" })
            .when("/artigo", { templateUrl: "/views/artigo.html" })
            .when("/sobre", { templateUrl: "/views/sobre.html" })
            .when("/contato", { templateUrl: "/views/contato.html" })
    });

    terça-feira, 6 de junho de 2017 14:15

Respostas

  • Funcinou achei o problema era no link olha como ficou 

    <div>
        <ul class="nav navbar-nav">
            <li><a href="#/!">Home</a></li>
            <li><a href="#!Artigos">Artigo</a></li>
            <li><a href="#!sobre">Sobre</a></li>
            <li><a href="#!Contato">Contato</a></li>
        </ul>
    </div

    • Marcado como Resposta CLAUDIO JOSE terça-feira, 6 de junho de 2017 20:36
    terça-feira, 6 de junho de 2017 20:36

Todas as Respostas

  • Boa tarde CLAUDIO JOSE,

    Antes do seu RouteProvider, faltou o LocaltionProvider

    scotchApp.config(['$locationProvider', function ($locationProvider) {
        $locationProvider.hashPrefix('');
    }]);


    Att., Roberto Alves

    Por favor, lembre-se de Marcar como Resposta as postagens que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    terça-feira, 6 de junho de 2017 19:26
  • Boa tarde CLAUDIO JOSE,

    Antes do seu RouteProvider, faltou o LocaltionProvider

    scotchApp.config(['$locationProvider', function ($locationProvider) {
        $locationProvider.hashPrefix('');
    }]);


    Att., Roberto Alves

    Por favor, lembre-se de Marcar como Resposta as postagens que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    Então cara fiquei perdido agora no exemplo ele não usa isso faz do jeito que eu coloquei e funciona eu procurei por exemplo no site dele nenhum ele coloca  $locationProvider
    terça-feira, 6 de junho de 2017 20:29
  • CLAUDIO JOSE,

    Você nem está usando a documentação oficial para implementar o angular.

    $locationProvider

    "Use the $locationProvider to configure how the application deep linking paths are stored".

    A documentação diz que esse é o caminho para linkar onde os caminhos estão presentes.

    Aqui um exemplo de utlização:

    <div>
        <a href="/">Home</a> | 
        <a href="/another">another</a> | 
        <a href="/tags/1">tags/1</a>
    </div>
    <div ng-view></div>
    
    
    app.config(function($locationProvider, $routeProvider) {
      $locationProvider.html5Mode(true);
      $routeProvider
        .when('/', {
          templateUrl: '/partials/template1.html', 
          controller: 'ctrl1'
        })
        .when('/tags/:tagId', {
          templateUrl: '/partials/template2.html', 
          controller:  'ctrl2'
        })
        .when('/another', {
          templateUrl: '/partials/template1.html', 
          controller:  'ctrl1'
        })
        .otherwise({ redirectTo: '/' });
    });



    Att., Roberto Alves

    Por favor, lembre-se de Marcar como Resposta as postagens que resolveram o seu problema. Essa é uma maneira comum de reconhecer aqueles que o ajudaram e fazer com que seja mais fácil para os outros visitantes encontrarem a resolução mais tarde.

    terça-feira, 6 de junho de 2017 20:35
  • Funcinou achei o problema era no link olha como ficou 

    <div>
        <ul class="nav navbar-nav">
            <li><a href="#/!">Home</a></li>
            <li><a href="#!Artigos">Artigo</a></li>
            <li><a href="#!sobre">Sobre</a></li>
            <li><a href="#!Contato">Contato</a></li>
        </ul>
    </div

    • Marcado como Resposta CLAUDIO JOSE terça-feira, 6 de junho de 2017 20:36
    terça-feira, 6 de junho de 2017 20:36