ngRoute 不适用于外部控制器文件
ngRoute not working with external controller files
当我将我的控制器包含在我的 app.js 文件中时,路由和控制器功能正常工作。它看起来像这样:
index.html
<!DOCTYPE html>
<html data-ng-app='ckbApp' >
<head >
</head>
<body>
<div class="container" >
<div ng-include="'header.html'"></div>
<div ng-view class="viewBody">
</div>
<div ng-include="'footer.html'"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="ckbApp.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/About', {
templateUrl: 'Views/About.html',
controller: 'controller'
}).
when('/Blog', {
templateUrl: 'Views/Blog.html',
controller: 'controller'
}).
when('/FAQ', {
templateUrl: 'Views/FAQ.html',
controller: 'controller'
}).
when('/Home', {
templateUrl: 'Views/Home.html',
controller: 'controller'
}).
otherwise({
redirectTo: '/Home'
});
}]);
app.controller('controller', ['$scope', '$http', function ($scope, $http) {
$http.get('data.json').success(function(data) {
$scope.data = data;
});
}]);
但是当我尝试将控制器放入外部文件时,路由的 none 起作用了。我知道控制器仍然有效,因为 scope.data 仍然加载 'header.html'。我的外部控制器文件看起来像这样:
'use strict';
angular.module('app', []).controller('controller', ['$scope', '$http', function ($scope, $http) {
$http.get('data.json').success(function(data) {
});
}]);
并且我在 index.html
的底部包含了控制器源代码
<script src="/Controllers/controller.js"></script>
我在某处读到 ngRoute 需要服务器 运行,但即使我的服务器运行,它也不能在外部工作,但可以与 app.js[=14 中包含的控制器一起工作=]
angular.module('app', [])
重新定义了名为'app'的模块。您只想获取对另一个 JS 文件中定义的现有模块的引用,并向其添加一个控制器:
angular.module('app')
当我将我的控制器包含在我的 app.js 文件中时,路由和控制器功能正常工作。它看起来像这样:
index.html
<!DOCTYPE html>
<html data-ng-app='ckbApp' >
<head >
</head>
<body>
<div class="container" >
<div ng-include="'header.html'"></div>
<div ng-view class="viewBody">
</div>
<div ng-include="'footer.html'"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="ckbApp.js"></script>
</body>
</html>
app.js
'use strict';
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/About', {
templateUrl: 'Views/About.html',
controller: 'controller'
}).
when('/Blog', {
templateUrl: 'Views/Blog.html',
controller: 'controller'
}).
when('/FAQ', {
templateUrl: 'Views/FAQ.html',
controller: 'controller'
}).
when('/Home', {
templateUrl: 'Views/Home.html',
controller: 'controller'
}).
otherwise({
redirectTo: '/Home'
});
}]);
app.controller('controller', ['$scope', '$http', function ($scope, $http) {
$http.get('data.json').success(function(data) {
$scope.data = data;
});
}]);
但是当我尝试将控制器放入外部文件时,路由的 none 起作用了。我知道控制器仍然有效,因为 scope.data 仍然加载 'header.html'。我的外部控制器文件看起来像这样:
'use strict';
angular.module('app', []).controller('controller', ['$scope', '$http', function ($scope, $http) {
$http.get('data.json').success(function(data) {
});
}]);
并且我在 index.html
的底部包含了控制器源代码<script src="/Controllers/controller.js"></script>
我在某处读到 ngRoute 需要服务器 运行,但即使我的服务器运行,它也不能在外部工作,但可以与 app.js[=14 中包含的控制器一起工作=]
angular.module('app', [])
重新定义了名为'app'的模块。您只想获取对另一个 JS 文件中定义的现有模块的引用,并向其添加一个控制器:
angular.module('app')