在角度 ui 视图中加载 javascript答案

【问题标题】：Loading javascript inside angular ui view在角度 ui 视图中加载 javascript
【发布时间】：2015-12-01 11:30:03
【问题描述】：

我正在使用角度 ui 路由在视图中加载模板。每个模板都有自己的特定于该页面的 javascript 代码。有没有办法在打开模板的那一刻加载模板特定的 javascript 代码/文件？目前，我必须为主页中的每个模板添加所有 javascript 代码/文件。

另一种解决方案是使用 iframe。这允许页面加载它自己的 javascript 文件。但是这种方式导航效果不佳（刷新时页面会重置）。

例子：

index.html

<!DOCTYPE html>
<html  ng-app="testApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="angular.min.js"></script>
    <script src="angular-ui-router.min.js"></script>
    <script src="app.js"></script>

    <script src="template1Functions.js"></script>
    <script src="template2Functions.js"></script>
</head>
<body>
    <a ui-sref="template1">Template 1</a>
    <a ui-sref="template2">Template 2</a>

    <div ui-view></div>
</body>
</html>

模板1.html

<button onclick='template1TestFunction()'>Template 1 Function</button>

template2.html

<button onclick='template2TestFunction()'>Template 2 Function</button>

app.js

angular.module('testApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('template1', {
            url: '/template1',
            templateUrl: 'template1.html'
        })
        .state('template2', {
            url: '/template2',
            templateUrl: 'template2.html'
        });
}]);

template1Functions.js

function template1TestFunction() {
alert('Template 1 works') 
};

template2Functions.js

function template2TestFunction() {
alert('Template 2 works') 
};

如您所见，我必须在 index.html 页面中添加 template[x]functions.js 文件。我真的很想从 template[x].html 文件中加载它。

【问题讨论】：

您是否尝试过将 .js 文件包含在模板中而不是 index.html 中？
是的，这也是我的第一个猜测。但如果我这样做，它似乎不会加载文件并且我收到错误“错误：'template1TestFunction'未定义”

标签： angularjs iframe angular-ui-router

【解决方案1】：

听起来你正在寻找的是控制器。

请记住，除非您使用 $localStorage 或后端保存数据，然后在某个时间点检索它，否则页面将在刷新后“重置”，因为范围被销毁并重新创建。

我还建议使用构建系统（如 grunt）来避免使用多个 js 文件并导入每个文件。

要使用控制器，请执行以下步骤：

添加控制器来做状态定义：

.state('template1', { 网址：'/模板1'， templateUrl: 'template1.html', 控制器：'Temp1Ctrl' })

把它放在你的 template1Functions.js 中：

angular.module('testApp')。控制器（'Temp1Ctrl'，['$scope'，函数（$scope）{ $scope.doSomething = function() { console.log('做了什么'); } }]);

用这个代替 onclick：

ng-click="doSomething()"

【讨论】：

我知道使用控制器的能力，但这仍然需要我在用户打开 index.html 页面时加载所有控制器代码。在这个例子中，我只有 2 个页面，但如果我有超过 100 个模板，每个模板都有一个控制器，我必须在页面启动时加载所有代码。我真正想要使用的是加载特定模板在模板打开时使用的javascript。
在我看来，我真的不想使用角度。如果文件数量与您有关，我建议您结合 sass / gulp 来看看 browserify。在我们公司，我们正在开展一个更大的项目，所有代码都编译在一个文件中，目前没有缩小到 2.5Mb
我会考虑通过缩小来捆绑文件，希望总大小不会变大。我只是希望可以只加载该页面所需的特定 javascript 文件。但是通过这里的回复和在网上搜索的时间，我意识到这是不可能的。我已经使用了控制器，但对于更基本的示例，我将它们从我的代码中删除。
我以前从未尝试过，但这应该不是问题 - 您仍然可以使用控制器并从模板中导入文件，这样您就可以仅在需要时加载控制器。另外，你知道你的模板 - 如果数据几乎是相同的数据，你只能切换视图并坚持同一个控制器