关于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. Android之Handler(异步消息处理)机制
			
    1. 概述 Handler . Looper .Message 这三者都与Android异步消息处理线程相关的概念.那么什么叫异步消息处理线程呢?异步消息处理线程启动后会进入一个无限的循环体之中,每循 ...
    
			
    2. 
						
  2. SQL:每年每月最高的两个温度
			
    SET QUOTED_IDENTIFIER ONGO CREATE TABLE [dbo].[Temperature]( [ID] [int] IDENTITY(1,1) NOT NULL, [Mon ...
    
			
    3. 
						
  3. TCP/IP详解学习笔记（9）-- 广播，多播，IGMP：网际组管理协议
			
    1.概述      IP有三种地址:单播地址, 广播地址,多播地址.      广播和多播仅应用于UDP.      每个以太网帧包含源主机和目的主机的以太网地址.通常每个以太网帧发往单个目的主机,目 ...
    
			
    4. 
						
  4. linux下的mysql乱码问题
			
    1,承接上一随笔,因为我用的是rmp的两种反式. rpm -ivh MySQL-server-4.0.14-0.i386.rpm rpm -ivh MySQL-client-4.0.14-0.i386 ...
    
			
    5. 
						
  5. Windows API——CREATEEVENT——创建事件
			
    事件是一个允许一个线程在某种情况发生时,唤醒另外一个线程的同步对象.事件告诉线程何时去执行某一给定的任务,从而使多个线程流平滑 CreateEvent是创建windows事件的意思,作用主要用在判断线 ...
    
			
    6. 
						
  6. Hibernate 问题,在执行Query session.createQuery(hql) 报错误
			
    在配置文件中加入 <prop key="hibernate.query.factory_class">org.hibernate.hql.internal.classi ...
    
			
    7. 
						
  7. php获取文件创建时间、修改时间
			
    filemtime ( string filename ) 返回文件上次被修改的时间,出错时返回 FALSE.时间以 Unix 时间戳的方式返回,可用于 date(). 例如:$a=filemtime ...
    
			
    8. 
						
  8. LiveView 0.8 RC1 could boot evidence files acquired from Win10 64bit
			
    The latest Windows 10 will be more and more popular in the very near future. Now let's take a look i ...
    
			
    9. 
						
  9. MyBatis学习系列二——增删改查
			
    目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...
    
			
    10. 
						
  10. typedef 及其与struct的结合使用
			
    //相当于为现有类型创建一个别名,或称类型别名. //整形等 typedef int size; //字符数组 ]; ];//=> typedef ]; Line text, secondlin ...
    
			
    11.