文档章节

angularjs 之ocLazyLoadjs按需加载js

安吉拉
 安吉拉
发布于 2017/08/22 16:43
字数 344
阅读 52
收藏 0

由于采用agnularjs做网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入。对于较小的项目,可行,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有的js文件,无疑会延缓页面加载速度。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>ui-router-lazyload</title>
    <link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
    <script src="../angular/angular.min.js"></script>
    <script src="../angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="../oclazyload/dist/ocLazyLoad.min.js"></script>
    <script src="index.js"></script>
</head>
<style>
    body{
        font-family: "Microsoft JhengHei UI";
    }
    .navigator{
        width: 500px;margin: 0 auto
    }
    .navigator li{
       color: #000;font-size: 14px;
    }
</style>
<body ng-controller="myController">
<ul class="navigator nav nav-pills">
    <li role="presentation" class="active"><a href="#home" ng-click="isActive($event)">主页</a></li>
    <li role="presentation" class="active"><a href="#child">子页面</a></li>
    <li role="presentation" class="active"><a href="#third" ng-click="isActive($event)">三级页面</a></li>
</ul>
<div ui-view style="width: 500px;margin: 50px auto 0"></div>
</body>
</html>
var myApp= angular.module('myApp',["ui.router","oc.lazyLoad"]);
myApp.config(function($stateProvider,$urlRouterProvider){
 $urlRouterProvider.when("","/home");
 $stateProvider.state('home',{
   url:'/home',
   templateUrl:'homepage.html',
   resolve:{
    loadMyCtrl:['$ocLazyLoad',function($ocLazyLoad){
    
      return $ocLazyLoad.load({
     name:'homeApp',
     files:['homepage.js']
    
   })
 
    }]
  }
 
});
$stateProvider.state('index',{
  url:'/home',
  templateUrl:'index.html'

});
$stateProvider.state('child',{
  url:'/child',
  templateUrl:'child.html',
  resolve:{
   loadMyCtrl:function($ocLazyLoad){
   return $ocLazyLoad.load({
    name:'childApp',
    files:["child.js"]
 })

 }
 }

});
$stateProvider.state("third",{
  url:'/third',
  templateUrl:'third.html',
  resolve:{
   loadMyCtrl:function($ocLazyLoad){
   return $ocLazyLoad.load({
    return $oclazyLoad.load({
      name:'grandApp',
      files:['third.js']   
 })
  })
 } 
  }

 });
myApp.controller('myController',function($state,$scope,$location){
 $scope.turnPage=function(){
  $location.path('/home')
 }
})





})

各个js文件并非一次性加载的,只有点击子页面三级页面相应的js文件才会加载出来

本文转载自:http://www.cnblogs.com/Ricky-Huang/p/5675409.html

安吉拉
粉丝 1
博文 35
码字总数 7547
作品 0
私信 提问
$apply already in progress at Error

Search: Sort by: name age {{phone.name}} {{phone.snippet}} {{phone.age}} XMLHttpRequest cannot load file:///D:/ProgramFilesZhtt/tomcat1081/webapps/AngularJS/js/05.json. Cross or......

梦幻女侠
2013/10/11
1K
1
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
68.4K
19
2018 年,Angular JS 框架是否还值得学习?

越来越多人对学习开发和搭建自己的网站感兴趣,如果你也是,那么 2018 年将是提高技能理想的一年。我们不妨先从 JavaScript 框架开始,但在这篇文章里谈论得更多的将是 Angular JS。 Angula...

局长
2018/02/16
3.3K
6
5ThingsToKnowBeforeYouGetStartedWithAngulerJS

AngularJS is Entirely Client-Side AngularJS is written in JavaScript, and it functions entirely on the client side. This means two things for your app. First, you can run Angula......

perfectspr
2014/12/16
47
0
Migrating a SpringWebMVC App from JSP to AngularJS

Migrating a Spring Web MVC application from JSP to AngularJS Engineering Michael Isvy August 19, 2015 Note on authors This post is a guest post by Han Lim and Tony Nguyen.Han an......

miscellanea
2015/08/24
218
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.7K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部