Angular-Ui-Router+ocLazyLoad动态加载脚本示例

2024-10-20 17:49:02

在使用angular过程以前同事是采取一次性加载方式，在index页面一次性加载所有的js跟css，这种加载方式只适合教学和小型项目中，中大型不建议使用，加载速度影响到用户体验。

在使用了Ui-Router以后，我第一想法就是把每个功能组件化，在请求视图的时候再去加载该页面js和css，index页面主要加载必须文件：angular.js

于是尝试了下，这样去写，但是发现angular报错，原因是控制器没有注入主程序

后面在angular库里面发现ocLazyLoad，这是一个为angular量身定制脚本加载器，它只有15K

使用它很简单：

依次载入文件

<script src="framework/angular/angular.min.js"></script>
<script src="framework/angular-ui-router.js"></script>
<script src="framework/ocLazyLoad.min.js"></script>
<script src="framework/app.js"></script>

跟平常写路由一样只是需要多一层resolve

路由在渲染之前会执行resolve对象比如用来加载js和css，当然还有其他用处

代码：（不用担心脚本重复加载，之前加载的脚本会在浏览器做缓存）

angular.module('myRouters', ['ui.router','oc.lazyLoad'])

.state('index', {
  url: '/index',
  title: ' | ！',
  views: {
    'A': {
      templateUrl: 'components/header/header.html',
      controller: 'headerCtrl'
    },
    'C@index': {
      templateUrl: 'components/header/h1.html',
      controller: 'H2Ctrl'
    }
  },
  resolve: {
    loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
      return $ocLazyLoad.load(['components/header/H2.js',
        'components/header/header.js',
        'components/header/h3.js',
        'components/header/header1.css']);
    }]
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Angularjs中UI Router的使用方法

学习使用angular中,ui-route是其中的一个难点,简单使用没什么问题,但涉及到多级嵌套,就感觉有茫然,查了很多资料,踩过很多坑,到目前为止也不能说对ui-route有全面了解:这里只是把填补的几个坑记录一下备忘: 1.abstract的使用: $stateProvider .state('shop',{ resolve:{ "shoplist":function($http){ return $http({ url:"/bookApp/data/shoplist.p
angularjs ui-router中路由的二级嵌套

关于ui-router中嵌套路由中的问题 1.首先我们的页面层次为其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理. main.html页面中有一个ui-view在这里将填充PageTab.html,同时被填充的PageTab.html中也有一个ui-view 这样就实现了嵌套路由. 最终效果: 当我们点击Page-1时出现的是Page1中的内容,同理点击Page-2. 下面是实际的代码: Main.html <!DOCTYPE html> <htm
详解angular2实现ng2-router 路由和嵌套路由

实现ng2-router路由,嵌套路由首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com
AngularJS ui-router (嵌套路由)实例

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf
angularJS中router的使用指南

这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来复制代码代码如下:  <!doctype html> <head> <meta charset="utf-8"> <title>route</title> </head><br>
Angular中使用ui router实现系统权限控制及开发遇到问题

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
Angularjs中UI Router全攻略

首先给大家介绍angular-ui-router的基本用法. 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig) stateName是string类型 stateCon
浅析angularJS中的ui-router和ng-grid模块

在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没
angular基于路由控制ui-router实现系统权限控制

前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
Angular2学习笔记——详解路由器模型（Router）

Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa

Angular-Ui-Router+ocLazyLoad动态加载脚本示例

相关推荐

随机推荐