Question

我有一个观点（insight index.html）：

<body ng-app="mainApp" ng-controller="MainCtrl">
[...]
    <div>{{status}} </div>
</body>

我启动App onDeviceReady：

angular.element(document).ready(function() {
    angular.bootstrap(document);
});

我有这个模块：

var mainAppModul = angular.module('mainApp', ['ngRoute'])
         .config(function ($routeProvider, $compileProvider) {

       $routeProvider
         .when('/', {
         controller: MainCtrl,
         template: '<h1> Main View {{ status }} </h1>'        
         });
       $compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel):/);
    });

据我所知，有不同的方法来定义控制器。一种方式是这样的：

mainAppModul.controller('MainCtrl',['$scope', function ($scope)
 {
    $scope.status = "It works!";
}]);

另一个是这样的：

function MainCtrl ($scope) 
{
   $scope.status = "It works!";
}

虽然第一版的结果为[ng:areq] Argument 'MainCtrl ' is not a function, got undefined，但第二版的工作正常。

一般来说我有什么误解吗？

Answer 1

ngRoute与ngView结合使用您无需在模板中指定ng-controller，ngRoute会为您处理此问题。如果你有这个：

var mainAppModul = angular.module('mainApp', ['ngRoute'])
.config(function ($routeProvider, $compileProvider) {
    $routeProvider
        .when('/', {
            // controller: MainCtrl, // EDIT: needs to be a string of the controller name
            controller: 'MainCtrl',
            template: '<h1> Main View {{ status }} </h1>'
        });
});

所有你需要的是：

<html ng-app="myApp">
    <body>
        <ng-view></ngview>
    </body>
</html>

ngRoute会将指定路由的模板放入ng-view并使用关联的控制器。

注意： ngRoute没有附带angular.js，你也需要包含angular-route.js。

定义angularjs控制器时出错

1 个答案: