Question

我确定这是一个非常愚蠢的问题，但我是angularjs的新手，并试图找到解决方案但似乎没有任何效果。可能是我正在解释路由器错误。

我的控制器只在我将ng-controller添加到html文件时加载，如果我不这样做，但我认为路由器会处理这个问题。我在这个例子中使用requirejs并缩小了我的脚本。

的index.html

<!doctype html>
<html ng-app>
<head>
    <!-- load our application -->
    <script src="assets/vendor/requirejs/require.js" data-main="assets/js/config"></script>
</head>

<body id="splash">
hehe my page
</body>
</html>

config.js

requirejs.config({
  baseUrl: 'assets/js',
  paths: {
    angular: '..\\vendor\\angularjs\\angular',
    bootstrap: '..\\vendor\\bootstrap',
    jquery: '..\\vendor\\jquery\\jquery'
  },
  shim: {
    bootstrap: [
        'jquery'
    ],
    angular: {
        deps: ['jquery'],
        exports: 'angular'
    }
  }
});

require(['app/app']);

app.js

define(['angular'], function (angular) {
    angular.module('fettnerd.controllers', []);
    angular.module('fettnerd', ['fettnerd.controllers']);

    require(['app/routing'], function() {
        angular.bootstrap(document, ['fettnerd']);
    });
});

router.js

define(['angular', 'app/controllers/IndexCtrl'], function(angular) {
angular.module('fettnerd')
    .config(function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);  // we want history api

        $routeProvider.when("/home", {
                controller: "IndexCtrl"
            });
        $routeProvider.otherwise({redirectTo: '/home'});
    });
});

IndexCtrl.js

define(['angular', 'jquery'], function(angular, $) {
    angular.module('fettnerd.controllers')
        .controller('IndexCtrl', function($scope) {
            console.log('test');
            $scope.login = function(e) {
                alert('Soon. How soon? Very soon.');
            }
        });
});

Answer 1

您的index.html中缺少ng-view。

ngView是一个通过包含补充$ route服务的指令当前路径的渲染模板进入主布局（index.html）文件。每当当前路线改变时，包括在内根据$ route的配置查看它的变化服务。

<body id="splash" ng-view>
</body>

angularjs控制器未加载（不在视图中使用ng-controller）

1 个答案: