标签: angularjs-routing

我打算在我的大型应用程序中使用AngularJS.所以我正在寻找合适的模块.

是什么区别(角route.js)ngRoute和UI的路由器(角-UI-router.js)模块？

在使用ngRoute的许多文章中,使用$ routeProvider配置路由.但是,当与ui-router一起使用时,路由配置为$ stateProvider和$ urlRouterProvider.

我应该使用哪个模块来提高可管理性和可扩展性？

我想知道是否有一种方法(类似于Gmail)AngularJS 延迟显示新路由,直到每个模型及其数据已使用其各自的服务获取.

例如,如果ProjectsController列出了所有项目以及project_index.html显示这些项目的模板,Project.query()则会在显示新页面之前完全获取.

在此之前,旧页面仍将继续显示(例如,如果我正在浏览另一个页面,然后决定查看此项目索引).

当路线改变时,我发现了一些不受欢迎的行为,至少对我而言.在教程http://angular.github.io/angular-phonecat/step-11/app/#/phones的第11步中, 您可以看到手机列表.如果您滚动到底部并单击最新的一个,您可以看到滚动不在顶部,而是在中间.

我也在我的一个应用程序中找到了这个,我想知道如何让它滚动到顶部.我可以手工做,但我认为应该有其他优雅的方式来做这个,我不知道.

那么,当路线改变时,是否有一种优雅的方式滚动到顶部？

假设您正在使用路线:

// bootstrap
myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'HomeCtrl'
    });
    $routeProvider.when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'AboutCtrl'
    });
...

在您的html中,您希望在单击按钮时导航到about页面.一种方法是

<a href="#/about">

...但似乎ng-click在这里也很有用.

1. 这个假设是否正确？使用ng-click而不是锚点？
2. 如果是这样,那将如何运作？IE:

<div ng-click="/about">

请解释之间的差异$routeProvider,并$stateProvider在AngularJS.

哪个是最佳做法？

我可以设置一个带有可选参数的路径(相同的模板和控制器,但如果它们不存在,应该忽略一些参数吗？

所以不是写下面两条规则,而是只有一条规则？

module.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
     when('/users/', {templateUrl: 'template.tpl.html', controller: myCtrl}).            
     when('/users/:userId', {templateUrl: 'template.tpl.html', controller: myCtrl})
}]);

像这样的东西([这个参数是可选的])

when('/users[/:userId]', {templateUrl: 'template.tpl.html', controller: myCtrl})
//note: this previous doesn't work

我在他们的文档中找不到任何内容.

有没有办法获得当前状态的先前状态？

例如,我想知道当前状态B之前的状态是什么(之前的状态是状态A).

我无法在ui-router github doc页面中找到它.

我正在AngularJS中构建一个仪表板系统,我遇到了设置url via的问题 $location.path

在我们的仪表板中,我们有一堆小部件.单击它们时,每个都显示更大的最大化视图.我们正在尝试设置深层链接,以允许用户链接到最大化窗口小部件的仪表板.

目前,我们有两条看似/dashboard/:dashboardId和的路线/dashboard/:dashboardId/:maximizedWidgetId

当用户最大化窗口小部件时,我们使用更新URL $location.path,但这会导致视图重新呈现.由于我们拥有所有数据,因此我们不想重新加载整个视图,我们只想更新URL.有没有办法设置网址而不会导致视图重新渲染？

HTML5Mode设置为true.

我正在开发一个新的ASP.NET MVC和AngularJS应用程序,它旨在成为SPA的集合.我正在使用MVC区域概念来分隔每个SPA,然后我在每个MVC区域内使用AngularJS来创建SPA.

由于我是AngularJS的新手,并且未能找到关于将MVC和AngularJS路由相结合的答案,我想我会在这里发布我的问题,看看我是否能得到一些帮助.

我有标准的MVC路由设置,它为每个MVC区域提供服务.

    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapMvcAttributeRoutes();
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
        routes.AppendTrailingSlash = true;
    }

这工作正常,给我的URL如下:

http://servername/Application1/
http://servername/Application2/

现在,在每个应用程序区域内,我正在尝试使用AngularJS路由,也使用$ locationProvider.html5Mode(true); 这样我就可以在每个区域内获得客户端路由,例如:

http://servername/Application1/view1
http://servername/Application1/view2
http://servername/Application2/view1/view1a
http://servername/Application2/view2/view2a
http://servername/Application2/view3

这是我的Application1的AngularJS路由片段:

app1.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    var viewBase = '/Areas/Application1/app/views/';
    $routeProvider
        .when('/Application1/view1', {
            controller: 'View1Controller',
            templateUrl: viewBase + 'view1.html'
        })
        .when('/Application2/view2', {
            controller: 'View2Controller',
            templateUrl: viewBase + 'view2.html'
        })
        .otherwise({ redirectTo: '/Application1/view1' }); …

<h1>{{header}}</h1>
<!-- This Back button has multiple option -->
<!-- In home page it will show menu -->
<!-- In other views it will show back link -->
<a ng-href="{{back.url}}">{{back.text}}</a>
<div ng-view></div>

在我的模块配置中

  $routeProvider.
  when('/', {
    controller:HomeCtrl,
    templateUrl:'home.html'
  }).
  when('/menu', {
    controller:MenuCtrl,
    templateUrl:'menu.html'
  }).
  when('/items', {
    controller:ItemsCtrl,
    templateUrl:'items.html'
  }).
  otherwise({
    redirectto:'/'
  });

控制器

function HomeCtrl($scope, $rootScope){
  $rootScope.header = "Home";
  $rootScope.back = {url:'#/menu', text:'Menu'};
}

function MenuCtrl($scope, $rootScope){
  $rootScope.header = "Menu";
  $rootScope.back = {url:'#/', text:'Back'};
}

function ItemsCtrl($scope, $rootScope){
  $rootScope.header = …