-
-
Save richfergus/6cadea153d7c9b80ea50 to your computer and use it in GitHub Desktop.
Replacing ngInclude With Component Directives In AngularJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module( "Demo" ).directive( | |
| "friendsList", | |
| function() { | |
| // Return the directive configuration. | |
| return({ | |
| controller: "FriendsListController", | |
| link: link, | |
| restrict: "A", | |
| templateUrl: "friends-list/friends-list.htm" | |
| }); | |
| // I bind the JavaScript events to the scope. | |
| function link( scope, element, attributes ) { | |
| console.log( "Friends list directive linking." ); | |
| } | |
| } | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html ng-app="Demo" ng-controller="AppController"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>{{ windowTitle }}</title> | |
| <link rel="stylesheet" type="text/css" href="./demo.css"></link> | |
| </head> | |
| <body | |
| ng-class="{ primary: ( layout == 'primary' ), secondary: ( layout == 'secondary' ) }" | |
| ng-switch="layout"> | |
| <!-- | |
| Each of these ngSwitchWhen directives will conditionally render a COMPONENT | |
| directive. The component directive will take care of rendering a template and a | |
| controller as well as any other nested components that are relevant. | |
| --> | |
| <div ng-switch-when="primary" primary-layout> | |
| <!-- Content provided by component directive. --> | |
| </div> | |
| <div ng-switch-when="secondary" secondary-layout> | |
| <!-- Content provided by component directive. --> | |
| </div> | |
| <p class="legal"> | |
| <strong>Note</strong>: This is a new approach for me, so take with grain of salt. | |
| </p> | |
| <!-- | |
| CAUTION: Commingling ngSwitchWhen directives next static content has only been | |
| available since AngularJS 1.2 (stable). In prior versions, the ngSwitch container | |
| is completely emptied when switching rendering templates. | |
| Load application scripts. | |
| --> | |
| <script type="text/javascript" src="../../vendor/angularjs/angular-1.3.6.min.js"></script> | |
| <script type="text/javascript" src="./app.controller.js"></script> | |
| <!-- Enemies list component. --> | |
| <script type="text/javascript" src="./enemies-list/enemies-list.controller.js"></script> | |
| <script type="text/javascript" src="./enemies-list/enemies-list.directive.js"></script> | |
| <!-- Friends list component. --> | |
| <script type="text/javascript" src="./friends-list/friends-list.controller.js"></script> | |
| <script type="text/javascript" src="./friends-list/friends-list.directive.js"></script> | |
| <!-- Primary Layout component. --> | |
| <script type="text/javascript" src="./primary-layout/primary-layout.controller.js"></script> | |
| <script type="text/javascript" src="./primary-layout/primary-layout.directive.js"></script> | |
| <!-- Secondary layout component. --> | |
| <script type="text/javascript" src="./secondary-layout/secondary-layout.controller.js"></script> | |
| <script type="text/javascript" src="./secondary-layout/secondary-layout.directive.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div ng-switch="subview"> | |
| <div ng-switch-when="a" ng-include=" 'a.htm' "></div> | |
| <div ng-switch-when="b" ng-include=" 'b.htm' "></div> | |
| <div ng-switch-when="c" ng-include=" 'c.htm' "></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module( "Demo" ).directive( | |
| "primaryLayout", | |
| function() { | |
| // Return the directive configuration. | |
| return({ | |
| controller: "PrimaryLayoutController", | |
| link: link, | |
| restrict: "A", | |
| templateUrl: "primary-layout/primary-layout.htm" | |
| }); | |
| // I bind the JavaScript events to the scope. | |
| function link( scope, element, attributes ) { | |
| console.log( "Primary layout directive linking." ); | |
| } | |
| } | |
| ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1> | |
| Replacing ngInclude With Component Directives In AngularJS | |
| </h1> | |
| <p> | |
| This is the <strong>primary</strong> layout. | |
| <!-- | |
| NOTE: For simplicity of the demo (since we're not using URL-based routing), this | |
| method is inherited from the app-controller. | |
| --> | |
| <a ng-click="showSecondaryLayout()">Show secondary layout</a> | |
| </p> | |
| <!-- | |
| From this component (primary layout), we're going to "include" another component | |
| to look at how nested layouts can be achieved without ngInclude. | |
| --> | |
| <div friends-list> | |
| <!-- Content provided by component directive. --> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- a.htm. --> | |
| <div ng-controller="ViewAController"> | |
| Some more stuff here. | |
| <!-- Nested layout here. --> | |
| <div ng-switch="subview"> | |
| <div ng-switch-when="x" ng-include=" 'x.htm' "></div> | |
| <div ng-switch-when="y" ng-include=" 'y.htm' "></div> | |
| <div ng-switch-when="z" ng-include=" 'z.htm' "></div> | |
| </div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment