AngularJS-基于路由动态加载外部JS

2021/01/30 23:31 · jquery ·  · 0评论

我正在尝试制作一个简单的单页移动应用程序,该应用程序具有多个视图,并具有一个next \ back按钮来控制每个视图。我正在使用Angular Mobile UI库。

基本模型如下:

<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如下:

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将包含类似于以下内容的内容:

controllers.firstController = function($scope) {
    //Do our logic here!!!
};

问题是,如果您注意到HTML页面的顶部,我必须将所有控制器都加载到其中。这是不可扩展的。我希望每个控制器都位于其自己的JS文件中,而不必静态加载每个控制器,因为用户甚至可能永远不需要该控制器。切换路由时,有没有办法动态加载实际的JS文件?或者可以将脚本标签粘贴在“ first.html”,“ second.html”等的顶部。

如果我理解正确,则需要为每个视图加载特定的脚本吗?我从一个使用ocLazyLoader个人项目中共享此片段,该插件是按需加载模块的插件。

var myApp = angular.module("myApp", [
"ui.router", 
"oc.lazyLoad",  
]); 

那么在您的路由中,您可以相应地加载动态JS / CSS文件,在此示例中,我正在加载UI Select插件依赖项

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'
                    ] 
                }]);
            }]
        }
    })

如果您熟悉Grunt:

https://github.com/ericclemmons/grunt-angular-templates

使用Grunt和上述构建任务从所有视图创建一个.js。在views目录中的所有html文件中包括监视任务侦听器。每当对任何局部视图进行更改时,都会创建“ $ templateCache”条目,其中包含文件中的所有html和用于缓存别名的URL。您的路线将以相同的方式指向局部视图,但是html文件不需要存在。仅带有模板的.js文件。这样做的好处是,它只加载一次,并且可以在整个会话的客户端上使用。这样可以减少http调用,并且只能将流量减少到Web服务调用。

这是上面github链接中的模板示例:

angular.module('app').run(["$templateCache", function($templateCache) {
$templateCache.put("home.html",
// contents for home.html ...
);
...
$templateCache.put("src/app/templates/button.html",
// contents for button.html
);
}]);

如果您不熟悉Grunt

看看这个。对于自动化构建,最小化,串联,转译等,这是非常宝贵的。

http://gruntjs.com/

除非您的应用程序为MASSIVE否则您应该避免单独提供小型js文件。即使您想根据问题的建议找到一种根据需要延迟获取文件的方法,这也会显着降低应用程序的速度。

更好的方法(以及AngularJS团队使用和建议的方法)是使构建过程(应使用grunt此过程)连接所有javascript文件,并将它们作为单个app.js文件使用。这样,您可以根据需要维护包含多个小js文件的组织代码库,但可以将脚本提取减少到单个请求。

如何安装OCLazyLoad。

1. 在此处下载ocLazyLoad.js

可以在git仓库的'dist'文件夹中找到它。您也可以使用bower install oclazyload安装它npm install oclazyload

2.将模块oc.lazyLoad添加到您的应用程序:

var myApp = angular.module("MyApp", ["oc.lazyLoad"]);

3.根据路线,按需加载JS文件:

    myApp.controller("MyCtrl", function($ocLazyLoad){
       $ocLazyLoad.load('testModule.js');
    }});`

有了它,$ocLazyLoad您就可以加载角度模块,但是如果要加载任何组件(控制器/服务/过滤器/ ...)而无需定义新模块,则完全有可能(只需确保在现有模块中定义此组件)。

$ocLazyLoad加载文件有多种方法,只需选择一种即可。

同样不要忘记,如果您想入门但文档不够用,请参阅“ examples”文件夹中的示例!

快速开始

在这种情况下,RequireJS非常有用。您可以使用RequireJS声明JS文件的依赖性。

您可以参考这个简单的教程。

我认为最好的方法是使用RequireJS,如此处所述,将Require.js与Angular.js一起使用是否有意义?它是完全允许的,它将使您能够达到自己的目的。

这是一个示例代码

https://github.com/tnajdek/angular-requirejs-seed

我不确定它在标准角度下如何工作,但是,您可以使用angular-ui-router:

在创建控制器的相应范围时,即根据需要实例化控制器,即,当用户通过URL手动导航到状态时,$ stateProvider将正确的模板加载到视图中,然后将控制器绑定到模板的范围。

https://github.com/angular-ui/ui-router/wiki

本文地址:http://jquery.askforanswer.com/angularjs-jiyuluyoudongtaijiazaiwaibujs.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!