Question

所以我仍然是角度和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>

但它不起作用。而且我发现很难找到出错的原因，因为谷歌浏览器上的开发工具不会出现错误

更新

现在我在最后调用该函数。但我仍然无法看到页脚。我还添加了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>

Answer 1

这是因为你在某些包装中缺少函数调用。例如，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);来实际调用该函数。

Answer 2

在＆＃39;指令.js＆＃39;和＆＃39; controller.js＆＃39;文件，您最后忘记了(angular)，例如＆＃39; app.js＆＃39;。

如果你写这样的函数：

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

除非你把它叫到某处，否则它永远不会运行：f();。现在，如果你想在函数中包含一些代码，你仍然希望它立即运行，就像它没有被包装一样。所以你要做的就是像这样立即调用包装函数：

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

或者像这样（同样的事情）：

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

在第二种写东西的方式中，最外面的括号对于程序来说是无用的，但是它们帮助读者看到函数将立即运行（或者＆＃34;评估＆＃34;或者＆＃34;调用＆＃34 34。）

您还可以将函数外部的任何内容传递给函数，例如angular：

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

将角度指令，控制器和路径包含到函数中

2 个答案: