angular按需加载js
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'
})
}]);
});
主要代码解释:该文件主要作用是配置路由
app.js
define(function (require, exports, module) {
var angular = require('angular');
var asyncLoader = require('angular-async-loader');//加载
require('angular-ui-router');
var app = angular.module('app', ['ui.router']);
asyncLoader.configure(app);
module.exports = app;
});
主要代码解释:start.js加载的文件路径需要在这里引入才能生效 如:require('angular-ui-router'); 就是引入 angular-ui-router 作为全局作用
下面是3个页面和对应的js文件
page1.html
page1: <input ng-model="message" type="text"/>
<h1>{{message}}</h1>
page2.html
page2: <input ng-model="message" type="text"/>
<h1>{{message}}</h1>
page3.html
page3: <input ng-model="message" type="text"/>
<h1>{{message}}</h1>
page1.js
define(['app'], function(app){
app.controller('Page1Ctrl', ['$scope',function($scope){
$scope.message = "page1";
}]);
});
page2.js
define(['app'], function(app){
app.controller('Page2Ctrl', ['$scope',function($scope){
$scope.message = "page2";
}]);
});
page3.js
define(['app'], function(app){
app.controller('Page3Ctrl', ['$scope',function($scope){
$scope.message = "page3";
}]);
});
主要代码解释:controller的加载方式与直接引入angular有所不同 其他该怎么用不变。
至此,angular实现按需加载已完成!如有疑问可以联系本人:896683453@qq.com
demo地址:
http://download.csdn.net/detail/xmp896683453/9688686