关于angularjs、requirejs的基础知识请自行学习

一、简单事例的项目目录如下：

-index.html

-scripts文件夹

--controller文件夹

--- mianController.js

--- controller1.js

---controller2.js

--directives文件夹

---mainDirective.js

---directive.js

--app.js

--router.js

--main.js

二、首页

首先你的index.html大概如下

<!doctype html>

<!-- <html xmlns:ng="//angularjs.org" id="ng-app" ng-app="webApp"> -->

<htmls>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

</head>

<body>

<!--其他html内容-->

<script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>

</body>

</html>


在首页index.html只需要引入requireJs库文件，并且指明入口函数main.js，采用手动启动angularjs应用，所以这里不用为首页添加ng-app='webApp'。


三、配置mian.js




 


require.config({

    paths:{
        //一些库文件

        'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',

        'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',

        'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
        //js文件
        'bootstrap': "../scripts/bootstrap",
        'app': "../scripts/app",
        'router': "../scripts/router"
        .....以及其他的js文件，这里省略

    },

    shim:{

        'angular':{

            exports:'angular'

        },

        'angular-route':{

            deps:['angular'],

            exports: 'angular-route'

        }

    },

    deps:['bootstrap'],

    urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存，调试用

});


 




关于require.config()中的配置大概如下（依照自己的项目情况，这里我简单配置了），


所以总体上说main.js这个文件做的事情就是：由requirejs异步载入所有文件


注意到其中的deps：['bootstrap']，就是告诉我们要先加载bootstrap.js文件。


四、手动启动angularjs应用


而bootstrap.js就是我用来手动启动angularjs应用的，代码如下




 


define(['require',

        'angular',

        'angular-route',

        'jquery',

        'app',

        'router'

       ],function(require,angular){

            'use strict';

            require(['domReady!'],function(document){

                angular.bootstrap(document,['webapp']);

            });

        });


 




这里依赖于app.js和router.js，我们看看这两个文件分别做什么


五、网站路由设置


我们这里使用ui-router。所以我们的router.js应该是这样的，主要是用来定义路由的，关于ui-router的配置请自行查看相关知识，这里就简单略过




 


define(["app"],

       function(app){

            return app.run([

                            '$rootScope',

                            '$state',

                            '$stateParams',

                            function ($rootScope, $state, $stateParams) {

                                $rootScope.$state = $state;

                                $rootScope.$stateParams = $stateParams

                            }

                         ])

                     .config(function($stateProvider, $urlRouterProvider, $locationProvider, $uiViewScrollProvider){

                        //用于改变state时跳至顶部

                        $uiViewScrollProvider.useAnchorScroll();

                        // 默认进入先重定向

                        $urlRouterProvider.otherwise('/home');

                        $stateProvider

                        .state('home',{

                            //abstract: true,

                            url:'/home',

                            views: {

                                'main@': {

                                    templateUrl: '../view/home.html'

                                }

                            }

                        })

})


 




 六、angular.module


这时先看看平时我们在写angularjs应用是这样写的




var app = angular.module("xxx",["xxx"]);

app.controller("foo",function($scope){});

app.directive(...)




所以我们的app.js应该是这样的




 


define(["angular",

        'mainController',

        'mainDirective'

       ],function(angular){

    return angular.module("webapp",['ui.router','ngStorage','ngSanitize','webapp.controllers','webapp.directive']);

})


 




其中我们的app.js中依赖的mainController和mainDirective主要是用来加载angular的控制器和指令


七、控制器


我们的mainController.js是这样的




define(['controller1','controller2'],function(){});




主要用来加载各个控制器（所有的控制器都将在这个文件中被加载）,除此之外再不用做其他，因为我们可以有很多个控制器文件，按照具体需要进行添加。


controller1.js文件(其他控制器controller2文件类似)




 


define(['../scripts/controller/module.js','jquery'],function(controllers,$){

    'use strict';

    controllers.controller('controller1',function($scope){

        //控制器的具体js代码

    })

})


 




其中依赖module.js


而module.js如下




define(['angular'], function (angular) {

    'use strict';

    return angular.module('webapp.controllers', []);

 });




八、指令


同理mianDirective.js也类似。参考控制器


九、其他
												


											
AngularJS与RequireJS集成方案的更多相关文章
	

    
								
  1. 基于angularJS和requireJS的前端架构
		
    1.概要描述 1.1.angularJS描述:angularJS是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来 ...
    
		
    2. 
						
  2. 如何将angularJs项目与requireJs集成
		
    关于angularjs.requirejs的基础知识请自行学习 一.简单事例的项目目录如下: -index.html -scripts文件夹 --controller文件夹 --- mianContr ...
    
		
    3. 
						
  3. Integrating AngularJS with RequireJS
		
    Integrating AngularJS with RequireJS When I first started developing with AngularJS keeping my contr ...
    
		
    4. 
						
  4. Spring+Struts集成(方案一)
		
    SSH框架是现在非常流行的框架之一,本文接下来主要来对Spring和Struts的集成进行展示. 集成原理:在Action中取得BeanFactory,通过BeanFactory取得业务逻辑对象. 集 ...
    
		
    5. 
						
  5. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
		
    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
    
		
    6. 
						
  6. AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
		
    在AngularJS应用中集成科大讯飞语音输入功能 注:请点击此处进行充电! 前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方 ...
    
		
    7. 
						
  7. AngularJS - 使用RequireJS还是Browserify？
		
    http://www.html-js.com/article/2126 AngularJS - 使用RequireJS还是Browserify? AngularJS之所以吸引了很多开发者的关注,很大一 ...
    
		
    8. 
						
  8. SSO集成方案[随笔]
		
    看这个方案之前,先说明下为什么要加入SSO,以防对大家产生不好的影响.我们产品使用传统winform+db服务+Db存储方式开发,一群老菜帮子开发,以传统的datatble做数据传递,很多年了未有变化 ...
    
		
    9. 
						
  9. AngularJS + ui-router + RequireJS异步加载注册controller／directive／filter／service
		
    一般情况下我们会将项目所用到的controller/directive/filter/sercive预先加载完再初始化AngularJS模块,但是当项目比较复杂的情况下,应该是打开对应的界面才加载对应 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. StackExchange.Redis使用和封装小试
			
    StackExchange.Redis使用和封装小试 https://git.oschina.net/Ultralisk/ThorActor/blob/ThorActor/DBUtility/Redi ...
    
			
    2. 
						
  2. sql语句小练习一
			
    create database aaa go use aaa go create table student(    sno varchar(3), sname varchar(4) not null ...
    
			
    3. 
						
  3. IIS报错 未将对象引用设置到对象的实例。
			
    在vs中运行正常的项目 ,发布到IIS总是提示 未将对象引用设置到对象的实例. 运行静态页面 html正常,只是打开.aspx页面的时候报错,在确保了数据库,配置,权限均正常的情况下. 错误原因:先安 ...
    
			
    4. 
						
  4. 支持在安卓中UI(View)的刷新功能
			
     这是一款可以支持在安卓中UI(View)的刷新功能,Android中对View的更新有很多种方式,使用时要区分不同的应用场合.我感觉最要紧的是分清:多线程和双缓冲的使用情况.   现在可以尝试理解下 ...
    
			
    5. 
						
  5. wp仿系统截图
			
    wp上直接调用CameraCaptureTask,并没有参数设置截图大小,刚好项目需求要截成正方型,于是写了个仿系统截图的demo出来. 截图如下:     需要做的逻辑运算为: 1.初始化照片时:判 ...
    
			
    6. 
						
  6. CTest
			
    一.初识CTest CTest是CMake集成的一个测试工具,在使用CMakeLists.txt文件编译工程的时候,CTest会自动configure.build.test和展现测试结果 CTest有 ...
    
			
    7. 
						
  7. require.js js模块化方案
			
    一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
    
			
    8. 
						
  8. [原]Django调试工具--django-debug-toolbar
			
    请摒弃简单粗暴的print --马云 我比较习惯在windows中安装pycharm开发,项目部署在虚拟机中,在本地浏览器中查看效果,这种方式在调试上会有点麻烦,django-debug-toolba ...
    
			
    9. 
						
  9. Centos 7.1+CDH5.7.2全部署流程
			
    前期准备: JDK环境 版本:jdk-8u101-linux-x64.rpm 下载地址:oracle官网 mysql rpm包:http://dev.mysql.com/get/Downloads/M ...
    
			
    10. 
						
  10. BM串匹配算法
			
    串匹配算法最常用的情形是从一篇文档中查找指定文本.需要查找的文本叫做模式串,需要从中查找模式串的串暂且叫做查找串吧. BM算法好后缀规则 公式: 对于长度为m的模式串P,在i处失配时,模式串向前滑动的 ...
    
			
    11.