利用require.js与angular搭建spa应用的方法实例

前端之家收集整理的这篇文章主要介绍了利用require.js与angular搭建spa应用的方法实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

本文是,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分:

  1)app.js 入口

  2)index.html html框架页

  3)lib(vendor)第三方类库

  4)components 业务组件

  5)styles/images 静态资源部分

1、常规实现

创建文件夹demo1,按照上述结构分别创建app.js,index.html文件,创建lib、components、styles和images文件夹,最终如下图所示:

在此基础上,我们增加三个业务组件home,about,contact,并初始化基本代码如下:

核心代码文件

index.html

app.js

$stateProvider.state('home',{
url: '/home',templateUrl: './components/home/home.tpl.html',controller: 'HomeController',controllerAs: 'vm'

}).state('about',{
url: '/about',templateUrl: './components/about/about.tpl.html',controller: 'AboutController',controllerAs: 'vm'
}).state('contact',{
url: '/contact',templateUrl: './components/contact/contact.tpl.html',controller: 'ContactController',controllerAs: 'vm'
})

}])

controller中文件格式一直,tpl为view文件以home模块为例:

home.controller.js

HomeController.$inject = ['$scope'];

function HomeController($scope) {
console.log("HomeController created successfully!!!");
}

home.tpl.html

Page Home

对命名做如下规定,所有文件夹都用小写,多词用点号隔开,所有文件都小写,多词用点号分割,控制器以.controller.js结尾,类似的有.service.js,.tpl.html,.directive.js,.filter.js等。

最终运行效果如下:

上述代码能正常运行,但是我们发现一个问题,当前js文件或者说模块较少,我们引入不会有很大的问题,但是当我们的应用变得很大,文件几十甚至上百个,如何处理呢,有人说当然使用构建工具了,一个一个引入多慢呢,构建工具当然可以做到批量引入js文件,但是我们还需要考虑按需加载的问题,举例来说,我们在打开home的时候,about和contact是没必要加载的,但是按照我们传统的模式,所有脚本都完成了加载,这首先增加了http请求次数,脚本过多的加载解析也影响浏览器的渲染,用户体验并不友好,基于此,我们有几种方式来实现,1、基于requirejs来做,这也是本章内容要讲的部分;2、使用webpack分块打包,实现按需加载,后期看时间会加入对应的文章;3、使用oclazyload(可自行google)。本文就以requirejs来实现一下业务模块的按需加载,在此之前首先引入requirejs。

2、引入Requirejs

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境,就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量,实现的是AMD规范,当然类似的还有CMD规范的实现框架seajs。

Requirejs中,简单的说一个文件一个模块,即是单文件模块,所以对模块的加载其实本质上是对文件的加载。

假设读者已经了解requirejs的基本使用方式。

上一节中,讲到了提了一下controller的注册方式,其中说到了动态注册,当然除了controller之外,还有service、directive等都可以实现动态注册,这也是我们实现按需加载的基础,现在对我们的项目做一下修改增加requirejs配置文件,main.js

},shim:{
angular:{exports:'angular'}
}
});

require(['angular','./app','ui_router'],function(angular,app){
angular.element(document).ready(function(){
angular.bootstrap(document,[app.name]);
})
})

app.js修改如下:

注册controller factory: $provide.factory//动态注册服务 } }]) .config(['$stateProvider',$urlRouterProvider) { //默认指向 $urlRouterProvider.otherwise('/home');

$stateProvider.state('home',controllerAs: 'vm',resolve: {
deps: loadCtrl(['./components/home/home.controller'])
}

}).state('about',resolve: {
deps: loadCtrl(['./components/about/about.controller'])
}
}).state('contact',resolve: {
deps: loadCtrl(['./components/contact/contact.controller'])
}
})

}]);
return app;

function loadCtrl(path_arr) {
return ['$q','$rootScope',function ($q,$rootScope) {
var defered = $q.defer();
require(path_arr,function () {
            $rootScope.$apply(function(){
            
              deffered.resolve();
            })
49 });

return defered.promise;

}]
};
})

修改controller注册方式如下:

HomeController.$inject = ['$scope'];

function HomeController($scope) {
console.log("HomeController created successfully!!!");
}
})

最后修改修改index.html中脚本引入方式,以及去掉ng-app指令启动方式,angular应用启动已在main.js中通过domready后使用脚本启动。

<Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge"> demo1

猜你在找的JavaScript相关文章