將角度指令，控制器和路徑包裝成函數
[英]Wraping angular directives,controllers and routes into functions
問題描述
所以我仍然對angular和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));
指令.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上的開發工具沒有錯誤
更新資料
現在，我確實在最后調用了該函數。 但是我仍然看不到頁腳。 我還添加了footer.html，以防萬一我忘記了。 指令.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>
2 個解決方案
解決方案1
2 2015-09-05 09:29:32
那是因為您在某些包裝中缺少函數調用。 例如，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); 實際調用該函數。
解決方案2
2 已采納 2015-09-05 09:30:29
在“ directives.js”和“ controller.js”文件中，您像“ app.js”一樣在末尾忘記了(angular) 。
如果編寫這樣的函數：
function f() {
// do stuff...
}
除非您在某個地方調用它，否則它永遠不會運行： f(); 。 現在，如果您想在函數中包裝一些代碼，則仍然希望它像未包裝一樣立即運行。 因此，您要做的就是像這樣立即調用包裝函數：
(function f() {
// do stuff...
})();
或這樣（同一件事）：
(function f() {
// do stuff...
}());
在第二種編寫方式中，最外面的括號對程序沒有用，但它們可以幫助讀者看到該函數將立即運行（或“求值”或“調用”）。
您還可以將函數之外的任何內容傳遞給函數，例如angular ：
(function f(angular) {
// do stuff...
}(angular));
控制器+指令中的角度范圍
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.