如何动态加载 Angular 控制器
How to Load Angular Controller Dynamically
我有一个包含 10 个视图和多个共享组件的应用程序
--app
-------components
-------------home
-----------------homeController.js
-----------------homeDirective.js
-----------------home.html
.
.
.
-------shared
----------modals
------------someModal
--------------- someModalController.js
--------------- someModal.html
组件通过 angular 路由加载
(function() {
'use strict';
angular
.module('app')
.config(appConfig);
function appConfig($routeProvider) {
$routeProvider.
when("/home", { templateUrl: "app/components/home/home.html", controller: 'homeController' })............
otherwise({ redirectTo: "/home" });
}
})();
不同组件中使用的模式,当主页包含所有脚本文件时,所有事情都有效。例如
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body ng-app="fleetCam" ng-controller="appController">
<div id="wrapper">
<div id="page-wrapper">
<ng-view>
</ng-view>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/ngStorage.js"></script>
<script src="appMain/app.module.js"></script>
<script src="appMain/app.routes.js"></script>
<script src="appMain/app.services.js"></script>
<script src="appMain/app.directive.js"></script>
<script src="appMain/components/home/homeController.js"></script>
<script src="appMain/components/home/aboutController.js"></script>
<script src="appMain/shared/modal/insert/insertController.js"></script>
我正在寻找一种方法来动态删除最后三个脚本标签和加载控制器或其他依赖项。我搜索了很多关于延迟加载的内容,但没有人适合我的上下文,尤其是当我添加共享组件时。
您可以使用官方 angular-seed repo 异步部分中的模式:https://github.com/angular/angular-seed/#loading-angular-asynchronously
https://github.com/angular/angular-seed/blob/master/app/index-async.html
这依赖于ded/script"Async JavaScript loader & dependency manager"https://github.com/ded/script.js
我有一个包含 10 个视图和多个共享组件的应用程序
--app
-------components
-------------home
-----------------homeController.js
-----------------homeDirective.js
-----------------home.html
.
.
.
-------shared
----------modals
------------someModal
--------------- someModalController.js
--------------- someModal.html
组件通过 angular 路由加载
(function() {
'use strict';
angular
.module('app')
.config(appConfig);
function appConfig($routeProvider) {
$routeProvider.
when("/home", { templateUrl: "app/components/home/home.html", controller: 'homeController' })............
otherwise({ redirectTo: "/home" });
}
})();
不同组件中使用的模式,当主页包含所有脚本文件时,所有事情都有效。例如
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body ng-app="fleetCam" ng-controller="appController">
<div id="wrapper">
<div id="page-wrapper">
<ng-view>
</ng-view>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/ngStorage.js"></script>
<script src="appMain/app.module.js"></script>
<script src="appMain/app.routes.js"></script>
<script src="appMain/app.services.js"></script>
<script src="appMain/app.directive.js"></script>
<script src="appMain/components/home/homeController.js"></script>
<script src="appMain/components/home/aboutController.js"></script>
<script src="appMain/shared/modal/insert/insertController.js"></script>
我正在寻找一种方法来动态删除最后三个脚本标签和加载控制器或其他依赖项。我搜索了很多关于延迟加载的内容,但没有人适合我的上下文,尤其是当我添加共享组件时。
您可以使用官方 angular-seed repo 异步部分中的模式:https://github.com/angular/angular-seed/#loading-angular-asynchronously
https://github.com/angular/angular-seed/blob/master/app/index-async.html
这依赖于ded/script"Async JavaScript loader & dependency manager"https://github.com/ded/script.js