Question

我正在学习AngularJS，到目前为止我有一个骨架应用程序的开头，有一个主索引页面和两个模板：一个登录页面和一个非常简单的控制器的主页。我还没有深入到骨架中，所以我想要完成的比基本认证要简单得多。

我之所以用我的方式编写的原因是尝试应用我在学习AngularJS时所读到的概念;这是通过在其自己的JS文件中为每个模板（或部分）提供自己的控制器来模块化您的代码。我相信这是我应该尽早申请的最佳实践，因为这可能会在未来发展很多。这就是为什么我不让我的控制器放在一个文件中的原因，我知道这个文件运行得很好。

现在不用多说了，请查看以下代码，以获取我目前所处位置的参考：

的index.html

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyApp</title>
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
    <div ng-view>
        <!-- loaded view here -->
    </div>

    <!-- JS imports -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
    <script src="assets/js/app.js"></script>
</body>
</html>

app.js

angular.module('MyApp', [
    'ngRoute'
])

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/login", {
        templateUrl: 'assets/partials/login.html',
        controller: 'LoginCtrl'
    })
    .when("/home", {
        templateUrl: 'assets/partials/home.html',
        controller: 'HomeCtrl'
    })
    .otherwise({ 
        redirectTo: '/login'
    }); 
}]);

login.html，home.html

<div class="container-fluid text-center">
    <h2>{{pageTitle}}</h2>
</div>

login.js

angular.module('MyApp')

.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

home.js

angular.module('MyApp')

.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

那么我正在解决的问题是什么？ {{pageTitle}}是加载视图时显示的内容，而不是通过范围传入的实际值。请告诉我这里有什么问题，我愿意接受有关如何改进我的代码的所有建议，非常感谢所有帮助！

Answer 1

您需要在home.js之后的html中加入login.js和app.js控制器

<script src="assets/js/app.js"></script>
<script src="assets/js/home.js"></script>
<script src="assets/js/login.js"></script>

您还可以创建一个文件名controller.js并为其添加所有控制器以用于简单项目，这样您就不必从html对js文件发出新请求。

Answer 2

您尚未将login.js和home.js添加到index.html文件中。此外，您无需在所有文件中包含angular.module('MyApp')。它已经在app.js中，也可以在这里使用相同的实例。

你可以做到

MyApp.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.pageTitle = "Welcome to the Home Page!";
}]);

MyApp.controller('LoginCtrl', ['$scope', function($scope) {
    $scope.pageTitle = "Hello! Sign In";
}]);

AngularJS控制器位于不识别范围的单独文件中

2 个答案: