关于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大概如下

  1. <!doctype html>
  2. <!-- <html xmlns:ng="//angularjs.org" id="ng-app" ng-app="webApp"> -->
  3. <htmls>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  7. </head>
  8.  
  9. <body>
    <!--其他html内容-->
  10. <script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>
  11. </body>
  12. </html>

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

三、配置mian.js

  1. require.config({
  2.     paths:{
            //一些库文件
  3.         'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',
  4.         'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',
  5.         '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文件，这里省略
  6.     },
  7.     shim:{
  8.         'angular':{
  9.             exports:'angular'
  10.         },
  11.         'angular-route':{
  12.             deps:['angular'],
  13.             exports: 'angular-route'
  14.         }
  15.     },
  16.     deps:['bootstrap'],
  17.     urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存，调试用
  18. });

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

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

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

四、手动启动angularjs应用

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

  1. define(['require',
  2.         'angular',
  3.         'angular-route',
  4.         'jquery',
  5.         'app',
  6.         'router'
  7.        ],function(require,angular){
  8.             'use strict';
  9.             require(['domReady!'],function(document){
  10.                 angular.bootstrap(document,['webapp']);
  11.             });
  12.         });

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

五、网站路由设置

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

  1. define(["app"],
  2.        function(app){
  3.             return app.run([
  4.                             '$rootScope',
  5.                             '$state',
  6.                             '$stateParams',
  7.                             function ($rootScope, $state, $stateParams) {
  8.                                 $rootScope.$state = $state;
  9.                                 $rootScope.$stateParams = $stateParams
  10.                             }
  11.                          ])
  12.                      .config(function($stateProvider, $urlRouterProvider, $locationProvider, $uiViewScrollProvider){
  13.                         //用于改变state时跳至顶部
  14.                         $uiViewScrollProvider.useAnchorScroll();
  15.                         // 默认进入先重定向
  16.                         $urlRouterProvider.otherwise('/home');
  17.                         $stateProvider
  18.                         .state('home',{
  19.                             //abstract: true,
  20.                             url:'/home',
  21.                             views: {
  22.                                 'main@': {
  23.                                     templateUrl: '../view/home.html'
  24.                                 }
  25.                             }
  26.                         })
  27. })

 六、angular.module

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

  1. var app = angular.module("xxx",["xxx"]);
  2.  
  3. app.controller("foo",function($scope){});
  4. app.directive(...)

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

  1. define(["angular",
  2.         'mainController',
  3.         'mainDirective'
  4.        ],function(angular){
  5.     return angular.module("webapp",['ui.router','ngStorage','ngSanitize','webapp.controllers','webapp.directive']);
  6. })

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

七、控制器

我们的mainController.js是这样的

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

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

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

  1. define(['../scripts/controller/module.js','jquery'],function(controllers,$){
  2.     'use strict';
  3.     controllers.controller('controller1',function($scope){
  4.         //控制器的具体js代码
  5.     })
  6. })

其中依赖module.js

而module.js如下

  1. define(['angular'], function (angular) {
  2.     'use strict';
  3.     return angular.module('webapp.controllers', []);
  4.  });

八、指令

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

九、其他

如何将angularJs项目与requireJs集成的更多相关文章

  1. 【转】Yeoman自动构建 Angularjs 项目

    Yeoman是什么? Yeoman按照官方说法,它不只是一个工具,还是一个工作流.它其实包括了三个部分yo.grunt.bower,分别用于项目的启动.文件操作.包管理. Yo: Yo是一个项目初始化 ...

  2. AngularJs项目

    AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularj ...

  3. angularJs项目实战！01：模块划分和目录组织

    近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap ...

  4. 基于 flow.ci 实现 PHP 项目自动化持续集成

    高效程序员的习惯之一--让开发流程自动化.Automating shapes smarter future. 这是一个关于如何快速实现 PHP 项目自动化持续集成的快速指导.无论你是否使用过持续集成, ...

  5. 3 分钟轻松搭建 Ruby 项目自动化持续集成

    任何事情超过 90 秒就应该自动化,这是程序员的终极打开方式.Automating shapes smarter future. 这是一篇关于 Ruby 项目持续集成的快速指导教程,教大家如何使用 f ...

  6. 使用Yeoman快速启动AngularJS项目开发

    本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...

  7. Atitit.mybatis的测试  以及spring与mybatis在本项目中的集成配置说明

    Atitit.mybatis的测试  以及spring与mybatis在本项目中的集成配置说明 1.1. Mybatis invoke1 1.2. Spring的数据源配置2 1.3. Mybatis ...

  8. AppVeyor-CI为GitHub项目做自动化集成（dotnet为主）

    travis-ci对dotnet的项目做自动化集成不太友好,尤其是使用mono的编译和不能使用MSTest进行自动化测试,所以转到appveyor进行. appveyor的配置非常简单,有两种方式: ...

  9. angularJs项目实战！02：前端的页面分解与组装

    自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...

随机推荐

  1. 从IT的角度思考BIM（三）：敏捷开发

    人们看到了远处BIM的美丽胜景和阻挡在眼前的宽广河流.有些人自信满满地跳入河中打算孤身游过彼岸,可是却失败了.有些人匆匆忙忙地造了船胡乱地滑向彼岸,可是也失败了. 要如何继续这段探索之旅? 无论是&l ...

  2. Learn Docker

    Learn Docker A Container is to VM today, what VM was to Physical Servers a while ago. The workload s ...

  3. BZOJ3190[JLOI2013]赛车

    Description 这里有一辆赛车比赛正在进行,赛场上一共有N辆车,分别称为个g1,g2--gn.赛道是一条无限长的直线.最初,gi位于距离起跑线前进ki的位置.比赛开始后,车辆gi将会以vi单位 ...

  4. WebForm中TreeView的使用

    protected void Page_Load(object sender, EventArgs e)        {            DatabaseBind();            ...

  5. leetcode 组合题

    1.Subsets 代码1: class Solution { public: vector<vector<int> > subsets(vector<int> & ...

  6. C#中通过调用Dll函数时，执行一段时间后，就会报内存可能被破坏的错的解决办法

    遇到同样的问题,已经解决的:http://blog.csdn.net/youxiazzz12/article/details/24313347

  7. REST内容协商注解

    @Produces注解: 用于定义方法的响应实体的数据类型.可以定义一个或多个,同时可以为每种类型定义质量因素,质量因素取值范围从0--1的小数值,默认为1. 示例: @Path("conn ...

  8. CAS单点登录配置[1]：准备工作

    关于CAS是什么这里就不在赘述,网友将它比喻成旅游景点的套票,买了一个套票就可以观看所有景点,不需要一个景点买一次票...我们重点介绍CAS单点登录的配置. 工具/原料 1.配置好JDK环境,否则不方 ...

  9. 李洪强漫谈iOS开发[C语言-029] - 关系运算符

  10. 好看的UI设计网站 www.ui.cn 和 插画网站 www.pixiv.net 千图网，界面很不错～

    http://www.ui.cn/?t=share#project http://www.pixiv.net/ http://www.flaticon.com/ www.58pic.com 那张 给人 ...