Angular $routeProvider using <div ng-view></div>

Asked

Viewed 405 times

0

Galley,

I am following the book ng-book of angular, and to make a SPA, I am using the following structure:

 - app
   - controller
       controller.js
   - js
       main.js
   - node_modules (com os arquivos de jquery, bootstrap e angular)
   - templates
       home.html
 index.html

index.html

<!DOCTYPE html>
<html>
  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Título  -->
    <title>Treinando Angular</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">    

  </head>

  <body ng-app="myApp">

    <div ng-view></div>

    <!-- Jquery  -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap  -->
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Angular  -->
    <script src="node_modules/angular/angular.min.js"></script>
     <!-- Angular Route -->
    <script src="node_modules/angular-route/angular-route.min.js"></script>    
    <!-- Main  -->
    <script src="js/main.js"></script>   
    <!--Controller  -->
    <script src="controller/controller.js"></script>
  </body>
</html>

main.js

var app = angular.module("myApp", []);

app.config(function($routeProvider){
    $routeProvider
        .when("/", {
            templateUrl: "templates/home.html",
            controller: "HomeController"
        })
        .otherwise({ redirectTo: '/' });
});

controller js.

var app = angular.module("myApp", [ ]);

app.controller("HomeController", function(){
});

With this, my index.html does not render in the ng-view location, the content of the home page.html. Because I have already searched several pages, and even with angular-route.js does not work. I am using the Browser "Chrome".

angularjs angular-routes ngroute

  • How is your home.html?

2 answers

1

You are not calling the "ngRoute" in your main.js

var app = angular.module("myApp", ['ngRoute']);

and in your controller you are creating "myapp" again, it would have to be like this:

var app = angular.module("myApp");

  • Tb used so and is not working.

  • @Andersonmartins Are you using the Html 5 routes? If you do need to configure Locationprovider html5mode, otherwise you will need to pass the "#" in the url’s

-1

I think we missed the ng-app and the ng-controller on the index. You only declare the dependencies in the first file declaring the angular application. in the case only in the main will have the angular.module("myApp",[]) (Square brackets)

  • I believe that as I want to make an SAP, I would not need to use ng-controller and ng-app, it is declared in the body tag, index.html.

Browser other questions tagged angularjs angular-routes ngroute

You are not signed in. Login or sign up in order to post.