Angularjs应用程序未触发

时间:2014-04-23 08:16:43

标签: angularjs

出于某种原因,我的Angular网站无效。我已经包含了所有文件。但出于某种原因,角度不会触发做某事。

这就是index.html的样子:

<!DOCTYPE html>
<html ng-app="ngTest">
<head>
    <title></title>
</head>
<body>
    <h2>Test</h2>

    <ng-view></ng-view>

    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="Scripts/angular-animate.js"></script>

    <script src="app/app.js"></script>
    <script src="app/controllers/home/HomeCtrl.js"></script>
</body>
</html>

所有包含的脚本都会在开发人员控制台中返回200,因此我确信它们已正确加载。

然后我的app.js看起来像这样:

window.app = angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']);
app.config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.useXDomain = true;
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/Home', { templateUrl: '/app/views/home/Home.html', controller: 'HomeCtrl' })
        .otherwise({ redirectTo: '/Login' });
}]);

HomeCtrl.js只是看起来像这样:

app.controller('HomeCtrl', ['$scope', function ($scope) {
    init();
    function init() {
        alert('aaa');
    }
}]);

Home.html只包含一段文字。

然后当我导航到:localhost/#Home时,我希望它会在Home.html标记中加载ng-view。但那并没有发生。它只加载我的index.html,但似乎没有触发角度代码。

我还缺少什么吗?

1 个答案:

答案 0 :(得分:1)

尝试:

angular.module('ngTest', ['ngRoute', 'ngResource', 'ngAnimate']).
config(['$routeProvider', '$locationProvider', '$httpProvider', '$provide', function ($routeProvider, $locationProvider, $httpProvider, $provide) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $httpProvider.defaults.useXDomain = true;
    $locationProvider.html5Mode(true);
    $routeProvider.when('/Home', {
        templateUrl: '/app/views/home/Home.html',
        controller: 'HomeCtrl'
    })
        .otherwise({
        redirectTo: '/Login'
    });
}]);

You could do that for controlers :

angular.module('ngTest.controllers', []);//Declare controllers


angular.module('ngTest.controllers').
controller('HomeCtrl',['$scope', function ($scope) {
    init();
    function init() {
        alert('aaa');
    }

}]);

顺便说一下,html5Mode(true)您的路径将是 localhost / Home