Angularjs - directive and view are not working properly

Asked

Viewed 358 times

0

I’m making a small application for my internship, for studies and everything, but even if I follow all the steps, there’s something wrong, I can’t make the angular (version 1) render the view or the directive and never return an error. I’ve looked at the whole code, but I couldn’t notice any deficiency in what I did;

Follow the codes below:

Index.html

<!DOCTYPE html>
<html lang="pt-br" ng-app="rdi_music">

<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Carregando CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-overloads.css">

<!--Carregando os scripts-->
<!-- App core -->
<script src="js/core/angular.min.js"></script>
<script src="js/core/angular-animate.min.js"></script>
<script src="js/core/angular-sanitize.min.js"></script>
<script src="js/core/angular-route.min.js"></script>
<script src="js/core/angular-resource.min.js"></script>
<script src="js/ui/ui-bootstrap-tpls-2.5.0.min.js"></script>

<!-- My Modules -->
<script src="js/main.js"></script>
<script src="js/controllers/index-controller.js"></script>
<script src="js/controllers/musicas-controller.js"></script>

<!-- My Directives -->
<script src="js/directives/header.js"></script>

<title>Music</title>
</head>

<body>

<header-menu></header-menu>

<div class="container">
    <ng-view></ng-view>
</div>
</body>

</html>

main.js

angular.module('rdi_music', ['ngRoute', 'ngResource', 'musicasController', 
'header'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);

$routeProvider.when('/musicas',{
    templateUrl: 'views/musicas/index.html',
    controller: 'musicasController'
});
});

index-controller.js

angular.module('rdi_music', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('indexController',function($scope){
$scope.isNavCollapsed = true;
$scope.isCollapsed = true;
$scope.isCollapsedHorizontal = true;
});

musicas-controller.js

angular.module('rdi_music', ['ui.bootstrap'])
.controller('musicasController', function($scope){

});

header js.

angular.module('header', ['ui.bootstrap'])
.directive('headerMenu', function(){
var ddo = {
    restrict: "AE",
    templateUrl: "views/directives/header.html"
};

return ddo;
});
angularjs angularjs-directives angular-ui-bootstrap angular-views

  • musica-controller.js should be musicas-controller.js No? Which error in Devtools console?

  • No, that’s correct, only here in the post that I made a mistake, I will edit, but precisely, there is no mistake.

  • Something that can help you is to put the word debugger; in your js, and open the Devtools, ai Voce ve the way your application is doing. (I’m not sure but I think the order of the files . js influence..

1 answer

0


It lacked some knowledge about how Angularjs works in the declaration of Getters and Setter modules. But you almost got there!

Let’s have a brief explanation of how module creation scheme works.

Criação Setter:

Every time you declare a module you need to pass the list of dependencies to it, even if it has no external dependency. Ex:

angular.module( 'rdi_music', [] );

within "[]" you insert the comma separated dependencies, similar as you did in the file main.js, but in this case there is an error, because you are passing (or trying to pass) the controller "musicasController" as a dependency of this module.

The correct code snippet for the main.js file is as follows::

angular.module( 'rdi_music', [ 'ngRoute', 'ngResource', 'ui.bootstrap', 'header' ] )
  .config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider.when('/musicas', {
      templateUrl: 'views/musicas/index.html',
      controller: 'musicasController'
    });
  });

Creating a Getter

Every time you already have a module declared and want to add functionality to it, you should not pass the list of dependencies to this module, doing this Angularjs will automatically understand that it is a "Setter" and will not attempt to create a new module.

Syntax:

angular.module( 'rdi_music' )... // restante do código

So knowing that we already have the "rdi_music" module declared in the main.js file, the correct syntax of the index-controller.js and musicas-controller.js files should be:

angular.module('rdi_music')
  .controller('indexController', function($scope) {
    $scope.isNavCollapsed = true;
    $scope.isCollapsed = true;
    $scope.isCollapsedHorizontal = true;
  });

and

angular.module('rdi_music')
  .controller('musicasController', function($scope) {

  });

Summarizing the problem:

So knowing how Angularjs works in this respect, your problem was that you declared the "rdi_music" module in the main.js file with the dependencies (including your "header" directive), soon after you overwrite this module in the index-controller.js file (which did not have the injection of its directive) and then soon overwritten this module again in the file musicas-controller.js, and as the declaration of this module in this file had only the injection of "ui-bootstrap" the other functionalities simply stopped working.

I created a plunker more simplified with your code, but functional so that you understand the scheme of how modules work.

Reference:

https://docs.angularjs.org/guide/module Navigate to the "Creation versus Retrieval" section the first paragraph describes exactly your problem.

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to Retrieve an existing module.

Final tip:

During development always keep the debug tool from the open browser (usually activated by the F12 key on the keyboard) on the "Console" tab. If there is an error Angularjs will display it there and even with a url (let’s say in passing) to the website of the Brazilian Gularjs containing all the details about the error presented and in most cases pointing out the reason for that error.

Browser other questions tagged angularjs angularjs-directives angular-ui-bootstrap angular-views

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