angularjs – 如何在同一页面中运行两个单独的Angular js应用程序

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在同一页面中运行两个单独的Angular js应用程序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
新到角我觉得我缺少一些明显的东西:我不应该很容易地在同一个html页面中运行单独的AngularJs应用程序(模块)?这样的东西:
<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:

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

这只运行第一个模块,而第二个模块似乎没有做任何事情。我想这样做,以便我可以为多个页面创建可重复使用的封装指令,而不必将其模块命名为相同的东西。

实例:http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ

我们最终建立了small hierarchy of modules,但是我的原始问题可以完成,只需一点点工作(见下文)。

这是可能的,但它需要一点点手动编码。您需要自行引导角度应用程序。别担心,这不是那么复杂

>不要在HTML中添加ng-app属性
>确保您可以获取持有应用程序的DOM元素
>当DOM加载时,您需要自行启动应用程序:angular.bootstrap(domElement,[‘AppName’]);

叉的叉子工作:http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp

原文链接:https://www.f2er.com/angularjs/145144.html

猜你在找的Angularjs相关文章