Javascript Angular JS：如何在partials中加载JS文件_Javascript_Jquery_Html_Angularjs

Javascript Angular JS：如何在partials中加载JS文件

javascript jquery html angularjs

Javascript Angular JS：如何在partials中加载JS文件,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,对于AngularJS来说非常陌生，我猜我正在尝试做的就是惰性负载。我看了几个不同的博客，还没有找到一个完全使用AngularJS的解决方案我知道，如果我把放在index.html中，一切都会正常工作，我会尽量减少在初始加载时拉下来的js量由于脚本标记位于partial中，因此永远不会加载它，因此永远不会创建P1Ctrl。因此，当前，如果用户进入应用程序而从未进入process55，则用户仍然拥有process55的代码，即使它从未被使用过在执行process1路由时，是否有方法加载文件并

对于AngularJS来说非常陌生，我猜我正在尝试做的就是惰性负载。我看了几个不同的博客，还没有找到一个完全使用AngularJS的解决方案

我知道，如果我把

放在index.html中，一切都会正常工作，我会尽量减少在初始加载时拉下来的js量

由于脚本标记位于partial中，因此永远不会加载它，因此永远不会创建P1Ctrl。因此，当前，如果用户进入应用程序而从未进入process55，则用户仍然拥有process55的代码，即使它从未被使用过

在执行process1路由时，是否有方法加载文件并将process1.js中创建的对象注入main中定义的应用程序

index.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Large Angular App</title>
    <link rel="stylesheet" href="lib/foundation/css/foundation.min.css" />
</head>
<body ng-app="largeApp" ng-controller="LargeAppController">

    <div>
        <a href="#/home">Home</a> | <a href="#/process1">Process1</a>
    </div>
    <br/>
    <br/>
    <br/>

    <ng-view>Test</ng-view>


    <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="lib/angular/angular.js"></script>
    <script type="text/javascript" src="lib/angular/angular-route.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

partials/home.html：

   <div>
    Home Page
   </div>

要以简单的方式实现控制器的延迟加载，必须执行以下操作：

将

$controllerProvider.register

（这是将控制器添加到已启动的AngularJS应用程序中的唯一方法）保存到应用程序中的变量（main.js）：

process1.html：

var app = angular.module('app',["ngRoute"]);
app.config(['$routeProvider', '$controllerProvider',
    function($routeProvider, $controllerProvider) {
        // remember mentioned function for later use
        app.registerCtrl = $controllerProvider.register;
        //your routes
        $routeProvider.when('/', {templateUrl: 'partials/home.html'});
        $routeProvider.when('/process1', {templateUrl: 'partials/process1.html'});
        $routeProvider.otherwise({redirectTo: '/'});
    }
]);

<script src="js/process1.js"></script>
<div ng-controller="P1Ctrl">
    {{content}}
</div>

index.html可能保持不变。检查是否正在加载您的

process1.js

（只需在

process1.js

的主体中使用

console.log（）

，而不是在

P1Ctrl

控制器中）。如果不是，请在Angular之前包含jQuery：

<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>

重要提示：此方法不适用于angular 1.2.0-rc.2和1.2.0-rc.3，因为jQuery的这个小技巧不起作用

要获得更复杂（更漂亮）的解决方案，将

.js

文件作为路由定义中的依赖项，请查看以下文章：-它也适用于rc.2和rc.3。下面是plunk实现描述的方法：

将所有这些放在一起，它不会中断，但也不起作用。尝试使用和不使用jquery引用。页面显示时没有错误，但从未调用js，并且控制器将数据放入视图中。看看你提到的这个IFY网站，似乎表明我需要一个脚本加载器和使用承诺。我知道我很接近。。。但现在还不太清楚。我刚刚意识到使用jQuery的这个技巧在Angular 1.2中不起作用。我在回答中添加了plunk，略微修改了IFY中方法的实现。@Iort:1个问题，如果我只在process1.html中加载process1.js。因此，当我在process2.html中加载process2.js时，前面的process1.js仍然在完整的html页面中加载，或者没有加载。希望你明白我的意思。请，我需要知道如何使用ISO字符集加载分部，请看这里：

var app = angular.module('app',["ngRoute"]);
app.config(['$routeProvider', '$controllerProvider',
    function($routeProvider, $controllerProvider) {
        // remember mentioned function for later use
        app.registerCtrl = $controllerProvider.register;
        //your routes
        $routeProvider.when('/', {templateUrl: 'partials/home.html'});
        $routeProvider.when('/process1', {templateUrl: 'partials/process1.html'});
        $routeProvider.otherwise({redirectTo: '/'});
    }
]);

<script src="js/process1.js"></script>
<div ng-controller="P1Ctrl">
    {{content}}
</div>

app.registerCtrl('P1Ctrl', function($scope)
{
   $scope.content = '...'; 
});

<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>