标签: angularjs-routing

在.NET MVC中,存在@Url.Action()和在RoR中存在url_for()

我在angularjs中找不到类似的url building helper.

我已经提供了构建url所需的所有东西,$routeProvider所以:$routeProvider.urlFor("MyCtrl", {id: 5})可能很高兴.

我的主要目标是避免在视图和其他地方使用硬编码的网址,并避免重复网址/路由模式两次.

更新:

似乎很难解释我想要的东西,所以这里是我想要的确切示例:

而不是在视图中写这个:

<a ng-href="/product/5">foo</a>

我想写这个:

<a ng-href="urlFor("ProductCtrl", {id:5})">foo</a>

因此,如果以后我决定改变ProductCtrl的路径,我就不必在这个元素中更新url.

什么是我的目标的好方法？

我正在尝试实现经典的列表/细节UI.单击列表中的项目时,我想显示该项目的编辑表单,同时仍显示列表.我正在尝试解决Angular的每页1个视图限制,并决定将所有URL路由到同一个控制器/视图.(也许这是我问题的根源,我对其他选择持开放态度.)

路由:

$routeProvider
    .when('/list', { templateUrl: '/Partials/Users.html', controller: UserController })
    .when('/edit/:UserId', { templateUrl: '/Partials/Users.html', controller: UserController })
    .otherwise({ redirectTo: '/list' });

视图(/Partials/Users.html):

<!-- List of users -->
<div ng-repeat="user in Users">
    <a href="*/edit/{{ user.Id }}">Edit {{ user.Name }}</a>
</div>

<!-- Edit form -->
<div>
    {{ SelectedUser.Name }}
</div>

控制器:

function UserController($scope, $routeParams) {
    // the model for the list
    $scope.Users = GetUserListFromService();

    // the model for the edit form
    if ($routeParams.UserId != null)
        $scope.SelectedUser = GetUserFromService($routeParams.UserId);
}

问题: …

我有一个角度应用程序,托管在我的大学服务器上.

因为应用程序不在域根目录中(URL构造如下university.domain/~<student_id>:)所有链接和图像srcs都被破坏(angular假定它位于域根目录中).

我的问题是:如何覆盖角度基本网址,以便我仍然可以使用ng-href,ng-src等好东西？

我使用$ routeParams从URI中提取属性并将本地变量设置为它们.

当我使用typescripts键入来设置$ routeParams的类型时,我无法访问$ routeParams.

如何访问$ routeParams中的属性？

class Controller{
    constructor($routeParams: ng.route.IRouteParamsService, private $location: ng.ILocationService)
        this.propetry1 = this.getProperty1($routeParams.property1);
    }

    property1: string;

    getProperty1(input: string):string{
        return (input || "Not present");
    }

}

ng.route.IRouteParamsService代码是:

interface IRouteParamsService {
    [key: string]: any;
}

这有一个错误:属性'property1在ng.route.IRouteParamsService的类型上不存在'

如果我将$ routeParams的类型更改为:any,则它会正确设置property1.如何在仍然访问$ routeParams中的属性的同时保持Typescript的严格输入？

我是AngularJs的新手.我有一个单页应用程序,其路由配置有控制器和视图.视图将加载<ng-view></ng-view>到index.html页面元素中.在控制器内部,我正在http调用以获取数据并将数据绑定到$scope.对于成功方案,这可以正常工作但如果有错误,我如何插入另一个视图而不是在角度路径内配置的默认视图.请告诉我.

我是AngularJS的新手,对有关事件监听器的文档感到困惑.

该文档列出了该$routeChangeSuccess事件的以下内容:

$ routeChangeSuccess解析路由依赖关系后广播.ngView侦听指令以实例化控制器并呈现视图.

类型:

广播目标:

根范围

但是,它没有引用传递给回调函数的任何参数.然而,我在SO上看到的大多数示例都有类似的回调函数列表:

$rootScope.$on("$routeChangeSuccess", function(event, next, current) {
   ...
});

根据AngularJS文档,所有回调都有第一个参数event.我明白了.但是,在是next与current来自哪里？在任何文档中列出的是哪里？

我发现了几个类似的问题,但没有一个答案有帮助.他们似乎都涉及某种类型的$location依赖,我无法正确注入.

我的代码如下:

(function() {

    // App dependencies
    var app = angular.module('portalExchange',
                        ['ngRoute',
                         'app-products',
                         'app-manage',
                         'app-profile']);

    // [ Main Controller ] : PortalController
    app.controller('PortalController', function($scope) {
        if ($('.top_link_dashboard').hasClass('unactive_top')) {
            $('.top_link_dashboard').removeClass('unactive_top');
            $('.top_link_dashboard').addClass('active_top');
        }
    });

    // Controller for Dashboard
    app.controller('DashboardController', function() {
    });

    // Controller for Developers
    app.controller('DevelopersController', function($scope) {
        // Page.setTitle('Developers');
    });

    // Controller for Quote
    app.controller('QuoteController', function($scope) {
        // Page.setTitle('Begin Quote');
    });

    // Directive for Header
    app.directive('appHeader', function () {
        // Type of Directive, E for element, …

我使用ng-repeat设置如下导航,效果非常好

<a ui-sref="{{link.Route}}" ng-click="clickLink(link)">
    <span class="title"> {{link.Text}} </span><span class="selected"></span>
</a>

但是,我的导航项经常有子链接,这意味着父链接实际上不是导航链接,它只是用于展开和查看子链接.但有时它是一个链接,并没有要显示的子链接.

问题出在那些特殊情况下,当没有可用的状态时,我需要一起删除ui-sref,因为根本不应该有链接.有它在那里抛出'错误:无效状态参考'''

当状态不可用时,如何删除ui-sref？

使用ui-router,我在状态函数中添加所有解析逻辑,如下所示;

    //my-ctrl.js
    var MyCtrl = function($scope, customers) {
      $scope.customers = customers;
    }

    //routing.js
    $stateProvider.state('customers.show', {
      url: '/customers/:id',
      template: template,
      controller: 'MyCtrl',
      resolve: {   // <-- I feel this must define as like controller
        customers: function(Customer, $stateParams) {
          return Customer.get($stateParams.id);
        }
      }
    });

但IMO,resolve对象必须属于控制器,如果在控制器文件中定义它,则易于读取和维护.

    //my-ctrl.js
    var MyCtrl = function($scope, customers) {
      $scope.customers = customers;
    }
    MyCtrl.resolve = {
      customers: function(Customer, $stateParams) {
        return Customer.get($stateParams.id);
      };
    };

    //routing.js
    $stateProvider.state('customers.show', {
      url: '/customers/:id',
      template: template,
      controller: 'MyCtrl',
      resolve: 'MyCtrl.resolve'   //<--- Error: …

如何使用$state.go将查询字符串传递给嵌套状态路由？

码:

 .state('masterform', {
        url: "/masterform?action&assetId&contentTypeId&folderid",
                views: {
                    content: {
                        templateUrl: 'components/masterform/masterform.html',
                        controller: 'masterformCtrl as masterform'
                    }
                }
            })
            .state('masterform.access', {
                url: "/access",
                views: {
                    content: {
                        templateUrl: 'components/masterform/access/access.html',
                        controller: 'accessCtrl as access'
                    }
                }
            })

谢谢.