AngularJS - 基于外部航线JS的动态加载 [英] AngularJS - dynamic loading of external JS based on routes
问题描述
我很新的角度。我看过一些教程和阅读一些文档。我现在开始得到我的手脏。我试图与多个视图一个简单的单页移动应用程序和下一\\后退按钮来控制每个视图。我现在用的手机角UI库但应该没有多大关系。
I am very new to Angular. I have watched some tutorials and read some of the documentation. I'm now starting to get my hands dirty. I am trying to make a simple single page mobile app with multiple views and a next\back button to control each view. I am using the Angular Mobile UI library but that shouldn't matter much.
的基本样机是如下：
<html>
<head>
<link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css">
<link rel="stylesheet" href="mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css">
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-route.min.js"></script>
<script src="mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
<script src="app/app.js"></script>
<script src="app/firstController.js"></script>
<script src="app/secondController.js"></script>
<script src="app/thirdController.js"></script>
</head>
<body ng-app="demo-app">
<div ng-view></div>
<div ng-controller="nextBackController" class="navbar navbar-app navbar-absolute-bottom">
<div class="btn-group justified">
<a href="#/" class="btn btn-navbar btn-icon-only"><i class="fa fa-home fa-navbar"></i></a>
<a href="#/second" class="btn btn-navbar btn-icon-only"><i class="fa fa-list fa-navbar"></i></a>
</div>
</div>
</body>
</html>
App.js如下：
App.js is as follows:
var app = angular.module('demo-app', [
"ngRoute",
"mobile-angular-ui"
]);
app.config(function($routeProvider) {
$routeProvider.when('/', { controller: "firstController",
templateUrl: "views/first.html"});
$routeProvider.when('/', { controller: "secondController",
templateUrl: "views/first.html"});
$routeProvider.when('/', { controller: "thirdController",
templateUrl: "views/first.html"});
});
controllers = {};
controllers.nextBackController = function($scope, $rootScope) {
//Simple controller for the next, back buttons so we just put it in app.js
};
app.controller(controllers);
firstController.js会包含类似于：
firstController.js will contain something similar to:
controllers.firstController = function($scope) {
//Do our logic here!!!
};
问题是，如果你在HTML页面中我要加载所有的控制器在顶部注意到，这是不可扩展的。我想每个控制器是在它自己的JS文件并没有静态加载每一个，因为用户可能甚至从未要求的控制器。有没有办法改变路线时动态加载实际JS文件？或者我可以在我的first.html，second.html等的顶部粘脚本标记。
The problem is if you notice at the top of the HTML page I have to load all the controllers in. This is not scalable. I want each controller to be in it's own JS file and not have to statically load each one since the user may never even require that controller. Is there a way to dynamically load the actual JS file when switching routes? or can I stick a script tag at the top of my "first.html", "second.html", etc.
推荐答案
如果我理解正确的话，你需要加载特定的脚本，每个视图？我分享从使用 ocLazyLoader一个个人项目这个片段的加载按需模块插件。
If I understand correctly you need to load specific scripts for each view ? I am sharing this snippet from a personal project that uses ocLazyLoader a plugin that loads modules on demand.
var myApp = angular.module("myApp", [
"ui.router",
"oc.lazyLoad",
]);
然后在您的路由，你可以相应地动态加载JS / CSS文件，在这个例子中，我加载UI插件的选择依赖
then in your routing you could load dynamic JS / CSS files accordingly, in this example I am loading the UI Select plugin dependencies
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
// State
.state('demo', {
url: "/demo.html",
templateUrl: "views/demo.html",
data: {pageTitle: 'demo page title'},
controller: "GeneralController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'ui.select',
// add UI select css / js for this state
files: [
'css/ui-select/select.min.css',
'js/ui-select/select.min.js'
]
}, {
name: 'myApp',
files: [
'js/controllers/GeneralController.js'
]
}]);
}]
}
})
好吧，我希望这是非常有用的。
Well I hope this is useful..
这篇关于AngularJS - 基于外部航线JS的动态加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
