我正在编写一个小型AngularJS应用程序,它具有登录视图和主视图,配置如下:
$routeProvider
.when('/main' , {templateUrl: 'partials/main.html', controller: MainController})
.when('/login', {templateUrl: 'partials/login.html', controller: LoginController})
.otherwise({redirectTo: '/login'});
我的LoginController检查用户/传递组合并在$ rootScope上设置一个反映这个的属性:
function LoginController($scope, $location, $rootScope) {
$scope.attemptLogin = function() {
if ( $scope.username == $scope.password ) { // test
$rootScope.loggedUser = $scope.username;
$location.path( "/main" );
} else {
$scope.loginError = "Invalid user/pass.";
}
}
一切正常,但如果我访问http://localhost/#/main我最终绕过登录屏幕.我想写一些类似"每当路由改变时,如果$ rootScope.loggedUser为null然后重定向到/ login"
...
......等一下 我能以某种方式听路线变化吗？无论如何我会发布这个问题并继续寻找.
我想使用AngularJS读取URL查询参数的值.我正在使用以下URL访问HTML:
http://127.0.0.1:8080/test.html?target=bob
正如所料,location.search是"?target=bob".为了访问target的值,我发现在Web上列出了各种示例,但它们都不能在AngularJS 1.0.0rc10中使用.特别是以下是undefined:
$location.search.target$location.search['target']$location.search()['target']谁知道什么会有用？(我$location用作控制器的参数)
更新:
我在下面发布了一个解决方案,但我并不完全满意.开发人员指南中的文档:Angular Services:使用$ location表示以下内容$location:
我什么时候应该使用$ location？
任何时候您的应用程序需要对当前URL中的更改做出反应,或者您想要在浏览器中更改当前URL.
对于我的场景,我的页面将从具有查询参数的外部网页打开,因此我本身并不"对当前URL的更改作出反应".所以也许$location不是适合这项工作的工具(对于丑陋的细节,请参阅下面的答案).因此,我更改了"如何使用$ location在AngularJS中读取查询参数？"这个问题的标题."在AngularJS中读取查询参数的最简洁方法是什么？" 显然我可以使用javascript和正则表达式进行解析location.search,但是对于那些基本的东西来说,这种低级别的东西真的会冒犯我的程序员的敏感性.
所以:有没有$location比我在答案中更好的使用方式,或者是否有简洁的替代方案？
是否可以从angular.js网址中删除#符号？
当我更改视图并使用params更新URL时,我仍然希望能够使用浏览器的后退按钮等,但我不想要#符号.
教程routeProvider声明如下:
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
如果没有#,我可以编辑它以具有相同的功能吗？
我正在尝试使用AngularJS 的ng-click功能来切换视图.我将如何使用下面的代码执行此操作？
的index.html
<div ng-controller="Cntrl">
<div ng-click="someFunction()">
click me
<div>
<div>
controller.js
function Cntrl ($scope) {
$scope.someFunction = function(){
//code to change view?
}
}
我期待在Stackoverflow上看到这个问题,但没有.显然我是唯一一个有这个问题的人,在我看来很常见.
我有一个我正在研究的基本项目,但即使我到目前为止所做的一切看起来都是正确的,但这些路线似乎并不起作用.
我的文件中有这段html index.html:
<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<a href="#/add-quote">Add Quote</a>
<div ng-view ></div>
</body>
</html>
这是我的app.js:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
现在,当我访问该页面时,这是我在网址中得到的内容:
当我点击Add quote按钮时,我得到了这个:
这可能是什么问题？感谢帮助
angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6
我想从当前URL中提取数据并在控制器中使用它.例如,我有这个网址:
app.dev/backend/surveys/2
我要提取的位:
app.dev/backend/ :类型/:ID
Angular中有什么可以帮助我完成这项任务吗？
我想知道我如何Controller as结合使用语法,ngRoute因为我无法做到ng-controller="Controller as ctrl"
最近我注意到ngRoute在AngularJS应用程序中使用模块时,路由包含#!在URL中,之前就是#.
例如,www.webiste.com/#/login成为www.website.com/#!/login
我必须启用html5Mode并禁用requireBase使用代码整体删除基础,
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
并且URL更改www.website.com/login工作正常,但具有误导性,而不是Angular SPA URL的样子.
如果我没有启用html5Mode,则URL被编码,我无法解决它.所以www.website.com/#/login变成www.website.com/#!/#%2Flogin(注意后者/被编码为%2F).
这是开发人员针对某些特定目的实施的更改吗？它有什么不同？我需要对应用程序进行哪些更改才能使其正常运行？难道我做错了什么？
javascript angularjs single-page-application ngroute angularjs-ng-route
我想开始使用Angular的ui-router而不是ngRoute.最初,我的app配置看起来像
myApp.config(["$routeProvider",
function($routeProvider) {
$routeProvider
.when("/search", {
templateUrl: "partials/customerSearch.html"
})
.when("/home", {
templateUrl: "partials/home.html"
})
.when("/login", {
templateUrl: "partials/login.html",
controller: "LoginCtrl"
})
.otherwise({
redirectTo: "/home"
})
;
}
]);
我换掉了库,并更改了配置.我知道我仍然可以使用$routeProvider,但这似乎是一种传统的解决方法.
myApp.config(["$urlRouterProvider", "$stateProvider",
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider
.when("/search", "partials/customerSearch.html")
.when("/home", "partials/home.html")
.when("/login", "partials/login.html")
.otherwise("/home")
;
$stateProvider
.state({
name: "customer",
url: "/customer/:username",
templateUrl: "partials/customer.html"
})
.state({
parent: "customer",
name: "details",
url: "/details",
templateUrl: "partials/customerDetails.html"
})
;
}
]);
这给了我似乎表明$digest陷入循环的错误.我怀疑这条.otherwise("/home")规则.我handler是否正确指定了s,就好像它们是模板URL一样？
如果我评论出.when()s,除了之外没有任何作用 …
我只是在做这个:
app.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/asd/:id/:slug',{
templateUrl:'views/home/index.html',
controller:'Home',
publicAccess:true,
sessionAccess:true
});
:id和:slug是动态参数.
现在我想要check if current url matches那条路线(/asd/:id/:slug)
例如网址: asd/5/it-is-a-slug
哪种方式最简单？
我试过这个:
$rootScope.$on('$routeChangeStart', function(){
console.log($route.current);
});
但有时它在切换页面路由时在控制台中不返回任何内容