AngularJS - 基于路由动态加载外部 JS | 基于路由动态加载外部
本文介绍了AngularJS - 基于路由动态加载外部 JS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述 我正在尝试制作一个简单的单页移动应用程序，其中包含多个视图和一个 next\back 按钮来控制每个视图.我正在使用 Angular Mobile UI 库.
基本模型如下:
<头><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><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>;
App.js 如下:
var app = angular.module('demo-app', ["ngRoute",移动角度用户界面"]);app.config(function($routeProvider) {$routeProvider.when('/', { 控制器:"firstController",templateUrl: "views/first.html"});$routeProvider.when('/', { 控制器:"secondController",templateUrl: "views/first.html"});$routeProvider.when('/', { 控制器:thirdController"，templateUrl: "views/first.html"});});控制器 = {};controller.nextBackController = function($scope, $rootScope) {//下一个后退按钮的简单控制器，所以我们只需将它放在 app.js 中};app.controller(控制器)；firstController.js 将包含类似于:
controllers.firstController = function($scope) {//在这里做我们的逻辑！！！};问题是，如果您在 HTML 页面的顶部注意到我必须加载所有控制器.这是不可扩展的.我希望每个控制器都在它自己的 JS 文件中，而不必静态加载每个控制器，因为用户甚至可能永远不需要那个控制器.有没有办法在切换路由时动态加载实际的JS文件?或者我可以在first.html"、second.html"等的顶部粘贴一个脚本标签.
解决方案
如果我理解正确，您需要为每个视图加载特定脚本?我正在分享一个来自个人项目的片段，该项目使用 ocLazyLoader 一个按需加载模块的插件.>
var myApp = angular.module("myApp", ["ui.router","oc.lazyLoad",]);然后在你的路由中你可以相应地加载动态 JS/CSS 文件，在这个例子中我加载了 UI 选择插件依赖
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$stateProvider//状态.state('演示', {url: "/demo.html",templateUrl: "views/demo.html",数据:{pageTitle:'演示页面标题'}，控制器:通用控制器"，解决: {deps: ['$ocLazyLoad', 函数($ocLazyLoad) {返回 $ocLazyLoad.load([{name: 'ui.select',//为此状态添加 UI 选择 css/js文件:['css/ui-select/select.min.css','js/ui-select/select.min.js']}, {名称:'我的应用程序'，文件:['js/控制器/GeneralController.js']}]);}]}})
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.
The basic mockup is as follows:
<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 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 will contain something similar to:
controllers.firstController = function($scope) {
//Do our logic here!!!
};
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.
解决方案
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",
]);
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'
]
}]);
}]
}
})
这篇关于AngularJS - 基于路由动态加载外部 JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-11 20:40