角JS - 仪表板的最佳实践 [英] Angular JS - Best Practice for Dashboard

查看:94
本文介绍了角JS - 仪表板的最佳实践的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是pretty新角JS和我的工作有关创建较大的Django应用程序中的角JS供电的仪表板。我已阅读角了很多,但仍然对什么是构造一个角度应用程序,将有许多内构件独立的最好方式的几个问题。

I am pretty new to Angular JS and am working on creating a Angular JS powered dashboard within a larger Django application. I have read a lot on Angular but still have a few questions on what is the best way to structure an Angular application that will have many independent widgets within.

据我所知,只能是每个HTML文档1应用程序与页面上一般是1纳克,查看通话一起,我的问题是我应该设立各个部件,因为它是自己的应用程序或者是有没有办法来渲染和控制一个单一的应用程序中的多个模块?

I understand there can only be 1 app per HTML document along with typically 1 ng-view call on the page, my question is should I be setting up each individual widget as it's own app or is there a way to render and control multiple modules within a single app?

在我的文档的顶部声明目前我有NG-应用

Currently I have ng-app declared at the top of my document

<html lang="en" ng-app="dashboard">

不知道我怎么会令其余的部件,如果我只能用纳克视图一次?

Not sure how I would render the remaining widgets if I can only use ng-view once?

我知道这个问题是pretty主观的,有可能是没有完美的答案,只是寻找一些最佳做法或功能性的建议。

I know this question is pretty subjective and there is probably no perfect answer, just looking for some best practices or functional advice.

谢谢!

推荐答案

有pretty主观的,但使用多个控制器或指令,如果处理得当,可以给你你要找的效果。

It is pretty subjective, but using multiple controllers or directives, if done properly, can give you the effect you're looking for.

例如,

<html ng-app="my-dashboard">
  <body>
    <div class="Some structuring thing">
      <ng-include src="my-header.html"></ng-include>
    </div>
    <div class="Some other thing">
      <ng-include src="my-sidebar.html"></ng-include>
    </div>

    etc...

  </body>
</html>

然后,每个部分可能是它自己的,独立的部件。从那里,你可以把它分成控制器...

Then, each section could be its own, stand-alone component. From there, you can break it down into controllers...

<div ng-controller="my-header-text">
  <p ng-bind="title">

  etc...
</div>
<div ng-controller="my-header-login">
  <p ng-click="login()">Login</p>

  etc...

</div>

和甚至进一步指令。

<my-custom-directive words="user.name"></my-custom-directive>

这个例子是,真的矫枉过正,但点保持;你有很多方式,只要你喜欢,控制粒度。

This example is, really overkill, but the point remains; you've got a lot of ways to control granularity as you like.

就个人而言,这些都是规则我喜欢跟着。

Personally, these are the rules I like to follow.


  1. 一个应用每份文件(如prescribed,还因为它是有道理的。)

  2. 对于每个DOM子树,可以单独一个新的控制器;所以我的登录和仪表盘显然有不同的目的,如果我想的粒度,我就能把每一个到它自己的控制器,并使用服务来妥善处理与根通信我的应用程序。我可以登录到任何网页,不只是仪表盘,并且用户可以使用仪表板甚至不需要登录和退出选项(假设一些默认情况下非登录的用户),因此这些部分可以单独存在,而且体面考生对自己的控制器。

  3. 我喜欢不平凡的HTML块定制指令。它有助于可读性和重用;只是一直尝试使用隔离范围,如果你不能,问题,如果你在做什么是一个真正的指令。写下您的指令,假设它可能不只是你的应用程序中使用,但任何类似的应用程序,包括它和遵循了正确的API。

  1. One app per document (as prescribed, and also because it makes sense.)
  2. A new controller for every DOM sub-tree that can stand alone; so my login and dashboard clearly have different purposes, and if I wanted granularity, I could break each one into its own controller, and use services to properly handle communication with the root of my app. I could login to any page, not just the dashboard, and a user could use the dashboard even without the option to log in and out (assuming some default case for non-logged in users), so these sections can stand alone and are decent candidates for their own controller.
  3. I like custom directives for non-trivial HTML chunks. It helps readability and reuse; just always try to use the isolate scope, and if you can't, question if what you're doing is really a directive. Write your directive assuming that it could be used not just by your app, but any similar app that included it and followed the correct API.

这篇关于角JS - 仪表板的最佳实践的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆