将角度指令，控制器和路径包装成函数
[英]Wraping angular directives,controllers and routes into functions
问题描述
So i still new to angular and java script but i read it was good practical to wrap the everything into functions. 
所以我仍然对angular和Java脚本还是陌生的，但是我读过将所有内容包装到函数中是很实际的。
This is what i have done. 这就是我所做的。 in comment is the previous version 在注释中是以前的版本
app.js 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 指令.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 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);
})
and how should i proceed for routes.js 以及我应该如何进行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 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>
But it does not work. 但这行不通。 And i find it hard to find what went wrong because i don't get a error with the development tools on google chrome 而且我发现很难找到问题出在哪里，因为我对Google chrome上的开发工具没有错误
Update 更新资料
Now i do call the function at the end. 现在，我确实在最后调用了该函数。 But i still can't see the footer. 但是我仍然看不到页脚。 I also added the footer.html just in case there would something i forgot there. 我还添加了footer.html，以防万一我忘记了。 directives.js 指令.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 home.html
<div>
<div>
<h3>This is the homepage</h3>
</div>
<div footer></div>
</div>
2 个解决方案
解决方案1
2 2015-09-05 09:29:32
That is because you're missing the function invocation in some of those wrappings. 那是因为您在某些包装中缺少函数调用。 For example, controller.js needs to be: 例如，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
Note in the last line I added (angular); 注意在我添加的最后一行中(angular); to actually call the function. 实际调用该函数。
解决方案2
2 已采纳 2015-09-05 09:30:29
In the 'directives.js' and 'controller.js' files, you forgot (angular) at the end, like in 'app.js'. 在“ directives.js”和“ controller.js”文件中，您像“ app.js”一样在末尾忘记了(angular) 。
If you write a function like this: 如果编写这样的函数：
function f() {
// do stuff...
}
it's never going to run unless you call it somewhere: f(); 除非您在某个地方调用它，否则它永远不会运行： f(); . 。 Now, if you want to wrap a bit of code in a function, you still want it to run immediately as if it had not been wrapped. 现在，如果您想在函数中包装一些代码，则仍然希望它像未包装一样立即运行。 So what you do is you call the wrapping function immediately like this: 因此，您要做的就是像这样立即调用包装函数：
(function f() {
// do stuff...
})();
or like this (same thing): 或这样（同一件事）：
(function f() {
// do stuff...
}());
In that second way of writing things, the outermost parentheses are useless for the program but they help the reader see that the function will be immediately run (or "evaluated", or "called"). 在第二种编写方式中，最外面的括号对程序没有用，但它们可以帮助读者看到该函数将立即运行（或“求值”或“调用”）。
You can also pass anything that lives outside of the function into the function, for example angular : 您还可以将函数之外的任何内容传递给函数，例如angular ：
(function f(angular) {
// do stuff...
}(angular));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.