AngularJS: ngRouter 无法工作
AngularJS: ngRouter cannot work
因为 UI-Route 不能与指令一起工作(它具有牢不可破的隔离范围)并且不适合 my scenario,我正在测试删除 UI-Route 和去 ngRoute。我在 ngRoute 上花了一天时间,它仍然没有用。我认为我的代码中一定有一些细微的错误,但我就是想不通。简化测试代码如下:
<html lang="en" ng-app="Hello" ng-strict-di>
<head>
<title>Hello</title>
<script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
<script>
'use strict';
angular.module('Hello', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'hello.html',
controller: 'Ctrl1'
}).otherwise({
redirectTo: "/"
});
}])
.controller('Ctrl1', ['$scope', function ($scope) {
$scope.content = 'Hello World!';
}]);
</script>
</head>
<body>
<div>
<h1>Demo</h1>
<a href="#/hello">click me</a>
</div>
<ng-view></ng-view>
<script type="text/ng-template" id="hello.html">
<p>{{content}}</p>
</script>
</body>
</html>
如果你能帮助我,我将不胜感激。
您必须使用 <a href="#!/hello">click me</a>
,因为您正在使用 angular 1.6.x。你必须附加一个感叹号!到你的 href.
更多参考:
因为 UI-Route 不能与指令一起工作(它具有牢不可破的隔离范围)并且不适合 my scenario,我正在测试删除 UI-Route 和去 ngRoute。我在 ngRoute 上花了一天时间,它仍然没有用。我认为我的代码中一定有一些细微的错误,但我就是想不通。简化测试代码如下:
<html lang="en" ng-app="Hello" ng-strict-di>
<head>
<title>Hello</title>
<script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
<script>
'use strict';
angular.module('Hello', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'hello.html',
controller: 'Ctrl1'
}).otherwise({
redirectTo: "/"
});
}])
.controller('Ctrl1', ['$scope', function ($scope) {
$scope.content = 'Hello World!';
}]);
</script>
</head>
<body>
<div>
<h1>Demo</h1>
<a href="#/hello">click me</a>
</div>
<ng-view></ng-view>
<script type="text/ng-template" id="hello.html">
<p>{{content}}</p>
</script>
</body>
</html>
如果你能帮助我,我将不胜感激。
您必须使用 <a href="#!/hello">click me</a>
,因为您正在使用 angular 1.6.x。你必须附加一个感叹号!到你的 href.
更多参考: