Created
October 18, 2013 13:16
-
-
Save thekarel/7041382 to your computer and use it in GitHub Desktop.
AngularJS: Multiple controllers and 1 ng-view on the same page, plus embedded directives
This file contains 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
| /** | |
| * Create the app | |
| */ | |
| var appOne = angular.module('appOne', ['ngRoute']); | |
| /** | |
| * Configure routing - so controllerTwo runs | |
| */ | |
| appOne.config(['$routeProvider', function($routeProvider) { | |
| $routeProvider.when('/', { | |
| template: '<p>{{text}}</p>', | |
| controller: 'controllerTwo' | |
| }). | |
| otherwise({ | |
| redirectTo: '/' | |
| }); | |
| }]); | |
| /** | |
| * Controllers | |
| */ | |
| appOne.controller('controllerOne', function($scope) { | |
| $scope.text = '1'; | |
| }); | |
| appOne.controller('controllerTwo', function($scope) { | |
| $scope.text = '22'; | |
| }); | |
| appOne.controller('controllerThree', function($scope) { | |
| $scope.text = '333'; | |
| }); | |
| /** | |
| * Directives | |
| */ | |
| appOne.directive('fishandchips', function() { | |
| return { | |
| restrict: 'AE', | |
| template: 'Fish and <chips></chips> - Yamm' | |
| }; | |
| }); | |
| appOne.directive('chips', function() { | |
| return { | |
| restrict: 'AE', | |
| template: 'chips!' | |
| }; | |
| }); |
This file contains 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> | |
| <head> | |
| <title>The Application</title> | |
| <script type="text/javascript" src="lib/angular/angular.min.js"></script> | |
| <script type="text/javascript" src="lib/angular/angular-route.min.js"></script> | |
| <script type="text/javascript" src="js/app.js"></script> | |
| </head> | |
| <body ng-app="appOne"> | |
| <h1>Multiple apps on the same page</h1> | |
| <div id="one" ng-controller="controllerOne"> | |
| <div> | |
| <p>{{text}}</p> | |
| </div> | |
| </div> | |
| <div id="two"> | |
| <div ng-view></div> | |
| </div> | |
| <div id="three" ng-controller="controllerThree"> | |
| <div> | |
| <p>{{text}}</p> | |
| <fishandchips></fishandchips> | |
| <d data-fishandchips=""></d> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
, bn,bhmj,bhm.