將角度指令，控制器和路由包含到函數中

因此，我仍然對角和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>

來源

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」）.control（「footer」，footer）;'應該是'angular.module（「app.directives」）。directive 「footer」，footer）;' – jrsala

真的很棒的你幫我解決這個問題。 – Greg

那是因爲你錯過了一些這些包裝材料的功能調用。例如，controller.js必須是：在我加入(angular);實際調用該函數的最後一行

(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

注意。

來源

2015-09-05 09:29:32 tcooc

感謝您的回覆。現在我遇到第二個問題，當我調用函數時，我仍然看不到頁腳。你可以看看我的更新答案。 @tcooc – Greg

將角度指令，控制器和路由包含到函數中

回答

相關問題