AngularJS动态加载模板和js文件

AngularJS dynamically load template and js file

本文关键字：js 文件 动态 加载 AngularJS      更新时间：2023-09-26

我想动态地将菜单JavaScript文件和html添加到内容中.html，但它做不到。

我创建了简单的例子

演示

我尝试将" <script src="menu.js"></script>"移动到菜单.html

您的代码摆脱了使用 angular 编写单页应用程序的整个想法。我已经更新了它，让您基本了解如何执行路由和共享模板以及使用控制器。

查看 plunkr

.html 

<html>
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="menu.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
    <script src="menu.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
    <div id="menu" ng-include="'menu.html'"></div>
    <div ui-view></div>
  </body>
</html>

.js

angular.element(document).ready(function() {
    angular.bootstrap(document, ["app"]);
});
angular.module('app',['moduleContent', 'moduleMenu', 'ui.router']);
var app = angular.module('app');
app.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      templateUrl: "first.html",
      controller: 'firstCtrl'
    })
    .state('second', {
      url: "/second",
      templateUrl: "second.html"
    })
});
app.controller('firstCtrl', ['$scope', function($scope) {
  $scope.page = "first";
}]);
//Conttent module
angular.module('moduleContent',[])
.controller('contentCtrl', contentCtrl);
function contentCtrl(shareData)
{
    shareData.currentPage = 0;
}
相关文章：