angularjs 模板 ng-view答案

【问题标题】：angularjs template ng-viewangularjs 模板 ng-view
【发布时间】：2013-03-16 02:36:13
【问题描述】：

任何人都可以告诉我我在这里做错了什么：

我只是更新了库，似乎代码由于某种原因而损坏了，它什么也没做。

角度库

html5代码

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<header id="header">
    <h1 id="logo"><a href="#/home"></a></h1>

    <div id="menu">
        <a ng-click="setRoute('home')" class="btn">Home</a>
        <a ng-click="setRoute('about')" class="btn">about</a>
    <a ng-click="setRoute('experiments')" class="btn">Experiments</a>
    </div>
    <div class="color"></div>
    <div class="clear"></div>
</header>
<!-- //top -->
<div class="shadow"></div>

<div id="container">
    <div ng-view></div>
</div>

angular.js

 angular.module('WebSite', []).
    config(function($routeProvider) {
        $routeProvider.
            when('/about', {templateUrl:'folder/test.html', controller:AboutCtrl}).
            when('/experiments', {templateUrl:'folder/test.html', controller:ExperimentsCtrl   }).
            when('/home', {templateUrl:'folder/test.html', controller:HomeCtrl   }).
            otherwise({redirectTo:'/home'});
    });

function AboutCtrl($scope) {
    $scope.title = 'About Page';
    $scope.body = 'This is the about page body';
}

function ExperimentsCtrl($scope) {
    $scope.title = 'Experiments Page';
    $scope.body = 'This is the about experiments body';
}

function HomeCtrl($scope) {
    $scope.title = 'Home Page';
    $scope.body = 'This is the about home body';
}

【问题讨论】：

setRoute函数在哪里定义的？

标签： html templates angularjs

【解决方案1】：

首先，您需要使用 ng-app 来使用您的模块设置 Angular 应用程序。也许您已经这样做了，但这不是您发布的 sn-p 的一部分：

<html ng-app="WebSite">

另外，关于 setRoute()，我不知道你从哪里复制它，但你不需要它。只需使用带哈希的 href，例如：

<a href="#/about" class="btn">about</a>

【讨论】：

【解决方案2】：

你需要在https://github.com/simpulton/angular-website-routes查看来自github的源代码

没有 changeRoute 方法。经过一番对话，我意识到最好尽可能自然地处理锚标签。

您的菜单元素应如下所示

<div id="menu">
    <a href="#/home" class="btn">Home</a>
    <a href="#/about" class="btn">About</a>
    <a href="#/experiments" class="btn">Experiments</a>
</div>

希望这会有所帮助！

【讨论】：