个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在试用 AngularJS 并一直在观看 Dan Wahlin 的 youtube 视频，但无法在 Chrome 或 IE 中使用路由。在 FireFox 中一切正常，仅此而已。它只是给出一个空白页。有人知道哪里出了问题吗？
代码如下:
索引.html
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="foo.js"></script>
</head>
<body>
<!-- Placeholder for views-->
<div data-ng-view=""></div>
</body>
</html>
foo.js
var demoApp = angular.module('demoApp',[]);
demoApp.config(function($routeProvider){
$routeProvider.when('/view1',{templateUrl: 'Partials/View1.html',controller: 'SimpleController'});
$routeProvider.when('/view2',{templateUrl: 'Partials/View2.html',controller: 'SimpleController'});
$routeProvider.otherwise({redirectTo: '/view1'});
});
var controllers = {};
controllers.SimpleController = function($scope){
$scope.customers = [
{name:'John Doe',city:'Phoenix'},
{name:'Jane Doe',city:'New York'},
{name:'Terrence Winter',city:'Los Angeles'},
{name:'Barack Obama',city:'Washington DC'}
];
$scope.addCustomer = function(){
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
}
demoApp.controller(controllers);
View1.html
<div class="container">
<h3>View 1</h3>
Name:
<br>
<input type="text" data-ng-model="filter.name"/>
<br>
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'name'"> {{cust.name}} - {{cust.city}}</li>
</ul>
<br>
Customer Name: <br>
<input type="text" data-ng-model="newCustomer.name"/>
<br>
Customer City: <br>
<input type="text" data-ng-model="newCustomer.city"/>
<br>
<button data-ng-click="addCustomer()">Add Customer</button>
<br>
<a href="#/view2">View 2</a>
</div>
View2.html
<div class="container">
<h3>View 2</h3>
<input type="text" data-ng-model="city"/>
<br>
<ul>
<li data-ng-repeat="cust in customers | filter:city | orderBy:'city'"> {{cust.name}} - {{cust.city}}</li>
</ul>
</div>
最佳答案
Chrome 不允许这样做，因为模板是通过 AJAX 加载的。您可以通过使用 npm 设置一个简单的 http 服务器来解决此问题。
在 nodejs 命令提示符下转到您的项目文件夹。然后输入
npm install http-server -g
这将在您的机器上安装 http 服务器。
然后使用命令启动你的服务器
http 服务器
现在，使用您的服务器已启动的 ip 和端口运行您的文件，然后就可以了!路由也适用于 Chrome。
关于angularjs - Angular 路由在 Chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17727111/
24
4
0
我的 Angular 应用程序中有以下代码。 app.config(function($routeProvider, $locationProvider) { $locationProvider
这就是我在 Backbone 中进行路由的方式，在决定调用哪个外部模板之前，首先获取路由及其参数。我觉得这很灵活。 var Router = Backbone.Router.extend({
我是 MEAN 堆栈领域的新手，我对 Angular 路线有一些疑问。为什么我应该在客户端重新创建后端已经用express.js创建的路由，有什么好处？这是 Angular.js 工作的唯一方式吗？我
我可以设置一条从根级 URL 进行映射的路由吗？ http://localhost:49658/ 我使用的是 VS2010 内置 Web 服务器。 尝试使用空白或单斜杠 URL 字符串设置路由不起作用
我有一个现有的应用程序 Rails 3.2.17和 Angular js。我想在现有应用程序中包含 Activeadmin。 我遵循了 active-admin post from ryan bate
我正在关注 this Angular 中的路由教程，它就是行不通。当我使用“comp”选择器放置它的 HTML 代码时，它可以工作，但是当我尝试使用路由器 socket 对其进行路由时，它只显示来自
多个路由通过路由器进行管理。 前端路由的概念和原理 (编程中的) 路由 （router）就是一组 key-value 对应关系，分为：后端路由和前端路由 后端路由
服务器需要根据不同的URL或请求来执行不一样的操作，我们可以通过路由来实现这个步骤。 第一步我们需要先解析出请求URL的路径，我们引入url模块。 我们来给onRequest()函数加上一些逻辑
我正在为 Angular 6 应用程序设置路由，我想要一条可以匹配可变数量的段的路由。目前我有一个看起来像这样的路由配置: const routes: Routes = [ { path: '',
用户将点击电子邮件中的链接，如下所示: do-something/doSomething?thing=XXXXXXXXXXX 如何在路由器中定义路由并订阅获取参数？ 目前在我的路由器中: {
我有一个具有以下结构的 Angular (4) 应用程序: app.module bi.module auth.module 路由应该是: / -> redirect to /home /
我正在使用 WCF 4 路由服务，并且需要以编程方式配置服务(而不是通过配置)。我见过的这样做的例子很少见，创建一个 MessageFilterTable 如下: var fi
我需要创建一个“路由”服务。我正在尝试使用 .Net 的 System.ServiceModel.Routing.IRequestReplyRouter我可以让它只在 HTTP 模式下工作，而不是在
例如，链接: /shop/phones/brend/apple/display/retina/color/red 在哪里: phones - category alias brend -
非常基本的问题，我很惊讶我找不到答案。我刚刚开始研究 django 并进行了开箱即用的安装。创建了一个项目并创建了一个应用程序。 urls.py 的默认内容很简单: urlpatterns = [
我已经实现了 WCF 路由服务；我还希望该服务(或类似的 WCF 服务)以规定的和统一的(与内容无关的)方式转换有效负载。例如，有效负载将始终采用 Foo 的形式。我想把它作为Bar在所有情况下。我很
我想使用 $locationProvider.html5Mode(true); 在 angularJs 中删除 # 哈希；但这导致所有 URL 都通过 angularJs 进行路由。我如何设置它以便只
我要听导航开始事件并判断其是否url属性是 /logout . 如果是这样，路由器应该停止触发连续事件，例如 路线已识别 , GuardsCheckStart , ChildActivationSta
有人可以解释我如何使用参数路由到 URL 吗？ 例如id 喜欢点击产品并通过Id打开产品的更多信息。 我的路由到目前为止... angular.module('shop', ["cus
我目前正在 Angular: 7.2.14 上构建，想看看是否有人可以解释如何使用路由保护、共享服务或其他方式等重定向查询参数。 我试图解决的问题要求查询参数从根 Uri 路径传入，然后将路由重定向到
我是一名优秀的程序员,十分优秀！