'2015/12/03'에 해당되는 글 4건

2015.12.03 angularjs tree grid
2015.12.03 angularjs 비동기 방식 통신을 통한 그리드 구현
2015.12.03 Angular multiple ng-app
2015.12.03 Can AngularJS have multiple ng-app directives in a single page?

angularjs tree grid

-- angularjs tree grid

http://khan4019.github.io/tree-grid-directive/test/treeGrid.html

-- Angular UI Grid

http://ui-grid.info/

Posted by 1010

angularjs 비동기 방식 통신을 통한 그리드 구현

<!doctype html>

<html>

<head>

<title>Hello AngularJS</title>

.gridStyle {

border: 1px solid rgb(212, 212, 212);

width: 100%;

height: 700px;

font: 12px Tahoma;

color: #777;

}

</style>

</head>

<body>

</div>

var newsModule = angular.module('app01', [ 'ngGrid' ]);

newsModule.controller('appctrl01', fnNewsCtrl);

function fnNewsCtrl($scope, $http) {

$http.get('https://api.getevents.co/event?&lat=41.904196&lng=12.465974').success(

function(data)

{

$scope.successData = data.events;

});

$scope.gridOptions = {

data : 'successData',

enableCellSelection : false,

enableRowSelection : false,

enableCellEdit : false,

columnDefs : [

{field : 'id',displayName : 'id',enableCellEdit : true},

{field : 'name',displayName : 'name',enableCellEdit : true},

{field : 'city_meta.area',displayName : 'city_meta.area',enableCellEdit : true},

{field : 'city_meta.area_code',displayName : 'city_meta.area_code',enableCellEdit : true},

{field : 'source_name',displayName : 'source_name',enableCellEdit : true},

{field : 'image_large_url',displayName : 'image_large_url',enableCellEdit : true},

{field :'image_large_url', displayName:'image_large_url', cellTemplate: '<img ng-src="{{row.getProperty(\'image_large_url\')}}"></img>'}

]

};

}

</script>

</body>

</html>

Posted by 1010

Recently in my previous post, I have posted about Different ways of bootstrapping AngularJS app, where you can either auto-bootstrap using ng-app attribute or manually bootstrap using angular.bootstrap function. And also mentioned in angular interview questions that "Only one AngularJS application can be auto-bootstrapped per HTML document." Which means that your page can only have single ng-app attribute. If you put multiple ng-app attribute, only first will be considered and the rest will be ignored.

You may also like:

AngularJS interview questions

Let's see with an example. In the below code, there are 2 ng-app present on the page.

Hide Copy Code

<div ng-app="firstApp">
  <div ng-controller="FirstController">
    <p>1: {{ desc }}</p>
  </div>
</div>

<div ng-app="secondApp">
  <div ng-controller="SecondController">
    <p>2: {{ desc }}</p>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script type="text/javascript">
var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
    $scope.desc = "First app.";
});

var secondApp = angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
    $scope.desc = "Second app.";
});
</script>

And below is the output. Out of 2 ng-app present on the page, the first one gets initialized and works as expected. Output also shows the same.

Hide Copy Code

1: First app.
2: {{ desc }}

Demo

Then how can you define 2 different angular apps on the same page? Well, there are a couple of ways to implement this.

Manually bootstrapping each app

You can manually bootstrap both the application using angular.bootstrap() as we have seen in Different ways of bootstrapping AngularJS app.

Hide Copy Code

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
   $scope.desc = "First app. ";
});

var secondApp = angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
  $scope.desc = "Second app. ";
});

var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');

angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, ['firstApp']);
   angular.bootstrap(dvSecond, ['secondApp']);
});

Since we are bootstrapping them manually, make sure to remove ng-app attribute from the HTML page.

Demo

Manually bootstrapping second app

You can also manually bootstrap the second app, where the first app gets initialized via ng-app

Hide Copy Code

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
   $scope.desc = "First app. ";
});

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']);
});

So make sure that there is ng-app present on the page for first app.

Demo

Using dependency injection to inject both in root app

You can define a root level app using ng-app and then inject both the apps as module in root app.

Hide Copy Code

var rootApp = angular.module('rootApp', ['firstApp','secondApp']);
var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {
   $scope.desc = "First app. ";
});

var secondApp = angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
  $scope.desc = "Second app. ";
});

And make sure any parent node (body/Parent div) is assigned with ng-app=rootApp".

Demo

Posted by 1010

Can AngularJS have multiple ng-app directives in a single page?

The answer is NO. The ng-app directive is used to auto-bootstrap an AngularJS application. And according to AngularJS Documentation, only one AngularJS application can be auto-bootstrapped per HTML document. I'd like to quote a section from the documentation here:

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

I'm going to show three approaches, latter two being similar, to deal with the issue.

Before that let's take a look what the actual problem is.
<!DOCTYPE html>

<html>
<head>
<title>Multiple ngApp does not work</title>
</head>

<body>
       <div ng-app="firstApp">
              <div ng-controller="FirstController">
<p> 1# {{ name }} </p>
</div>
       </div>

       <div ng-app="secondApp">
              <div ng-controller="SecondController">
<p> 2# {{ name }} </p>
</div>
       </div>

       <script src="angular.js"></script>
       <script type="text/javascript">

var firstApp = angular.module('firstApp', []);
firstApp.controller('FirstController', function($scope) {

$scope.name = "I'm the first app.";
});

  var secondApp = angular.module('secondApp', []);
  secondApp.controller('SecondController', function($scope) {

$scope.name = "I'm the second app.";
});
       </script>
</body>
</html>

As you can see, we defined two separate ng-app directives named firstApp and secondApp. And we also defined two controllers one for each ng-app module and each having its own scope variable name. As the documentation states, only the first ng-app module is auto-bootstrapped. So, in this case, only the firstApp module works as expected while the secondApp module does not. As a consequence, the browser renders the above page as follows:

1# I'm the first app.
2# {{ name }}

Now that we discussed the problem, let's move ahead and see how to use alternatives.

Method 1: Injecting modules as dependencies of the root app

The idea here is to define only one top level ng-app in a root element like in <html> or <body>, define other two as modules and inject them as dependencies of the root app.
<!DOCTYPE html>

<html>
<head>
       <title>Injecting modules as dependencies of the root app </title>
</head>

<body ng-app="rootApp">

<div id="firstApp">
       <div ng-controller="FirstController">
              <p>1# {{ name }}</p>
       </div>
</div>

<div id="secondApp">
       <div ng-controller="SecondController">
              <p>2# {{ name }}</p>
       </div>
</div>

<script src="angular.js"></script>
<script type="text/javascript">

    // passing the two modules as dependencies of the root module
    var rootApp = angular.module('rootApp', ['firstApp','secondApp']);

    var firstApp = angular.module('firstApp', []);
       firstApp.controller('FirstController', function ($scope) {
       $scope.name = "I'm the first app.";
    });

    var secondApp = angular.module('secondApp', []);
    secondApp.controller('SecondController', function ($scope) {
       $scope.name = "I'm the second app.";
    });

</script>
</body>
</html>
This will give the desired result:

1# I'm the first app.
2# I'm the second app.

Method 2: Manual bootstrapping the second module

In this method, we are going to leave the first ng-app as it is so that it is auto-bootstrapped by Angular. Whereas for the second ng-app, we're going to a manual bootstrapping method.
<!DOCTYPE html>

<html>
<head>
<title>Manual bootstrapping the second module</title>
</head>

<body>
       <div ng-app="firstApp">
              <div ng-controller="FirstController">
                     <p>1# {{ name }}</p>
              </div>
       </div>

       
       <div id="secondApp">
              <div ng-controller="SecondController">
                     <p>2# {{ name }}</p>
              </div>
       </div>

<script src="angular.js"></script>
<script type="text/javascript">

       var firstApp = angular.module('firstApp', []);
       firstApp.controller('FirstController', function($scope) {

              $scope.name = "I'm the first app.";
       });

       var secondApp = angular.module('secondApp', []);
       secondApp.controller('SecondController', function($scope) {

              $scope.name = "I'm the second app.";
       });

       // manually boostrapping the second app
       var secondDiv = document.getElementById('secondApp');

       angular.element(document).ready(function() {
              angular.bootstrap(secondDiv, [ 'secondApp' ]);
       });
</script>
</body>
</html>

Method 3: Manual bootstrapping both modules

As I already mentioned, this method is similar to the previous one. Here, we don't rely on Angular's auto-bootstrapping to initialize the modules. We'll use manual bootstrapping method to initialize both modules as depicted in the example below:
<!DOCTYPE html>

<html>
<head>
<title>Manual boostrapping both modules</title>
</head>

<body>
       
       <div id="firstApp">
              <div ng-controller="FirstController">
                     <p>1# {{ name }}</p>
              </div>
       </div>

       
       <div id="secondApp">
              <div ng-controller="SecondController">
                     <p>2# {{ name }}</p>
              </div>
       </div>

<script src="angular.js"></script>
<script type="text/javascript">
       var firstApp = angular.module('firstApp', []);
       firstApp.controller('FirstController', function($scope) {

              $scope.name = "I'm the first app.";
       });

       var secondApp = angular.module('secondApp', []);
       secondApp.controller('SecondController', function($scope) {

              $scope.name = "I'm the second app.";
       });

       var firstDiv = document.getElementById('firstApp');
       var secondDiv = document.getElementById('secondApp');

       // manually boostrapping the second app
       angular.element(document).ready(function() {
              angular.bootstrap(firstDiv, [ 'firstApp' ]);
              angular.bootstrap(secondDiv, [ 'secondApp' ]);
       });
</script>
</body>
</html>

Posted by 1010

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

개발자(開發者) a developer

'2015/12/03'에 해당되는 글 4건

angularjs tree grid

angularjs 비동기 방식 통신을 통한 그리드 구현

Angular multiple ng-app

Can AngularJS have multiple ng-app directives in a single page?

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바