Angular $ routeProvider using div ng-view / div

Question

Angular $ routeProvider using div ng-view / div

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

Galera,

I'm following the ng-book of angular book, and to make a SPA, I'm 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 contents of the home.html page. I already searched several pages, and even angular-route.js does not work. I'm using the Chrome Browser.

angularjs angular-routes ngroute

asked by anonymous 03.08.2016 / 03:48

2 answers

Problem with Redirect JSF 2 How can I access a Project path (URL) written in Laravel from another project (URL) that does not use Laravel?

score 1 · Answer 1

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

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

And in your controller you are re-creating "myApp", it should look like this:

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

score -1 · Answer 2

I think the ng-app and ng-controller were missing from the index. You only declare the dependencies in the first file that declares the angular application. in case only in main will have angular.module("myApp",[]) (brackets)