在设置所有路由之前,有没有办法让服务器命中检索数据$routeProvider？我希望能够根据此远程数据动态设置路由.我试过这样的事情:
angular.module("myApp").config(["$routeProvider", "$http", function($routeProvider, $http) {
$http.get("myData").success(function(data) {
$routeProvider.when(data.dynamicRoute, {
//route definition
}
//or
$routeProvider.when("/known/route", {
redirectTo: data.dynamicRoute
}
});
}]);
但这会导致以下错误:
Unknown provider: $http from myApp
所以,我知道配置功能是注入提供者而不是服务.但是,我仍然想知道我是否可以某种方式实现我的最终目标？我不认为我可以这样做$httpProvider,但如果我错了,请有人纠正我.如果有一些根本原因导致这种情况无法实现,请解释一下.任何有关这方面的帮助将非常感激.
我正在使用Routing and Multiple ViewsAngularJS的功能，但在开发者工具的 Chrome 的“源”选项卡中没有看到 HTML 部分文件（或嵌入的 Javascript）。
在我的 index.html 文件中，它包括 AngularJS、jQuery 和 Bootstrap 的所有标签以及我的自定义应用程序/控制器 Javascript 文件。这些文件都出现在“源”选项卡中。
我的应用程序正常工作。当我在页面上的链接之间单击时，会加载并显示部分 HTML 文件，并且这些文件会列在“网络”选项卡中。
问题是部分 HTML 文件没有出现在“源”选项卡中。如何调试这些部分文件中的 Javascript？
我TypeError: undefined is not a function在我的代码中找到解决方案时遇到了问题.我有以下app.js:
var app = angular.module('test', ['ngRoute', 'test.services', 'test.directives', 'test.controllers']);
app.config(function ($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/q/:q', {
templateUrl: '/templates/productlist.html',
controller: 'ProductCtrl'
}).
otherwise({
redirectTo: '/q'
});
});
然后我有一个控制器
var controllers = angular.module('test.controllers', []);
controllers.controller('ProductCtrl', ['$scope', '$routeParams', 'ProductFactory',
function ($scope, ProductFactory, $routeParams) {
$scope.query = $routeParams.q;
$scope.products = ProductFactory.query({query: $scope.query});
}]);
还有一家工厂
var services = angular.module('test.services', ['ngResource']);
var baseUrl = 'http://localhost\\:8080';
services.factory('ProductFactory', function ($resource) {
return $resource(baseUrl + '/test/smart/:query', {}, {
query: { …我尝试在各种线程上搜索这个,但我不能最终理解这一点.
test.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',
{
controller:'SimpleController1',
templateUrl: 'partials/1.html'
})
.when('/xyz',
{
controller:'SimpleController1, SimpleController2',
templateUrl:'partials/2.html'
})
.otherwise({ redirectTo: '/'});
}]);
我尝试了上面的代码片段,但它没有用.我可以这样做吗？如果是,那么我在这里做错了什么？
我已将我的index.html中的脚本链接起来,并在app.js中引用它,但我一直收到ngRoute不可用的错误.任何帮助将不胜感激!
app.js
angular.module('gameMaster', ['ngRoute', 'castServices']);
的.config
angular.module('gameMaster')
.config(function($routeProvider, $locationProvider){
$routeProvider
//welcome page
.when('/welcome', {
templateUrl: '../../../../pages/welcome.html',
controller: 'gameController'
})
//gameplay page
.when('/gameplay',{
templateUrl: '../../../../pages/gameplay.html',
controller: 'gameController'
})
//default to welcome
.otherwise({
redirectTo: '/welcome'
});
$locationProvider.html5mode(true);
});
的index.html
<html>
<head>
<title>Party Things!</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script type="text/javascript" src="node_modules/underscore/underscore.js"></script>
<script type="text/javascript" src="js/modules/castServices/castServices.js"></script>
<script type="text/javascript" src="js/modules/gameMaster/app.js"></script>
</head>
你有什么事吗？
谢谢!
我想避免显示初始JavaScript渲染视图的延迟.我希望用户立即看到内容并让Angular从那里获取内容.当Angular ngRoute可能会发生眨眼时,我不想只是替换这个ng-view.一旦用户点击另一条路线,我只希望它替换它.
让我们假设这是基本路线'/'.这已经存在于我的HTML中,从服务器呈现.
<div ng-view>
<h1>Welcome. I am the first view.</h1>
<p>Please do not replace me until a user has triggered another route.</p>
</div>
我知道一个常见的方法是在一个服务器端代码ng-view和Angular加载它只是替换它.这不是我想要做的.我希望Angular加载并理解这实际上已经是我的第一个视图了.
关于如何做到这一点的任何创意？我查看了源代码 - 没有运气.甚至可以让Angular只在不同的情况下替换HTML.
编辑:我不打算在服务器端渲染模板以用作Angular模板.我希望index.html在服务器端渲染我的整个,并且这已经包含用户需要查看此初始基本路由的所有内容.
server-side angularjs angular-routing angularjs-routing ngroute
我正在建立一个单页幻想足球应用程序,每个位置都有部分页面,并显示一个玩家列表.
我想在每个玩家旁边实现一个复选框,当玩家被选中时,我可以选中复选框并让一条线路通过该玩家的名字.
我在浏览应用程序时检查复选框时遇到问题.当我浏览页面时,复选框的状态将丢失.我不确定如何在Angular.js中实现它.
以下是我的测试应用程序的代码.
的index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="jquery.cookie.js"></script>
</head>
<body ng-app="RoutingApp">
<h2>AngularJS Routing Example</h2>
<p>Jump to the <a href="#first">first</a> or <a href="#second">second page</a></p>
<div ng-view>
</div>
</body>
</html>
first.html
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.cookie.js"></script>
<meta charset="utf-8">
<title>Persist checkboxes</title>
<style>
button{
margin-top:8px;
}
</style>
</head>
<body>
<h1>First Page</h1>
<div>
<label for="option1">Option 1</label>
<input type="checkbox" id="option1">
</div>
<div>
<label for="option2">Option 2</label> …目前我正在做这样的事情
link.on('click', function () {
if (link.attr('href') !== $route.current.originalPath)
return;
$route.reload();
});
我不知道副作用,但我想可能有一些.
有没有更简单的方法来处理ngRoute中的这种情况,例如通过$location？
当应用程序更新为使用它时,在UI路由器中执行相同操作的方法是什么？
angularjs single-page-application angularjs-routing angular-ui-router ngroute
我正在尝试在AngularJS中创建所谓的"SEO友好"URL.
在我的script.js中我有路由:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.html5Mode(true);
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
}]);
app.controller("BlogController", function($scope) {
$scope.title = 'Blog';
});
app.controller("IdeasController", function($scope) {
$scope.title = 'Ideas';
});
要从URL中删除#,我将启用html5模式:
$routeProvider.html5Mode(true);
但是,这会导致以下错误:
由于以下原因无法实例化模块exampleApp:TypeError:$ routeProvider.html5Mode不是函数
有没有人有这个问题的解决方案？这意味着内容不会因为它而从视图中显示.
编辑:对于任何想知道的人,工作代码是:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
$locationProvider.html5Mode(true);
}]);
我的Angular应用程序是使用这个yeoman发生器的样板开发的.
路由和所有工作正常但我无法在navbar-controller.js和footer-controller.js上工作$ scope.请告诉我您是否需要更多信息来提供相关信息.
的index.html
<!DOCTYPE html>
<html lang='en' data-ng-app='app'>
<head>
<title>App</title>
<meta name='viewport' content='width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes'>
<!-- inject:head:js -->
<!-- endinject -->
<!-- inject:html -->
<!-- endinject -->
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body class="wrapper">
<div ng-controller="NavbarCtrl" ng-include="'navbar/navbar.tpl.html'"></div>
<!-- boxed-layout -->
<div class='container'>
<!--=== Main Content ===-->
<div data-ui-view></div>
<!--=== End Main Content ===-->
</div>
<!-- <div id="footer"
ng-controller="FooterCtrl" ng-include="'footer/footer.tpl.html'">
</div> -->
<!-- bower:js -->
<!-- endbower -->
<!-- …javascript twitter-bootstrap angularjs angularjs-scope angularjs-routing