【问题标题】:How much content should an AngularJs Controller hold?AngularJs 控制器应该保存多少内容?
【发布时间】:2014-09-09 05:24:40
【问题描述】:

堆朋友!长期观看,第一次调查员!

我是一位精通网页设计师。 HTML5、CSS、jQuery、SCSS,(通过 Javascript 学习计划完成了 40%。)Grunt、Yeoman、Foundation、Bootstrap、Compass 等...

开始我第一次尝试 Angular 应用程序。我唯一真正的问题是......

我的控制器应该保存多少内容?

例如,

    app.controller('ControllerNameHere', function ($scope) {
$scope.headerText = 'Header, Yall!';
$scope.introduction = 'Let me introduce myself. My name is Zack. This particular sentence could go on all night. Lets Lorem this a bit... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tristique faucibus lectus id accumsan. Donec in eros id urna rutrum imperdiet nec in metus. Pellentesque faucibus, est vitae efficitur dapibus, lacus nisi sodales elit, eu sollicitudin lorem tellus vitae risus. Pellentesque iaculis orci id accumsan mattis. Duis sodales viverra nunc vitae laoreet. Aenean vitae nulla diam. Etiam semper condimentum diam. Quisque nec tincidunt massa. Aliquam varius eros in bibendum rhoncus. Ut sit amet blandit orci. Vestibulum enim nisl, mollis eleifend felis id, egestas hendrerit purus. Curabitur porta mauris ac orci sodales rhoncus.';
$scope.aSecondaryParagraph = 'Yes, I am a GEEEEE!';});

虽然 1 段似乎不算多,但如果我正在制作一个视频游戏教程网站呢?它很容易包含 150 多个段落标签的信息。这意味着所有文本都将使用“app.js”或我最初加载的任何内容下载

将这些信息静态放置在视图中更好,还是在控制器中动态插入更好?

感谢您抽出宝贵时间! 干杯!

【问题讨论】:

    标签: javascript jquery css angularjs twitter-bootstrap


    【解决方案1】:

    您的内容应该属于您的视图,而不是您的控制器。在 Angular.js 中,控制器应该主要包含函数、动态内容、模型等——提供交互性所需的东西。

    相比之下,您的标题、简介、文本等静态内容应该只是 HTML 并且属于您的视图,除非您真正动态地生成所有内容。

    请记住,HTML 用于保存内容,CSS 用于添加样式,而 Javascript 用于定义行为。 Angular.js 也是如此。

    视图保存内容,控制器帮助定义行为,服务包含独立于视图/任何 DOM 操作的逻辑,指令将相关代码捆绑在一起/进行 DOM 操作,过滤器有助于为您的视图增添一点趣味。

    【讨论】:

      【解决方案2】:

      这真的取决于应用程序,最终客户端将不得不在某处加载 150 多个段落标签。一旦加载。 JS 和 HTML 模板都缓存在客户端机器上。

      如果文本是静态的并且永远不会改变 - 那么最好将其保留在模板中以保持整洁。但是,如果它要改变,那么最好通过 AJAX 动态加载它。

      【讨论】:

      • 在这个特定的应用程序中,不必加载/查看全部内容,而是加载/查看部分内容。您不希望所有维基百科都提供,毕竟只是您的特定标准。但你确实提出了一个有效的观察。取决于应用程序。感谢您的贡献。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2015-12-08
      • 1970-01-01
      • 2016-09-06
      • 1970-01-01
      • 2013-03-12
      • 2015-01-09
      • 2011-05-09
      相关资源
      最近更新 更多