如何运行在同一页面两个单独的角的js应用 [英] How to run two separate Angular js apps in the same page

问题描述

新建角。我觉得我失去了一些东西显而易见的：我不应该能够轻松地运行在同一个html页面AngularJs应用程序（模块）分开？事情是这样的：

New to Angular. I feel like I'm missing something obvious: Shouldn't I easily be able to run to separate AngularJs apps (modules) in the same html page? Something like this:

  <section ng-app="HelloWorldApp" ng-controller="HelloWorldController">
    Hello {{name}}!
  </section> 
  <br />
  <section ng-app="MyNameIsApp" ng-controller="MyNameIsController">
    My Name is {{FirstName}} {{LastName}}!
  </section> 

使用Javascript：

Javascript:

var HelloWorldApp = angular.module('HelloWorldApp', []);
HelloWorldApp.controller('HelloWorldController', function($scope) {
  $scope.name = 'World';
});

var MyNameIsApp = angular.module('MyNameIsApp', []);
MyNameIsApp.controller('MyNameIsController', function($scope) {
  $scope.FirstName = 'John';
  $scope.LastName = 'Smith';
});

此仅运行所述第一模块，而第二不出现做任何事情。我想这样做，这样我可以建立没有说出自己的模块同样的事情多页的可重复使用的，封装的指令。

This only runs the first module, while the second doesn't appear to do anything. I want to do this so that I can build reusable, encapsulated directives for multiple pages that don't have to name their modules the same thing.

活生生的例子： http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ

我们结束了建筑小层次的，但我原来的问题可以做的，只有一些工作（见下文）。

We ended up building small hierarchy of modules, however my original question can done, with just a bit of work (see below).

推荐答案

这是可能的，但它需要用手工一点点的编码。你需要引导你自己的角度应用程序。别担心，这并不复杂。

It is possible, but it requires a little bit coding by hand. You need to bootstrap the angular apps on your own. Don't worry, it is not that complicated

• 请不要添加 NG-应用属性在你的HTML


• 确保您可以获取抱着应用程序中的DOM元素


• 当DOM被加载，你需要开始在自己的应用程序： angular.bootstrap（一个DOMElement，['AppName的']）;

• Do not add ng-app attributes in your HTML
• Make sure you can fetch the DOM elements holding the app
• When DOM is loaded you need to start the apps on your own: angular.bootstrap( domElement, ['AppName']);

您plunker的叉其中工程： http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

Fork of you plunker which works: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

这篇关于如何运行在同一页面两个单独的角的js应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！