标签: angularjs-routing

是否可以[执行一个功能]例如在请求某个路径时从routeProvider打开一个模态对话框窗口？

myApp.config(function($routeProvider) {
    $routeProvider
        .when('/home',
            {
                controller: 'HomeCtrl',
                templateUrl: 'Home/HomeView.html'
            }
        ).when('/profile/:userId/changepwd',
            function(){                
                $dialog.messageBox(title, msg, btns)
                    .open()
                    .then(function(result){
                    alert('dialog closed with result: ' + result);
                });
            }
        ).otherwise({ redirectTo: '/home' });
});

PS:我想取消路线,而是打开一个对话框.打开对话框不是唯一的问题.取消路线是主要问题.

我偶然发现了Restangular来拨打休息服务.它运作良好,并返回一个承诺.我需要能够拥有调用块.原因是新页面重新加载我在技术上没有登录,但我可能有一个存储在cookie中的令牌.我想针对休息服务验证此令牌.问题是我需要阻止它.

如果发生超时或者它无效,我可以将用户视为未经过身份验证.

这是想要阻止的原因是我想使用$ location.path将它们重定向到新的URL而不是有效的令牌.

这不会发生在特定路由上,因此我无法使用阻塞的解析.它在技术上发生在每条路线上 - 我使用$ on.$ routeChangeStart并检查内部变量是否得到LoggedIn,如果没有登录,我检查存储的令牌.

这在每次页面刷新时发生,但在应用程序内导航时不会发生.

我想要获得的影响是Gmail的工作原理.

期待任何人对此有任何见解

谢谢

我们的想法是在简单的画布游戏开发中使用Angular.从理论上讲,该项目应该从更系统,可管理和可扩展的方面受益.这不是精灵/瓷砖/碰撞游戏,PaperJS用于进行大多数画布绘制和交互.

1. 将Paper.js(或其他画布绘图库)集成到多个NG视图中的最佳方法是什么,以使每个视图代表一个游戏阶段？
2. 是否可以设置一次纸张并在多个视图中使用纸张？
3. 该游戏允许用户重新访问之前的阶段/视图.每次视图/画布加载时我是否必须重新设置Paper？(如下图所示,如果仅在视图第二次访问时出现空白画布,则设置一次)
4. 如何在视图之间传输Paper js信息？例如,捕获视图1中的用户绘图,并在视图3中显示绘图.

背景:

纸JS

我正在开发一个项目来创建一个包含4个阶段的简单画布游戏.我决定使用PaperJS来绘制和动画形状.每个阶段的内容和ui保存在同一论文项目的单独层中.

Angular JS

随着游戏的发展,游戏变得越来越复杂.经过一些研究,我决定使用Angular组织整个游戏,虽然我是Angular的新手.计划:

• 4个游戏阶段分为四个视图,每个视图都有自己的画布
• 自定义指令用于在每个画布上设置纸张
• 使用服务进行画布之间的沟通.例如,允许用户在第一阶段绘制并在第二阶段显示绘图

我在plunker中做了一个模拟,用Paper.js显示基本的设置和动画.每个画布都位于单独的视图中,并启用了路由.

Plunker演示:http://plnkr.co/edit/Um1jTp8xTmAzVEdzk2Oq?p=preview

为了测试,我做了

paper.project.layers[0].children

随时可见.设置完纸张后,触发"添加形状"按钮会按预期将子项引入活动层.

问题1(演示中的Draw1)

在DRAW1中,当视图首次加载时,纸张仅在画布上设置一次:

drawControllers.directive('drawingBoard',['drawService',function(drawService){

function link(scope, element, attrs){

    // setup Paper

    var canvas = element[0];

    if ( scope.objectValue.count < 1){

        paper = new paper.PaperScope();
        paper.setup(canvas);
        scope.setCount( scope.objectValue.count + 1 );

        with (paper) {

            var shape = new Shape.Circle(new Point(200, 200), 200);
                shape.strokeColor = 'black';
                shape.fillColor = 'yellow';

            // Display data in canvas
            var text = new PointText(new Point(20, 20));
                text.justification …

我有一个服务,使用$ http加载数据并返回一个promise(简化为简洁):

angular.module('myApp').factory('DataService', ['$http', function($http) {
  function unwrapFriendList(data) {
    ...
    return unwrappedFriendList;
  }

  return {
    getFriendList: function() {
      return $http.get('/api/friends').then(unwrapFriendList);
    }
  }
}]);

以下是在解析promise并将结果存储在$scope.friends以下内容后使用该数据的视图:

<div ng-repeat='friend in friends'>
  {{friend.firstName}} {{friend.lastName}}
</div>

在将数据加载到控制器中时,我遇到了几种方法.

选项1:使用通过ng-route加载的数据的控制器 resolve

angular.module('myApp').controller('FriendListCtrl', ['$scope', 'friendList', function($scope, friendList) {
  $scope.friends = friendList;
}]);

路线部分:

angular.module('myApp', ...).config(function($routeProvider) {
  $routeProvider
    .when('/friends', {
      templateUrl: 'views/friends.html',
      controller: 'FriendListCtrl',
      resolve: {
        friendList: ['DataService', function(DataService) {
          return DataService.getFriendList();
        }]
      }
    })
    ...
});

选项2:自动触发数据加载的控制器

angular.module('myApp').controller('FriendListCtrl', ['$scope', 'DataService', function($scope, DataService) {
  DataService.getFriendList().then(function(friendList) {
    $scope.friends …

我开始使用Kendo UI mobile,AngularJS,PhoneGap开发移动应用程序.使用Angular路由的东西会很好.但是Kendo UI mobile有自己的路由系统.是否有任何方法可以使用AngularJS路由系统代替Kendo UI移动？

也许有些包装......

我在我的AngularJS应用程序中使用基于哈希的导航/.

如果用户导航到我的应用程序,请执行以下操作:

http://example.com/?foo

页面加载后的一刻,某些东西(可能是Angular)导致地址栏看起来与我预期的不同.

我看到了什么:

http://example.com/?foo#/?foo

我期望看到的内容:

http://example.com/?foo#/

为什么会发生这种情况,我可以将其关闭吗？

我有一个场景,我有一个共享按钮,我有一个容器控制器,名为metaCtrl,它位于html标签上.

还有内部控制器.

我有一个共享按钮,在单击时调用model.share()函数.

码:

app.controller('metaCtrl', function($scope){
$scope.model = {};
    $scope.model.share = function(){
        $location.path('/share').search({'share' : '1'});
    }
});

共享页面的控制器:

app.controller('shareCtrl', function($scope)){
 $scope.layout.shareVisible = $location.path().share == 1 ? true : false;
    $scope.model.share = function(){
         $scope.layout.shareVisible = $scope.layout.shareVisible ? false : true;
         var shareUrlValue = $scope.layout.shareVisible ? 1 : null;

         $location.search('share', shareUrlValue);
    }
});

想法是在整个应用程序中使用相同的HTML模式,但仅在共享页面上切换共享部分(如果用户已在那里),并且如果用户当前不在那里则将用户发送到共享视图.

问题是,在我进入sahre页面,然后返回到另一个页面之后,函数share()在shareCtrl中对函数进行了参考,而不是在metaCtrl中.

在单页面应用程序中,是否有一种方法可以来回切换到AngularJS路径并将其显示回以前显示的相同状态？

通常,这可以通过绑定父作用域中的数据来实现.虽然这很容易设置为轻量级视图,但对于持有大量图形元素的视图来说,这可能很麻烦.

这是一个示例,其中记住先前的路由状态可以增强用户体验:在下一页,想象一下

• 你站在第1项并选择标签2
• 然后转到第2项
• 最后切换回第1项:选项卡2不再被选中:-(

http://angular-route-segment.com/src/example/#/section1/1

在路线之间来回切换时,似乎会破坏/构建视图.

解决方案是将用户界面的状态存储在父作用域中,但它存在以下缺陷:

• 创建一个存储用户界面的所有细节的对象
• 创建关于以与以前相同的状态保存和重置UI的复杂逻辑
• 在数据模型中存储UI状态听起来不是MVC-ish

使用存储视图的div的显示/隐藏可以保存状态,但是不使用任何路由,并且必须手动实现切换业务.我喜欢使用路由,因为1.浏览器历史记录导航(url中的哈希)和2.它很容易设置.

不记住UI状态就像让Chrome在选项卡之间来回切换时重新加载页面:不是非常用户友好.

有角度吗？

谁能告诉我,如果它是有效的使用$routeProvider与Controller as syntax？我遇到了<h1>{{kickController.foo}}</h1>从控制器访问的问题this.foo.

angular.module('ucp.kick', ['ngRoute']).config(function($routeProvider, APP_BASE_URL) {
  return $routeProvider.when(APP_BASE_URL + 'kicks', {
    reloadOnSearch: false,
    navitem: true,
    name: 'Kicks',
    templateUrl: 'kick/partials/kick.html',
    controller: 'kick as KickController'
  });
});

我已经完全初始化了$ stateProvider,我正在使用ui-sref来处理所有这些状态.效果很好.用户按下按钮,然后$ stateProvider进入编辑页面.

在这个页面上,我有一个$ http请求的表单:

 this.pushData = function (data) {
        $http.post('/data/' + $stateParams.dataId + '/otherdata', JSON.stringify({
            id: otherdata.id, 
            name: otherdata.name
        }), configAuth).then(
            function success(response) {
                var addedData = response.data;
                $.notify({message: addedData.name + " has been added"},{type:'success'});

                $state.go('roleInfo({roleId: $stateParams.roleId})');
            },
            function error(data) {
                console.log(data);
                $.notify({message: data.data.message},{type:'danger'});
            }
        );

    }

如果一切正常,我想重定向到其他视图.但是这个:

$ state.go('roleInfo({roleId:$ stateParams.roleId})');

不起作用.我怎么能用params做$ state.go？