关于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. CODEVS 1001 舒适的路线
			
    思路:先按照速度大小对边排序,再枚举最终路径中的速度最大值,并查集,更新答案 #include<iostream> #include<vector> #include<a ...
    
			
    2. 
						
  2. Android多线程异步处理：AsyncTask 的实现原理
			
    AsyncTask主要用来更新UI线程,比较耗时的操作可以在AsyncTask中使用. AsyncTask是个抽象类,使用时需要继承这个类,然后调用execute()方法.注意继承时需要设定三个泛型P ...
    
			
    3. 
						
  3. NOI2002 银河英雄传说
			
    P1196 银河英雄传说 367通过 1.1K提交 题目提供者该用户不存在 标签并查集NOI系列2001(或之前) 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 莱因哈特什么鬼? 私人代码 ...
    
			
    4. 
						
  4. 【drp 9】Servlet生命周期
			
    一.基本概念 Servlet(Server Applet):全称Java Servlet,是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容.狭义的Servlet ...
    
			
    5. 
						
  5. 2.2安装JDK
			
    在Ubuntu下安装JDK的步骤: (1)首先需要自己安装的Ubuntu系统是多少位的,可以使用命令[getconf LONG_BIT]获取这个信息: (2)在JDK官网下载相应(选取和Linux系统 ...
    
			
    6. 
						
  6. vs2012 快捷键修改
			
    打开:工具-->选项 搜索:剪切行 移除原有的 Crtl+L 命令 改为:Ctrl+D
    
			
    7. 
						
  7. MVC开发Markdown编辑器（2）
			
    MVC开发Markdown编辑器(2) MVC Markdown 实时预览 我希望实现一个在线实时预览的Markdown编辑器,左边是编辑处,右边是实时预览界面. 准备工作 引入相关js和css 这里 ...
    
			
    8. 
						
  8. c#使用NPOI导出Excel及往Excel里追加记录
			
    最近在做一个打印发票的程序,要求保存打印记录,所以用到了NPOI往Excel里导入数据,但是遇到了一些问题没法解决,最后看了别人的Java程序后才明白.下面只是说明几个问题,而不是怎样使用NPOI 问 ...
    
			
    9. 
						
  9. Windows 和  Linux 下 禁止ping的方法
			
    Windows 和Linux 下 禁止ping的方法 目的: 禁止网络上的其他主机或服务器ping自己的服务器 运行环境: Windows 03.08  linux 方法: Windows 03下:  ...
    
			
    10. 
						
  10. Nginx下10个安全问题提示
			
    Nginx是当今最流行的Web服务器之一.它为世界上7%的web流量提供服务而且正在以惊人的速度增长.它是个让人惊奇的服务器,我愿意部署它 下面是一个常见安全陷阱和解决方案的列表,它可以辅助来确保你的 ...
    
			
    11.