将角度指令，控制器和路径包装成函数
[英]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.