所以我对 Angular 和 Java 脚本还是个新手，但我读到将所有内容包装到函数中非常实用。
这就是我所做的。 评论里是之前的版本
应用程序.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));
主页.html
<div>
<div>
<h3>This is the homepage</h3>
</div>
<div footer></div>
</div>
最佳答案
在“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));
关于javascript - 将 Angular Directive(指令)、 Controller 和路由包装到函数中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32411310/