关于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. shell脚本循环执行mysql语句
			
    参考资料:Shell脚本中执行mysql语句 需求:数据库里有张数据表存储的是用户对电影的评价(user_id movie_id rating time),但是我现在要每部电影的总评分. 解决方法:  ...
    
			
    2. 
						
  2. json与gson
			
    json:java中将json字符串转换成实体对象时,key值不能大写.将实体对象转换成json时,会默认把key值改成小写 gson:java中将json字符串转换成实体对象时,要与实体对象的字段值 ...
    
			
    3. 
						
  3. MITM to crack Https connections
			
    Everybody knows that https is http over SSL, and https is a secure way for protecting confidential d ...
    
			
    4. 
						
  4. Android IOS WebRTC 音视频开发总结（二七）-- whatsapp之转发优先
			
    最近看了一篇老外在webrtcHacks上写的文章,主要介绍webrtc和whatsapp的传输机制,蛮好的,加上自己的理解进行总结, 希望对大伙有所帮助,转载请说明出处,原文来自博客园RTC.Bla ...
    
			
    5. 
						
  5. jQuery--each遍历使用方法
			
    定义和用法 each() 方法规定为每个匹配元素规定运行的函数. 提示:返回 false 可用于及早停止循环. 语法 $(selector).each(function(index,element)) ...
    
			
    6. 
						
  6. C++ 必知必会：条款15 成员的指针并非指针
			
    指向类成员的类成员的指针说是“指针”,其实是不合适的,因为他既不包含地址,其行为也不像指针 常规的指正,包含地址,对其解应用可以得到该指针包含地址所指向的对象 1: int a = 12: 2: in ...
    
			
    7. 
						
  7. SQL SERVER连接字符串学习
			
    在使用connection string时遇到一些问题 字符串如下"Data Source= ******;Initial Catalog=******;Persist Security I ...
    
			
    8. 
						
  8. Dev的DocumentManager 相关问题
			
    1.改变DocumentManager包含的窗体的排列方式 if (this.documentManager1.View.Type != ViewType.NativeMdi) { this.docu ...
    
			
    9. 
						
  9. ThinkPHP整合支付宝即时到账接口调用
			
    首先是在支付宝的蚂蚁金服开放平台下载PHP的demo: https://doc.open.alipay.com/doc2/detail?treeId=62&articleId=103566&a ...
    
			
    10. 
						
  10. 模拟新浪微博textarea，刷新页面输入信息保留
			
    今天我们的产品经理提出一个新需求,模拟新浪微博textarea框,输入内容刷新页面保留信息. 我是用的方法是Html5 LocalStorage存储的,开始计划用cookie.或mysql存储,尝试了 ...
    
			
    11.