如何为大型可扩展的AngularJS应用程序布局文件夹结构？

我有这个节点服务器运行:

var server=http.createServer(function(request, responsehttp) {
    if (request.method == 'POST') {
        var body = '';
        request.on('data', function (data) {
            body += data;
        });
        request.on('end', function () {
            var POST = qs.parse(body);
            processquery(POST, request, responsehttp);
        });
    } else {
        var url_parts = url.parse(request.url, true);
        var query = url_parts.query;
        console.log(query);
        processquery(query, request, responsehttp);
    }
});

我想为此服务器添加登录表单.所以当用户通过身份验证后会显示.

   function processquery(query, request, responsehttp){
    var returnResult = function (data){
        responsehttp.end(JSON.stringify(data));
    };

    if (!query.command) {
        fileprocess(request, responsehttp);
    }
    responsehttp.writeHead(200, {"Content-Type": "application/json"});
    switch(query.command) {
        case 'logout':
            logout(query, returnResult);
            break; …

尽管在ChildCtrl中实例化了一个"new"var,我怎样才能进行变量并轻松地将它们传播回ParentCtrl？最小到没有$ on和$ watch的额外积分(使其更容易实现)

ParentCtrl

• ChildCtrl/ChildCtrl2/ChildCtrl3/ChildCtrl4

  • 视图

我的ChildCtrl是不同的,我不能轻易地抽象主布局和ng视图,但它们都依赖于ParentCtrl中的相同功能.

$ scope.searchTerms在ParentCtrl中定义,但带有ng-model ='searchTerms'的输入框位于子控制器的视图中.当这个var改变时,它不会在ParentCtrl中反映出ChildCtrls.

示例:http: //jsfiddle.net/JHwxP/22/

HTML部分

<div ng-app>
    <div ng-controller="Parent">
        parentX = {{x}} <br/>
        parentY = {{y}}<br/>
        <div ng-controller="Child">
            childX = {{x}}<br/>
            childY = {{y}}<br/>
            <a ng-click="modifyBothScopes()">modifyBothScopes</a><br>
            <br>
            The changes here need to appear in 'Parent'. <input ng-model='y'>
        </div>
    </div>
</div>

控制器

function Parent($scope) {
    $scope.x= 5;
    $scope.y= 5;
}

function Child($scope) {
    $scope.modifyBothScopes= function() {
       $scope.$parent.x++;
    };  
}

UPDATE

我目前正在尝试共享服务方法:https://gist.github.com/exclsr/3595424

UPDATE

尝试发射/广播系统

已解决问题:我在父级中存储了$ scope.searchTerms,并且在更改时在子$ scope中创建了一个空格.

解决方案:我应该在父级中完成$ scope.search.terms,当在子级中更改时,它会冒泡到父级. …

可能重复:
Facebook Sharer如何选择图像？

如何创建一个链接,我可以自定义共享的标题,图像,链接和描述？

问题:

我正在尝试从jQuery重新创建Draggable + Sortable功能,并且无法将被删除的元素放入我的对象数组中.

我想将$ .draggable()按钮拖到$ .sortable()列表中.我希望按钮代表具有属性的对象(可以是关联数组,或对象本身),当我将其放入列表中时我希望它将自己放入数组中的位置.

为了清楚起见:我在左边的菜单中有一系列潜在的对象.在右边,我使用$ http来调用我的API来检索一个包含所有字段的表单,这些字段都保存在$ scope中.我希望将该潜在对象(如textarea)放入该表单的删除位置的字段中.

jquery位很简单,但是$ scope数组中不存在的对象是问题所在.

我尝试过的:

我很接近混合使用ui-sortable和$ .draggable指令包装器,但我的代码工作得不好.

例子:

• KnockoutJS示例:http://bit.ly/15yrf8X
• jQuery演示:http://jqueryui.com/draggable/#sortable

更新1:

我已经取得了进展,使用ui-sortable like指令结合包装$ .draggable()的指令,有点丑陋但有效.

更新2:

我现在有它工作但我从jquery获取索引并使用php将其切片到该位置然后重新加载整个列表.谈论跛脚必须有更好的方法.

更新3:

这是一个模块化的工作示例,适用于任何人的应用程序.

http://clouddueling.github.io/angular-common

<select>
    <option value=''>-- Select an Option --</option>
    @foreach ($options as $option)
        <option value='{{ $option->value }}'>{{ $option->name }}</option>
    @endforeach
</select> 

选择第一个动态选项

我在编写用于构建基于团队的协作平台的安全规则时遇到困难.

1. 当用户注册时,他们应该能够创建一个团队并邀请用户加入该团队.
2. 项目应归团队所有.
3. 只有该团队中的用户才能查看该项目.
4. 用户应该只看到他们所属的团队.

如何编写.read安全规则,以便用户只能看到他们所在团队的信息？

我应该只列出两个队,因为我属于他们github:8272012.

现行安全规则:

{
    "rules": {
        ".read": true, 
        "users": {
          "$user": {
            //can add a message if authenticated
            ".write": "auth.uid === $user" 
          }
        }, 
        "teams": {
            "$team": {
                "users": {
                    // can write to the users list only if ADMINISTRATOR
                    "$user": {
                        ".write":"newData.parent().child(auth.uid).val() === 99"
                    }
                }
            }
        },
        "projects": {
          "$team": {
            "$project": { 
                //can add a message if they are a MEMBER
                ".write": "(!data.exists() && newData.exists() && root.child('teams/' + $team + '/users/' + …

我试过了:

• 节点webshot
• phantomjs

我可以在本地做,但我无法截取基于angularjs的其他网站的截图.

赏金

能够截取任何angularjs应用程序的屏幕截图,其中包括页面上的jquery和angular.这里的每个站点:http://builtwith.angularjs.org/应该看起来好像我在浏览器中加载它.

必须能够通过终端获取屏幕截图,以便它可以在后台进程中运行,如工作人员或其他东西.

一个随机服务器(或任何应该能够访问异地网站并截取它的屏幕截图.)

它只需要一个url,它将不可避免地托管一个angularjs应用程序,并输出你期望在浏览器中看到的内容.

不需要是phantomjs或node-webshot.

更新1

截至昨晚,我正在这样做.

• node-webkit(在chrome中的nodejs)编译为linux-32
• 在随机笔记本电脑上打开
• 当它检测到需要截取的屏幕截图时(暂时通过firebase),它会打开一个带有该URL的iframe
• 等待10秒(加载网站/应用程序的合理时间)
• 使用node-webkit api来截取自己

我有一些工作要做这个解决方案.

更新2

这似乎是一个潜在的解决方案,但我发现大多数这些解决方案都需要打开浏览器并采用屏幕截图与无头浏览器(如phantomjs)相比.

• http://browsershots.org/documentation#HowToCreateANewScreenshotFactory
• Browserstack.com

更新3

我正在继续开发github上的生产就绪解决方案. https://github.com/clouddueling/angular-snapshot

如果您使用此代码并使用node-webkit.app构建它,您将能够运行屏幕截图服务器.

我正在构建类似于kitchennsink示例的东西,除了我需要能够拥有多个视图.

http://fabricjs.com/kitchensink

名片:正面和背面

在编辑时,我会定期保存JSON.

如果你想在不重新加载页面的情况下编辑后面(因为我使用的是AngularJS),如何擦除当前画布并重新加载新的JSON？

我正在加载JSON,你点击更改视图,我运行canvas.clearContext(),并重新加载新的JSON.这不符合我的预期.

更新

我正在使用指令来管理这个画布.当JSON可用时,我正在使指令实例化,当我尝试更新它时,无论出于何种原因,它都不起作用.

我删除了它并使指令启动为空,现在我只是通过服务loadJson.好极了!

我的画布是1000 x 1000,我希望导入的svg是500 x 500但它的svg尺寸是300 x 300(插图画家的尺寸)

我如何才能object.setHeight(400)加载这个svg？当我做类似的事情时,选择框最终填充或与对象不对齐.

addShapeObject = function(canvas, element, scope) {
    loadingElementIds.push(element.id);
    fabric.loadSVGFromURL('/lib/svg/' + element.filename + '.svg', function(objects, options) {
        var object = fabric.util.groupSVGElements(objects, options);
        object.top = element.top;
        object.left = element.left;


        object.rotatingPointOffset = 20;
        object.scaleY = element.height / object.height;
        object.scaleX = element.width / object.width;

        object.padding = 5;

        canvas.add(object).renderAll();
        sortObjects(canvas);
        setObjectsZoom(canvas, scope);
    });
},

示例SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC …