0

I am developing web application through PHP using Codeigniter framework.In controller i am loading 2 views as $this->load->view('menu.html') & $this->load->view('home.html').

In html pages I am using Angularjs framework.As each page have it's own module;but after loading menu.html ,second home.html is not loading properly,as in angularjs there can be only one ng-app.

So how can I add two views on single page using different modules**(For each html i have created separate Module files,means separate javascript files**)

shruti
  • 9
  • 2
  • 1
    Possible duplicate of [AngularJS Multiple ng-app within a page](http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page) – Matheno Feb 12 '16 at 08:13
  • Here they used two ng-app in single html page,but i am using two html in pages in single page& I have created separate modules for each html page – shruti Feb 12 '16 at 08:26
  • Is this used like a single page application, or really multiple views in 1 page? – Matheno Feb 12 '16 at 09:12
  • multiple views in 1 page – shruti Feb 15 '16 at 10:22

2 Answers2

0

You can manually bootstrap angular on dom element:

angular.bootstrap(div1, ['app1']);
angular.bootstrap(div2, ['app2']);
karaxuna
  • 26,752
  • 13
  • 82
  • 117
  • Here initially my **menu.html** file gets loaded,after that **home.html** get loaded,so there are separate html files. – shruti Feb 12 '16 at 08:37
0

Angular will only bootstrap the first ng-app it encounters. You should only use one app (module) but you can easily create a module that uses the other two modules.

angular.module("app", ["yourHomeModule", "yourMenuModule"]);

ng-app="app"
Matheno
  • 4,112
  • 6
  • 36
  • 53
  • but where i can add ng-app="app",because **2 different html pages are loading** – shruti Feb 12 '16 at 09:21
  • means **I am appending home.html to menu.html** – shruti Feb 12 '16 at 09:24
  • You could include that in your 'main page' where you load the 2 pages. If this does not work, then please provide an example of your code, or else we can't be of any more help. – Matheno Feb 12 '16 at 09:28
  • in PHP cntroller file I have loaded two views as`$this->load->view ( 'menus.html' ); $this->load->view ( 'index.html' );`
     – shruti Feb 12 '16 at 09:48
  • In menu.html file
    ` Insert title here

    1: {{ desc }}

    `
     – shruti Feb 12 '16 at 09:59
  • in menu.js file`var firstApp = angular.module('firstApp', []); firstApp.controller('FirstController', function($scope) { $scope.desc = "First app. "; });` – shruti Feb 12 '16 at 10:00
  • in home.html
    ` Insert title here

    2: {{ desc }}

    `     – shruti Feb 12 '16 at 10:01
  • in home.js` var secondApp = angular.module('secondApp', []); secondApp.controller('SecondController', function($scope) { $scope.desc = "Second app. "; }); var dvSecond = document.getElementById('dvSecond'); angular.element(document).ready(function() { angular.bootstrap(dvSecond, ['secondApp']); }); var ex1 = document.getElementById('ex1'); var ex2 = document.getElementById('ex2'); angular.element(document).ready(function() {alert(); angular.bootstrap(ex2, ['secondApp']); angular.bootstrap(ex1, ['firstApp']); });` – shruti Feb 12 '16 at 10:02