Углубительные угловые директивы, контроллеры и маршруты в функции

Так что я все еще новичок в угловом и java-скрипте, но я прочитал, что было хорошо практиковать, чтобы все это превратилось в функции.Углубительные угловые директивы, контроллеры и маршруты в функции

Это то, что я сделал. в комментариях является предыдущая версия

app.js

//var app = angular.module('app',['ngRoute','ngResource','routes']); 


(function(angular) { 
    angular.module("app.directives", []); 
    angular.module("app.controllers", []); 
    angular.module("app", ['ngRoute','ngResource','routes','app.directives','app.controllers']); 
}(angular));

directives.js

/* 
app.directive('footer', function() { 
return { 

replace: true, 
templateUrl: "/template/main_footer.html", 
controller: ['$scope', '$filter', function ($scope, $filter) { 

}] 
} 
}); 
*/ 

(function(angular) { 

    var footer = function() { 
     return { 

      replace: true, 
      templateUrl: "/template/main_footer.html", 
      controller: ['$scope', '$filter', function ($scope, $filter) { 


      }] 

     }; 
    }; 

    footer.$inject = []; 
    angular.module("app.directives").controller("footer", footer); 

});

controller.js

/*app.controller('HeaderController',function($scope, $location) { 

    $scope.isActive = function (viewLocation) { 
     var active = (viewLocation === $location.path()); 
     return active; 
    }; 

});*/ 

(function(angular) { 

    var HeaderController = function($scope,$location){ 

     $scope.isActive = function(viewLocation){ 
      var active = (viewLocation === $location.path()); 
      return active; 
     }; 

    } 

    HeaderController.$inject = ['$scope','$location']; 
    angular.module("app.controllers").controller("HeaderController", HeaderController); 

})

и как я должен приступить к routes.js

angular.module('routes', []).config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl: 'pages/home.html' 
     }) 
     .when('/second', { 
      templateUrl: 'pages/second.html' 
     }) 
     .when('/third', { 
      templateUrl: 'pages/third.html' 
     }) 
     .when('/123', { 
      templateUrl: 'pages/123.html' 
     }) 

     .otherwise({ 
      redirectTo: '/' 
     }); 

});

index.html

<!DOCTYPE html> 
<html ng-app="app"> 
<head> 


    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/custom.css"> 
    <script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-resource.js"></script> 
    <script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-route.js"></script> 


    <script type="text/javascript" src="js/routes.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    <script type="text/javascript" src="js/controllers.js"></script> 
    <script type="text/javascript" src="js/directives.js"></script> 

</head> 
<body> 

<div ng-view></div> 


</body> 
</html>

Но это не работает. И я считаю, что трудно найти то, что пошло не так, потому что я не получаю сообщение об ошибке с инструментами разработки на Google Chrome

Update

Теперь я вызвать функцию в конце. Но я до сих пор не вижу нижнего колонтитула. Я также добавил footer.html на случай, если что-то я там запомню. directives.js

(function(angular) { 

    var footer = function() { 
     return { 

      replace: true, 
      templateUrl: "/template/main_footer.html", 
      controller: ['$scope', '$filter', function ($scope, $filter) { 

      }] 

     }; 
    }; 
    footer.$inject = []; 
    angular.module("app.directives").controller("footer", footer); 

}(angular));

home.html

<div> 
    <div> 
     <h3>This is the homepage</h3> 
    </div> 
    <div footer></div> 
</div>

источник

2015-09-05 Greg

в основном вам не хватает, чтобы вызвать функцию, которую вы объявленную .. Его IIFE модель Http: // benalman.com/news/2010/11/immediately-invoked-function-expression/ –

В файлах 'directives.js' и 'controller.js' вы забыли (angular) в конце, как в 'app.js'.

Если вы пишете функцию, как это:

function f() { 
    // do stuff... 
}

он никогда не будет работать, пока вы не вызовете его где-нибудь: f();. Теперь, если вы хотите поместить немного кода в функцию, вы все равно хотите, чтобы он запускался немедленно, как если бы он не был завернут. Так что вы делаете, вы вызываете функцию оберточной сразу, как это:

(function f() { 
    // do stuff... 
})();

или как это (то же самое):

(function f() { 
    // do stuff... 
}());

В этом втором способе написания вещей, крайние скобки бесполезны для но они помогают читателю увидеть, что функция будет немедленно запущена (или «оценена» или «вызвана»).

Вы также можете передать все, что живет за пределами функции в функцию, например angular:

(function f(angular) { 
    // do stuff... 
}(angular));

источник

2015-09-05 09:30:29 jrsala

Спасибо за ответ, но по какой-то причине я до сих пор не вижу нижнего колонтитула. Не могли бы вы проверить мой обновленный вопрос. @jrsala – Greg

@ user3475722 В обновленном коде строка 'angular.module (« app.directives »). контроллер (« нижний колонтитул », нижний колонтитул);' должен быть 'angular.module (« app.directives »). директива («нижний колонтитул», нижний колонтитул); ' – jrsala

Действительно удивительно, чтобы вы помогли мне решить эту проблему. – Greg

Это потому, что вы пропустили вызов функции в некоторых из этих оберток. Например, controller.js должен быть:

(function(angular) { 

    var HeaderController = function($scope,$location){ 

     $scope.isActive = function(viewLocation){ 
      var active = (viewLocation === $location.path()); 
      return active; 
     }; 

    } 

    HeaderController.$inject = ['$scope','$location']; 
    angular.module("app.controllers").controller("HeaderController", HeaderController); 

})(angular); // CALL FUNCTION

Примечание в последней строке я добавил (angular); на самом деле вызвать функцию.

источник

2015-09-05 09:29:32 tcooc

Спасибо за ваш ответ. Теперь у меня вторая проблема, когда я вызываю функцию, которую я до сих пор не вижу в нижнем колонтитуле. Не могли бы вы посмотреть мой ответ на обновление. @tcooc – Greg

Углубительные угловые директивы, контроллеры и маршруты в функции

ответ

Смежные вопросы