AngularJS 项目搭建--基于RequireJs

大佬教程收集整理的这篇文章主要介绍了AngularJS 项目搭建--基于RequireJs，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

较大规模的angular单页应用由于引用了大量的资源文件可能会导致在页面加载速度较慢，然而这些资源并非都需要在首页使用，这里我们可以使用了 requireJs 和 angular-async-loader 来实现资源和angular模块的异步加载，提高应用的加载速度和性能

依赖

使用bower管理项目依赖

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。（bower需要依赖 nodejs）

安装项目依赖

1.angular

bower install angular

2.angular-ui-router

bower install angular-ui-router

3.requirejs 详细文档

bower install requirejs

4.angular-async-loader

bower install https://github.com/subchen/angular-async-loader.git

目录结构

└── project
    ├── js                        -- js目录
         ├── app.js               -- 初始化app
         ├── login.js             -- 登陆页控制器
         ├── router.js            -- 路由
         ├── service.js           -- 服务模块
         └── productlist.json     -- 测试数据
    ├── template                  -- 模版html
    ├── index.html                -- 入口页
    ├── bootstrap.js              -- 项目启动器
    └── bower_components          -- bower维护的插件

调用

配置需要使用requirejs调用的模块路径和依赖（bootstrap.js）

require.config({
    baseUrl:'./',paths:{
        'angular':'bower_components/angular/angular','angular-ui-router': 'bower_components/angular-ui-router/release/angular-ui-router.min','service':'js/service.js'
    },shim:{
        'angular':{exports:'angular'},'angular-ui-router': {deps: ['angular']},'service':{deps: ['angular']}
    },waitSeconds: 0 //超时时间 设为0即持续等待
})

初始化项目，启动angular（bootstrap.js）

//载入angular和路由
require(['angular','js/router'],function(angular){
    angular.element(document).ready(function(){
        angular.bootstrap(document,['app']); //angular加载完成后手动启动angular
    });
})

初始化angular主模块并配置异步加载模块（js/app.js）

define(function(require,exports,modulE){
    var angular = require('angular'); //引入angular
    var asyncLoader = require('angular-async-loader'); //引入异步加载模块组件

    require('angular-ui-router')
    
    var app = angular.module('app',['ui.router']); //定义app模块

    asyncLoader.configure(app); //给app模块配置异步加载
    
    module.exports = app; //作为模块导出
})

路由中要定义controller所在文件位置（js/router.js）

$stateProvider.state('login',{
    url:'/login',templateUrl: "template/login.html",controllerUrl: "js/login",//controller所在文件位置
    controller: "login" //controller名称
})

新建自定义模块（js/service.js）

define(function(requirE) {
    var angular = require('angular'); //引入angular

    angular.module('app.service',[]) //创建模块
        .factory('asyncModule',function() {
            return '我的模块'
        })
})

controler中异步加载模块（js/login.js）

define(function(requirE) {

    var app = require('js/app') //引入js/app.js下的app模块

    require('service'); //加载服务模块的js文件    
    app.useModule('app.service'); //异步加载app.service模块

    // 控制器中注入方法     
    app.controller('login',['$scope','asyncModule',function($scope,asyncModulE){
        alert(asyncModulE);
    }]);
    
})

大佬总结

以上是大佬教程为你收集整理的AngularJS 项目搭建--基于RequireJs全部内容，希望文章能够帮你解决AngularJS 项目搭建--基于RequireJs所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。