AngularJS Best Practices: ng-include vs directive

For building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the main content is the central DIV which will have its content varying between routes, header and footer will be almost always the same, sidebar can vary in certain pages.

Based on the your page structure, at least for headers and footers you do not need to use directives, there would be only single rendering for these controls. Standard ng-include with a partial and maybe a linked controller would do. Remember ng-include itself is a directive.

Directive would be useful where you want a component that needs to used across pages, your headers and footer nav do not fit this bill as there is a single instance of these elements on the page.

But I prefer directives because ng-include only breaks down the view part into smaller modules. By using directives, even if it is used only once, you still nicely modularize your page into smaller independent components. Markup of the parent page looks much nicer and you don‘t have to clutter your controller with more methods.

时间： 2024-10-09 14:30:47

AngularJS Best Practices: ng-include vs directive的相关文章

【AngularJs】---"Error: [ng:areq] Argument 'fn' is not a function, got Object"

项目中把controller.service抽取出来 一步一步没有报错 index那里加 <script src="js/controllers/XXController.js"></script>就报错了 [原因] 我抽取出来的controller头部也这样写了 angular.module('gflt.controllers', []) 正确写法 angular.module('gflt.controllers') [AngularJs]---"E

angular 中怎么获取路径上的参数 参考：https://docs.angularjs.org/api/ng/service/$location

参考: https://docs.angularjs.org/api/ng/service/$location 原文地址:https://www.cnblogs.com/lshan/p/8855042.html

Part 16 ng include directive in AngularJS

ng-include directive is used to embed an HTML page into another HTML page. This technique is extremely useful when you want to reuse a specific view in multiple pages in your application. The value of ng-include directive can be the name of the HTML

AngularJS Best Practices: SEO

Google can execute AJAX & JavaScript for indexing, you can read the below link for more detailed information:Ajax crawling full specification: https://developers.google.com/webmasters/ajax-crawling/docs/specification From the above link you will know

在AngularJS中实现一个延迟加载的Directive

所谓的延迟加载通常是:直到用户交互时才加载.如何实现延迟加载呢? 需要搞清楚三个方面: 1.html元素的哪个属性需要延迟加载?2.需要对数据源的哪个字段进行延迟加载?3.通过什么事件来触发延迟加载? 自定义的Directive的页面表现大致是这样: <ul> <li ng-repeat="cust in customers" delay-bind="{{::cust.street}}" attribute="title" tr

AngularJS Best Practices: Directory Structure

app/----- common/ // Acts as reusable components for your app---------- header/--------------- controllers/-------------------- header.controller.js--------------- views/-------------------- header.tpl.html---------- sidebar/--------------- controlle

angularjs compile vs link

https://docs.angularjs.org/guide/directive https://docs.angularjs.org/api/ng/service/$compile https://docs.angularjs.org/guide/compiler https://docs.angularjs.org/api/ng/service/$interpolate https://docs.angularjs.org/api/ng/provider/$compileProvider

angular attrs.$observe和$scope.$watch的区别

http://stackoverflow.com/questions/14876112/difference-between-the-observe-and-watch-methods https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes $observe()是Attributes 对象的一个方法,它只能用于observe/watch一个DOM attribute的value change.它只在directiv

深究AngularJS(4)——Directive和Scope数据隔离与交互

什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简单的 directive 功能.当你需要创建一个可重复使用的 directive,只是偶尔需要访问或者修改父 scope 的数据,就需要使用隔离 scope.当使用隔离 scope 的时候,directive 会创建一个没有依赖父 scope 的 scope,并提供一些访问父 scope 的方式.