- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我仍在学习 Angular,并已开始创建一个简单的网站。当 url 在该页面上时,我有路由和一些逻辑在菜单项上有一个事件类。我开始看到的问题是,如果我将 url 从/更改为/home,我必须在路由和 View 中更新它,以及查看它是否应该处于事件状态的逻辑。
我想知道是否有更好的方法让它变干?
我的 app.js 文件如下所示:
angular.module('simpleApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home/index.html'
})
.when('/about', {
templateUrl: 'views/about/index.html',
controller: 'AboutController',
controllerAs: 'aboutCtrl'
})
.when('/services', {
templateUrl: 'views/services/index.html',
controller: 'ServicesController',
controllerAs: 'servicesCtrl'
})
.when('/contact', {
templateUrl: 'views/contact/index.html',
controller: 'ContactController',
controllerAs: 'contactCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
我的 index.html 的部分 View 如下所示:
<nav class="navbar navbar-inverse" ng-controller="NavController as navCtrl">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#/">SimpleApp</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="{ 'active': navCtrl.isActive('/')}">
<a href="/#/">Home</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/about')}">
<a href="/#/about">About</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/services')}">
<a href="/#/services">Services</a>
</li>
<li ng-class="{ 'active': navCtrl.isActive('/contact')}">
<a href="/#/contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
如您所见,我在导航 Controller 上调用了 isActive 方法,但我必须始终确保我传入的 url 是正确的。
这是我的导航 Controller :
angular.module('simpleApp')
.controller('NavController', function($scope, $location) {
this.isActive = function (url) {
return url === $location.path();
};
});
最佳答案
如果您不想重复自己,为什么不使用 ng-repeat
?
<ul class="nav navbar-nav">
<li ng-repeat="item in navbarLinks" ng-class="{ 'active': navCtrl.isActive(item.link)}">
<a href="/#{{item.link}}">{{item.text}}</a>
</li>
</ul>
我的意思是,不必重复自己就是它存在的原因。所以你不要重复自己。 ng-repeat
实际上非常适合那些您不想重复自己的情况。如果您想避免重复自己,我建议您使用它。我所说的“它”是指 ng-repeat
。避免重复。
关于javascript - DRY up View 中的逻辑以及 $routing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32125128/
您好,如果没有身份验证,我尝试保护路由,但它不起作用 警告:您不应在同一个 route 使用路线组件和路线渲染;路线渲染将被忽略 App.js import React, { Fragment,
几乎我见过的每个示例,app.js 都使用 require 和路径 ./。我想知道为什么我们不能只使用 /。例如,为什么我们不能执行以下操作。 var express = require('expre
如果router.all()只匹配所有方法,是否可以用router.use()代替?router.use() 和 router.route() 之间有什么区别? 最佳答案 router.all:这意味
在我的 Symfony应用程序我想根据当前用户的文化选择 routing.yml; 'en' => routing.en.yml 'no' => routing.no.yml 等等。 关于如何做到这一
我正在使用 React Router v6 并为我的应用程序创建私有(private)路由。 在文件 PrivateRoute.js 中,我有代码 import React from 'react';
这个问题在这里已经有了答案: Error "Error: A is only ever to be used as the child of element" (14 个回答) Error: [P
我正在关注 Ember Quick Start guide (ember-cli v 2.11),并按照说明构建玩具应用程序。在“定义路线”部分,说明说要运行命令 ember generate rou
这个问题在这里已经有了答案: ReactJS: [Home] is not a component. All component children of must be a or (5 个答
这个问题在这里已经有了答案: ReactJS: [Home] is not a component. All component children of must be a or (5 个答
单击“开始测验”按钮时,我试图导航到“/quiz”。 但是,当我编译我的代码时,我在网站应用程序上收到以下错误:[Home] is not a component. All component ch
我有一点咸菜。我正在使用路由保护(实现 CanActivate 接口(interface))来检查用户是否被授予访问特定路由的权限: const routes: Routes = [ {
我正在尝试测试我的应用程序正在使用的引擎内部的 Controller 。规范不在引擎中,而是在应用程序本身中(我试图在引擎中进行测试,但也遇到了问题)。 我的引擎有以下 routes.rb: Revi
我是Remix的新手,我正在尝试使用V2路由方法实现特定的路由解决方案。。这是一个人为的例子,不是真实的东西,只是为了说明这一点。。我想要的URL方案是:。我从以下几条路线开始:。App/routes
我正在尝试从 rails 2.3.x(使用 subdomain_routes 插件)转换一些子域路由,如下所示: map.subdomain :biz do |biz| biz.resources
我将 Symfony 的 3.1 路由组件用作独立组件。 我想调试路由。 据此: http://symfony.com/doc/current/routing/debug.html 这是通过运行以下命
我是 Sparkjava 的新手,总体上喜欢它。但是,是否必须在 main 方法中定义新的路由/端点?对于任何重要的 Web 应用程序,这将导致一个非常长的 main 方法,或者我需要有多个 main
我刚刚使用node.js 和express.js 开发了一个原型(prototype)。在这里,我使用了 Express 路由来对后端进行 CRUD。 server.js 文件: app.get('/
我不明白 Angular 4 中路由的一些基本概念。 index.html: 文件结构: - app |- app.routings.ts |- collections |-- collection
我在反应路线和理解合成路线方面遇到了一些困难。我尝试了一些代码,但不幸的是,它不能像预期的那样工作。“/”路径运行得很好,但是,当我尝试访问“/Child”时,它似乎不起作用。我认为包装器路由}/>可
我正在尝试使用 cakephp 3 实现 REST api。 为了给我的问题提供一个易于重现的示例,我从全新安装 cakephp 3.1.11 开始。 在 config/routes.php 中,我添
我是一名优秀的程序员,十分优秀!