标签: angularjs-routing
简单的Angular $ routeProvider解析测试.这段代码有什么问题？
我创建了一个简单的Angular JS $ routeProvider解析测试应用程序.它给出以下错误:
Error: Unknown provider: dataProvider <- data
如果有人能够确定我哪里出错了,我将不胜感激.
的index.html
<!DOCTYPE html>
<html ng-app="ResolveTest">
<head>
<title>Resolve Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"> </script>
<script src="ResolveTest.js"></script>
</head>
<body ng-controller="ResolveCtrl">
<div ng-view></div>
</body>
</html>
ResolveTest.js
var rt = angular.module("ResolveTest",[]);
rt.config(["$routeProvider",function($routeProvider)
{
$routeProvider.when("/",{
templateUrl: "rt.html",
controller: "ResolveCtrl",
resolve: {
data: ["$q","$timeout",function($q,$timeout)
{
var deferred = $q.defer();
$timeout(function()
{
deferred.resolve("my data value");
},2000);
return deferred.promise;
}]
}
});
}]);
rt.controller("ResolveCtrl",["$scope","data",function($scope,data)
{
console.log("data : " + data);
$scope.data = data;
}]);
rt.html
<span>{{data}}</span>
angularjs angularjs-directive angularjs-service angularjs-routing angularjs-controller
推荐指数
解决办法
查看次数
在使用AngularJS的工厂中,$ location.path不会更改
我的工厂看起来像:
'use strict';
angular.module('myApp')
.factory('httpInterceptor',['$q','$location', '$rootScope', function($q, $location, $rootScope){
return {
response: function(response) {
if(response.success === false) {
console.log("Redirecting");
$location.path('/login');
return $q.reject(response);
}
return response || $q.when(response);
}
}
}]);
它吐出日志,但不会改变路径.我该怎么做才能实现这一目标？
推荐指数
解决办法
查看次数
从本地文件系统提供站点时,角度视图是否有效？
我正在使用angular来开发一个应用程序.我正在开发我的本地文件系统,在Windows上.但是,当我启用时angular-route.js,每当我点击index.html浏览器时,它都会转到index.html#/C:/.
我的路线定义是:
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'});
}
我认为这导致网站中断,因为/C:/不匹配任何角度路线.出了什么问题？我该如何解决？
推荐指数
解决办法
查看次数
AngularJS $ routeProvider没有重载方法
AngularJS 文档表明它ngRoute $routeProvider有一个reload方法.
重装()
即使$ location未更改,也会导致$ route服务重新加载当前路由.
从这个屏幕截图中可以看出,$routeProvider没有reload方法.
我正在初始化我的模块:
var pageApp = angular.module('pageApp', ['ngRoute']);
我要求$resourceProvider这样的:
pageApp.config([
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$routeProvider',
'$provide',
function($controllerProvider,
$compileProvider,
$filterProvider,
$routeProvider,
$provide) {
//generate attached screenshot output
console.log($routeProvider);
/* ... */
}]);
我使用的是1.2.5版本
推荐指数
解决办法
查看次数
angularjs跨路径维护范围变量
如何跨路线维护模型.例如,我有一个加载到主页的配置文件列表.主页还包含"加载更多"操作以加载更多配置文件,基本上将数据推送到模型.单击特定配置文件时,将通过路径激活该配置文件的详细视图.详细视图有一个后退按钮,可将用户重定向回主页.在路由回到主页时,由"加载更多"动作加载的数据(配置文件)将丢失.我需要使用"加载更多"前置数据来维护模型
以下是使用的代码
/* Controllers */
var profileControllers = angular.module('profileControllers', ['profileServices'])
profileControllers.controller('profileListCtrl', ['$scope','$location', 'Profile','$http',
function($scope,$location, Profile,$http) {
$scope.Profiles = Profile.query(function(){
if($scope.Profiles.length < 3) {
$('#load_more_main_page').hide();
}
});
$scope.orderProp = 'popular';
$scope.response=[];
//LOADMORE
$scope.loadmore=function()
{
$http.get('profiles/profiles.php?profile_index='+$('#item-list .sub-item').length).success(function(response){
if(response) {
var reponseLength = response.length;
if(reponseLength > 1) {
$.each(response,function(index,item) {
$scope.Profiles.push({
UID: response[index].UID,
id: response[index].id,
popular: response[index].popular,
imageUrl: response[index].imageUrl,
name: response[index].name,
tags: response[index].tags,
category: response[index].category
});
});
}
if(reponseLength < 3) {
$('#load_more_main_page').hide();
}
}
});
}
}]);
/* App Module */
var …angularjs angularjs-service angularjs-scope angularjs-routing ngroute
推荐指数
解决办法
查看次数
ajax请求中的angularjs错误处理
我想在我的应用程序中编写一个错误处理部分我在下面使用这个代码,但是当错误500发生时它的工作正常但是有一个小的或者很大的问题,那就是页面加载起初和几秒钟后错误页面加载,怎么能我删除这几秒钟,直接转到错误页面,而不加载发布错误的主页？有没有办法在执行其控制器后加载html模板？
var interceptor = ['$rootScope', '$q', function (scope, $q) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 500) {
window.location= "http://www.domain.lan/#!/error";
return;
}
if (status == 403) {
// window.location = "dashboard";
return;
}
// otherwise
return $q.reject(responseInterceptors);
}
return function (promise) {
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor);
ajax error-handling exception-handling angularjs angularjs-routing
推荐指数
解决办法
查看次数
如何为非root基本URL设置AngularJS $ locationProvider HTML5模式？
我有一个工作的AngularJS(1.3.8)应用程序,它在应用程序上下文"app"下部署为Tomcat中的Web应用程序.
网址如下所示:
https://www.myserver.com/app/#/login
https://www.myserver.com/app/#/register
路由定义如下:
$routeProvider.when(
'login',
{templateUrl: 'partials/login.html?' + now, controller: 'LoginController'}
);
$routeProvider.when(
'register',
{templateUrl: 'partials/register.html?' + now, controller: 'RegistrationController'}
);
$routeProvider.otherwise(
{redirectTo: 'login'}
);
一切都很好.我现在需要做的是从URL中删除hashbang并使用$ location的HTML5模式.到目前为止,我无法让这个工作.
我的假设是我只需要打电话
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
现在应用程序URL更改为
https://www.myserver.com/app/login
https://www.myserver.com/app/register
这不起作用.当我请求URL时
https://www.myserver.com/app
角度重定向到
https://www.myserver.com/login
总的来说,这种变化打破了整个路由和资源加载.例如,无法解析路由定义中的部分URL.它们仅在我添加'/ app /'前缀时才起作用.
我尝试使用基本标记,将$ locationProvider调用更改为
$locationProvider.html5Mode({
enabled: true
});
和使用
<base href="/app">
令人惊讶的是,这没有任何效果.仍然,输入https://www.myserver.com/app会导致AngularJS重定向到https://www.myserver.com/login.网址https://www.myserver.com/app/login不可用.
这就是我使用基本标签的方式:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<link href="css/mycss" rel="stylesheet" type="text/css">
...
<script src="js/my.js"></script>
<base href="/app">
</head>
<body …推荐指数
解决办法
查看次数
如何使用AngularJs将一个页面导航到另一个页面
如何从一个页面导航到另一个页面.假设我有一个登录页面,在输入用户名和密码文件后,点击提交按钮需要验证,如果用户名和密码都正确,则需要进入主页.主页内容需要显示.我在这里发布代码.在浏览器中,网址正在发生变化,但内容不会发生变化
的index.html
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
</head>
<body >
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span><b>Username :</b> <input type="username"
class="form-control" ng-model="user.name" required> </span> </br>
</br> <span><b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required> </span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit">
<b>Sign in</b>
</button>
</form>
</div>
<!-- /container -->
</div>
<script src='test.js' type="text/javascript"></script>
</body>
</html>
home.html的
Hello I am from Home page
test.js
var applog = angular.module('myApp',['ngRoute']);
applog.config([ '$routeProvider', …推荐指数
解决办法
查看次数
当角度ui路由器状态改变时触发ios地址栏
我正在使用Angular UI路由器.每当我点击ui-sref的链接时,ios移动浏览器的地址栏就会显示出来.例如,当我向下滚动时,地址栏会隐藏,如果我点击链接并且页面转换完成,则ui地址栏会立即显示.由于地址栏因为页面突然向下移动一点,这使得用户不太友好.
这个网站和我有同样的问题.
这不会发生在Android chrome上.并且只发生在ios safari中.我测试过的版本是ios 9.
我试过隐藏的溢出但这不是我想要的解决方案,因为地址栏始终可见.
是什么引发了这种行为？
mobile-safari ios angularjs angularjs-routing angular-ui-router
推荐指数
解决办法
查看次数
AngularJS Codeigniter base_url路径设置
我正在使用Codeigniter 3和AngularJs创建一个网站.虽然delevolping我在codeigniter中遇到了基本URL的一些问题.我附加了我的目录struture的图像文件.
在我的主页(views/home.php)中,我添加了一个用于加载不同页面的ng-view.在这里,我使用angularjs ngRoute进行路由.
这是我的代码.
var myApp = angular.module("myApp",["ui.bootstrap","ui.router","ngRoute"]);
myApp.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "application/pages/mainpage.php"
})
.when("/about", {
templateUrl : "application/pages/about.html"
})
.when("/services", {
templateUrl : "application/pages/services.html"
})
.otherwise("/",{
templateUrl: "application/pages/mainpage.php"
});
});
在mainpage.php里面,我列出了一些驻留在json文件(datas/data.json)中的配置文件内容(虚拟内容).所有内容都列出了.在这个列表中,我放置了一个按钮,其中ng-click ="myName"
这是代码:
<div class="container" ng-controller="ListController">
<div class="row">
<div class="col-lg-12 text-center">
<h1>Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change</p>
<div class="row">
<div class="col-sm-6 col-md-4 wow zoomIn" data-wow-delay="0.5s" ng-repeat="items in artists">
<div class="thumbnail">
<img ng-src="{{settings.base_url}}/application/assets/images/profile/{{items.shortname}}.jpg" alt="...">
<div class="caption">
<h3>{{items.name}}</h3>
<p>{{items.bio}}</p> …url angularjs codeigniter-3 angularjs-routing twitter-bootstrap-3
推荐指数
解决办法
查看次数