初学者 Angularjs UI 路由答案

【问题标题】：Beginner Angularjs UI Routing初学者 Angularjs UI 路由
【发布时间】：2014-10-26 04:48:49
【问题描述】：

我已经开始学习 AngularJS，并决定使用 Angular-UI-Router 来满足我所有的路由需求，但不幸的是，我无法获取 $stateProvider 的 templateURL 属性来呈现。我已经按照教程到了世界的尽头，并且无法让 templateURL 工作（即使按照教程进行操作）。我错过了什么吗？

以下所有文档都位于同一目录中。我直接在 Chrome 中打开网页（我没有与 node/express 或任何其他服务结合使用）。

index.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="app">

<nav>
<a ui-sref="home">Home</a>
<a ui-sref="about">About</a>
</nav>

<div ui-view></div>

</body>
</html>

app.js

var app = angular.module('app', ['ui.router']).

config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('home', {url: '/home', template: '<h1>HOME</h1>'})
        .state('about', {url: '/about', templateURL: 'about.html'});

}]);

about.html

<div><p>About</p></div>

【问题讨论】：

很确定属性名称是templateUrl（区分大小写）
这是正确答案，如果以这种方式发布，我会投票。 Javascript 区分大小写。
将 templateURL 更改为 templateUrl
如果您“直接在 chrome 中”打开页面，听起来您是通过 file:// 协议打开它。 Angular 将尝试通过http:// 获取模板，但由于浏览器安全设置，这将无法正常工作。尝试设置网络服务器。
@ChadRobinson 只需投票以 typo 的身份结束。

标签： javascript html angularjs angular-ui-router

【解决方案1】：

你快到了。这是可用于测试的working plunker。

文档：

$stateProvider.state(stateName, stateConfig)（引用）

模板、模板网址、模板提供者

三种设置模板的方法。每个状态只使用一个（或视图，见下文）！

template 字符串 HTML 内容，或返回 HTML 字符串的函数

templateUrl String 模板文件的 URL 路径 OR 函数，返回 URL 路径字符串

templateProvider函数，返回HTML内容字符串

所以，这是更新后的状态定义：

$stateProvider
    .state('home', {url: '/home', template: '<h1>HOME</h1>'})
    .state('about', {url: '/about', templateUrl: 'about.html'});

另外，我们可以使用 $urlRouterProvider.otherwise() 来初始化一些现有的状态：

// no state iwth url:'/' at the moment
// $urlRouterProvider.otherwise('/');
// init ui-router's existing state on "unknown" url
$urlRouterProvider.otherwise('/home');

尝试观察here

【讨论】：

【解决方案2】：

原来，这是一个简单的错字。必须记住，javascript 是区分大小写的。

【讨论】：