angular按需加载js

最新推荐文章于 2022-01-27 16:11:47 发布

weixin_30379973

最新推荐文章于 2022-01-27 16:11:47 发布

阅读量199

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaomp/p/6085098.html

版权

angularjs 笔记

前言：新手一枚，第一次写博客，工作不到一年，工作前没有接触过angularjs。使用angularjs也有一段时间了，在这里记录一下经验以便以后用可以快速查阅【2016-11-21】。　　

话不多说，既然用到了angularjs想必或多或少了解他的优缺点，该文章主要解决按需加载的问题。

版本：

angular.min.js 1.5.8

require.js 2.3.2

angular-ui-router.js 0.2.13

angular-async-loader.min.js ...

说明：需要在服务器上运行本地直接打开是不行的！

以下是代码实现

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>dome</title>
<style>
　　.footer{
　　　　width: 100%;
　　　　height: 6.125rem;
　　　　position: fixed;
　　　　bottom: 0;
　　　　left: 0;
　　　　right: 0;
　　　　z-index: 100;
　　　　
　　　　border-top: 1px solid #C9C9C9;
　　}
　　.footer li{
　　　　width: 33.33%;
　　　　height:6.125rem;
　　　　float: left;
　　　　text-align: center;
　　　　list-style-type:none;
　　　}
</style>
</head>
　　<body>
　　　　<div data-ui-view=""></div>
　　　　<div class="footer">
　　　　　　<ul>
　　　　　　　<li>
　　　　　　　　<a href="#/page1">
　　　　　　　　　　　<h5 class="ho">page1</h5>
　　　　　　　　　　　　</a>
　　　　　　　　　　</li>
　　　　　　　　　　<li>
　　　　　　　　　　　　<a href="#/page2">
　　　　　　　　　　　　　　<h5>page2</h5>
　　　　　　　　　　　　</a>
　　　　　　　　　　</li>
　　　　　　　　　　<li>
　　　　　　　　　　　　<a href="#/page3">
　　　　　　　　　　　　<h5>page3</h5>
　　　　　　　　　　　　</a>
　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</div>
</body>
<script src="lib/require.js"></script>
<script src="start.js"></script>
</html>

主要代码解释： require.js 加载、管理js插件 <div data-ui-view=""></div>是angular-ui-router.js用来管理路由页面加载的

start.js

require.config({
　　baseUrl: './',
　　paths: {//就是文件存放路径
　　　　'angular': 'lib/angular.min',
　　　　'angular-ui-router': 'lib/angular-ui-router',
　　　　'angular-async-loader': 'lib/angular-async-loader.min'
　　},
　　shim: {
　　　　'angular': {exports: 'angular'},//注明依赖
　　　　'angular-ui-router': {deps: ['angular']}//注入依赖，也就是router要依赖angular才能运行
　　　　}
　});

require(['angular', './app-routes'], function (angular) { // angular ./app-routes 启动时加载这两个js文件
　　angular.element(document).ready(function () {
　　　　angular.bootstrap(document, ['app']);
　　　　angular.element(document).find('html').addClass('ng-app');//启动angular 在页面html添加一个 ng-app='app'一样的效果
　　});
});

主要代码解释：该js文件主要功能是加载启动angularjs文件

app-routes.js

define(function (require) {
　　var app = require('./app'); //加载下面的 app.js 文件

　　app.run(['$state', '$stateParams', '$rootScope',function ($state, $stateParams,$rootScope) {
　　　　$rootScope.$state = $state;
　　　　$rootScope.$stateParams = $stateParams;
　　}]);

　　app.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider){
　　　　$urlRouterProvider.otherwise('/page1');
　　　　$stateProvider
　　　　　　.state('page1', {
　　　　　　　　url: '/page1',
　　　　　　　　templateUrl: 'page/page1.html',
　　　　　　　　// new attribute for ajax load controller
　　　　　　　　controllerUrl: 'page/page1',
　　　　　　　　controller: 'Page1Ctrl'
　　　　　　　　})
　　　　　　.state('page2', {
　　　　　　　　url: '/page2',
　　　　　　　　cache : false,
　　　　　　　　templateUrl: 'page/page2.html',
　　　　　　　　controllerUrl: 'page/page2',
　　　　　　　　controller: 'Page2Ctrl'
　　　　　　})
　　　　　　.state('page3', {
　　　　　　　　url: '/page3',
　　　　　　　　cache : false,
　　　　　　　　templateUrl: 'page/page3.html',
　　　　　　　　controllerUrl: 'page/page3',
　　　　　　　　controller: 'Page3Ctrl'
　　　　　　})
　　　}]);
});