关于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. gerrit 调试smtp email
			
    
			
    2. 
						
  2. SQL Server 数据库安全
			
    --创建登陆用户 --create login login_name from windows with default_database = database | default_language  ...
    
			
    3. 
						
  3. 如何判断raid1中哪块硬盘损坏？
			
    服务器 2块硬盘做的raid1,如果其中有一块坏掉,如何能判断是哪块坏掉? 方法①.通过硬盘硬件指示灯进行观察,一般黄灯代表硬盘存在问题,显示红灯则代表硬盘损坏.方法②.通过开机进入阵列配置进行查看, ...
    
			
    4. 
						
  4. linux下快速删除大量文件
			
    昨天遇到一个问题,在Linux中有一个文件夹里面含有大量的Cache文件(夹),数量级可能在百万级别,使用rm -rf ./* 删除时间慢到不可接受.Google了一下,查到了一种方法,试用了下确实比 ...
    
			
    5. 
						
  5. linux下proc目录详解
			
    proc/pid记录了什么cd /proc/之后,你会发现很多的目录和文件,今天首先来介绍的就是那些以数字命名的目录--它们就是linux中的进程号,每当你创建一个进程时,里面就会动态更新多出一个名称 ...
    
			
    6. 
						
  6. PHP 下载文件时自动添加bom头的方法
			
    首先弄清楚,什么是bom头?在Windows下用记事本之类的程序将文本文件保存为UTF-8格式时,记事本会在文件头前面加上几个不可见的字符(EF BB BF),就是所谓的BOM(Byte order  ...
    
			
    7. 
						
  7. Delphi 2010初体验，是时候抛弃Delphi 7了
			
    Delphi 2010已于近日由Embarcadero公司发布.作者Kim Madsen作为一名资深的Delphi开发者,在他的博客中谈到了Delphi 2010的新性能.它的使用感受以及对Delph ...
    
			
    8. 
						
  8. JqueryUI
			
    http://jqueryui.com/ http://www.runoob.com/jqueryui/jqueryui-tutorial.html
    
			
    9. 
						
  9. MVC 区分是哪按键提交FORM
			
    原理: 引用model(@model modelName)的画面,提交到后台的model对象,属性与前台post标签name属性对应来获取值. 前台: @model myModel @using(Ht ...
    
			
    10. 
						
  10. Mysql 简单问题汇总（持续更新）
			
    主从架构相关问题 问题现象:从机连接主机时报错 [ERROR] Slave I/O: error connecting to master 'repl@192.168.0.50:3306' - ret ...
    
			
    11.