HTML5模式

Question

我在运行第一个AngularJS应用时遇到了一些问题。当我运行我的应用程序时，索引上的所有对象都会正确显示。当我点击我的超链接移动到视图-2时，所有对象都显示在HTML上，如纯文本{{object.property}}我做错了什么？

这是我的index.html：

<DOCTYPE html>
<html ng-app="tutorialApp">
<head>
<meta charset="UTF-8">
<title> Tutorial App</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/MyController.js"></script>
</head>
<body>

<div ng-view></div>

</body>
</html>
</DOCTYPE>

这是我的app.js：

var app = angular.module('tutorialApp', ["ngRoute", "MyControllerModule"])

    app.config(function ($routeProvider){

        $routeProvider

            .when("/", {
                controller: "MyController",
                templateUrl: "views/one.html"
            })


            .when("/two", {
                controller: "ControllerTwo",
                templateUrl: "views/two.html"
            })

            .otherwise({
                redirectTo: "/"
            });
    });

这是我的MyController.js：

angular.module("MyControllerModule", [])

.controller("MyController", ["$scope", function($scope){

$scope.myFirstObject = {};
$scope.myFirstObject.title = "Main Page";
$scope.myFirstObject.subTitle = "Sub Title";

$scope.myFirstObject.bindOutput = 13;

$scope.myFirstObject.firstname = "Wheelchair";
$scope.myFirstObject.lastname = "Terminator";

$scope.timesTwo = function(){
    $scope.myFirstObject.bindOutput *= 2;
}

}])

.directive("myFirstDirective", function(){
    return {
        restrict: "E",
        template: "<div>Hello how are you?</div>"
    }
})

.controller("ControllerTwo", ["$scope", function($scope) {
    $scope.testObject = {};
    $scope.testObject.doSomething = "TEST TEST TEST TEST TEST!";

}
]);

这是我的/views/one.html：

<h1>{{myFirstObject.title}}</h1>
<h2>{{myFirstObject.subTitle}}</h2>

<p>Number: {{2 + 2}}</p>
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p>
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p>

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br>

<br>
<label>First Name:</label>
<input ng-model="myFirstObject.firstname">
<br>
<label>Last Name:</label>
<input ng-model="myFirstObject.lastname">
<br>
<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a>
<br>
<br>
<br>
<my-first-directive></my-first-directive>

这是我的/views/two.html

<h1>Second View</h1>
<h2>this is the second view...</h2>
<br>
<br>

<p>Call object string: {{testObject.doSomething}}</p>

Answer 1

将href更改为路线。不是html页面。

<a href="views/two.html">CLICK HERE FOR SECOND VIEW</a>

这应该是

<a href="#/two">CLICK HERE FOR SECOND VIEW</a>

正如您在问题中所做的那样，调用新的html页面加载到浏览器中。不是角度app的模板。所以，{{object.property}}之类的所有未知事物都会发生。

Answer 2

使用，

<强> <a href="#two">CLICK HERE FOR SECOND VIEW</a>

观察，href="#two"

<h1>{{myFirstObject.title}}</h1>
<h2>{{myFirstObject.subTitle}}</h2>

<p>Number: {{2 + 2}}</p>
<p>String: {{myFirstObject.firstname + " " + myFirstObject.lastname}}</p>
<p><b>Multiply a number by two: {{myFirstObject.bindOutput | currency}}</b></p>

<button ng-click="timesTwo()">CLICK TO MULTIPLY</button><br>

<br>
<label>First Name:</label>
<input ng-model="myFirstObject.firstname">
<br>
<label>Last Name:</label>
<input ng-model="myFirstObject.lastname">
<br>
<a href="#two">CLICK HERE FOR SECOND VIEW</a>
<br>
<br>
<br>
<my-first-directive></my-first-directive>

Check this reference

修改

您似乎对#网址
有疑问
解决方案：

HTML5模式

配置：

$routeProvider .when('/two', { templateUrl: 'views/two.html', }); $locationProvider .html5Mode(true);

您应该在HTML文件中设置基础

<html> <head> <base href="/"> </head> </html>

在此模式下，您可以使用不包含HTML文件中的＃的链接

<a href="/two">link</a>

示例：

http://test.com/base/two

AngularJS控制器仅适用于第一个视图

2 个答案:

HTML5模式