angular利用require.js和nodejs的一个模块式开发部分步骤小结：
第一部分：Node.js的下载，npm的安装，http服务的使用
1、下载并安装 node.js
2、工作目录下写一个package.json
文件内容：
“scripts”: {
“start”: “http-server -a 0.0.0.0 -p 8000”,
}
-p 端口号 (默认 8080)
-a IP 地址 (默认 0.0.0.0)
3、开始菜单搜索的地方，输入 cmd
4、访问上一级目录 cd..
5、一级一级进入package.json所在文件夹 cd 文件名
例如： d: 进入d盘
cd www 进入d盘中的www文件夹
一次性进入package.json所在文件夹
例如： d: 进入d盘
cd 用户目录我的文档HBuilderProjectAngularjs
6、配置node.js的http服务
npm install http-server (安装)
npm install -g http-server （全局安装加 -g）
npm NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，
常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
install 安装
-g 全局
http-server 一个简单的零配置命令行HTTP服务器, 基于 nodeJs.
7、开启http服务 http-server
注意：需要进入你要打开的文件夹内（在站点目录下） 在打开cmd输入http-server 否则打开127.0.0.1:8080 会进入 Index of / 的界面中，得一级级查找文件地址
8、访问: http://localhost:8080 or http://127.0.0.1:8080
注意：cmd要全程开启，http服务才生效，关闭cmd http服务关闭
-d 显示目录列表 (默认 'True')
-i 显示 autoIndex (默认 'True')
-e or --ext 如果没有提供默认的文件扩展名(默认 'html')
-s or --silent 禁止日志信息输出
--cors 启用 CORS via the Access-Control-Allow-Origin header
-o 在开始服务后打开浏览器
-c 为 cache-control max-age header 设置Cache time(秒) , e.g. -c10 for 10 seconds (defaults to '3600'). 禁用 caching, 则使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
-S or --ssl 启用 https
-C or --cert ssl cert 文件路径 (default: cert.pem)
-K or --key Path to ssl key file (default: key.pem).
-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: * Disallow: /')
第二部分：require的配置和使用
一、require的配置
1.在index.html中引入 require插件
2.data-main 指向 入口文件 main.js
3.首先对require 进行文件配置 路径配置
不符合amd规范的插件配置
使用require进行模块调用 ，模块调用里边手动添加app
4.定义app的模块
5.定义路由表信息
a.index.html 添加 ng-view
b.使用路由服务 添加路由信息，模板信息、控制器信息
c.添加模板文件
d.添加控制器文件（要在main文件中配置并且依赖注入）
e.没有的页面要跳转到首页
新添加模块的方法：
1.在路由表中添加一个模块的路由信息
//xq模块
.when('/xq',{
templateUrl:"js/views/wd/xq.html",
controller:"wdxqCtrl"
})
2.新建 模板文件
3.新建 控制器文件
4.在main文件中添加 控制器文件，并且依赖注入
注意： 一定要在服务器环境下运行
要及时刷新、清除缓存
二、使用require时, js执行顺序
1,加载require.js
2,加载data-main main.js
3,main.js ---> config.js
4,main.js ---> demo.js
5,执行回到函数
6,define(['a','b','c'],function(a,b,c){}); a b c是异步加载,无关顺序
（define 定义一个模块，require 加载一个模块）
三、具体步骤：
1.在index.html中引入 require插件
2.data-main 指向 入口文件 main.js
例如：
<script src="js/libs/require.js" data-main="js/main" ></script>
3.main.js中的内容
1）首先对 require 进行文件配置 路径配置
格式：require.config({}); 键值对格式书写
例如：
1 require.config({ //config 配置 RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。 2 baseUrl:"js/", //baseUrl 主路径 3 paths:{ //paths 设置短路径 包括插件，路由，主模块，自定义控制器，自定义指令，自定义服务，自定义过滤器等所有要依赖注入的js文件 4 "jquery":"libs/jquery203", //"ID"："文件夹/文件名"，按顺序引用， 5 "angular":"libs/angular.min", //angular和angular的插件的文件版本必须一致，否则会报错 6 "angular-route":"libs/angular-route.min" 7 }, 8 shim:{ //shim 定义非amd模块和定义依赖关系 9 "angular":{ 10 exports:"angular" //exports 让文件符合规范 11 }, 12 "angular-route":{ 13 deps:["angular"], //deps 定义依赖模块 14 exports:"angular-route" 15 } 16 } 17 });
2）require 调用模块
格式：require（[name , name2],callback）; //这里的name就是ID,require 和 define 的 name 必须保证一致！ 依赖注入顺序没有影响，但最好还是按顺序依赖注入
例如：
1 require(["jquery","angular","angular-route"]，function($,angular){ // 需要使用的模块以参数的形式进行调用（$,angular） 等价于 （$angular,$angular-route） $系统符 2 angular.bootstrap(document,["myApp"]); //bootstrap 初始化模块 myApp自定义的模块名 3 });
依赖注入的简单理解：就是在js内调用外部js文件
作用相当于：在html中调用外部文件<script src="js/angular.js"></script>
而在js中我们写成["angular"]
4.app.js中的内容
定义app模块
格式：define(name，[] , callback); 这个name可以省掉，默认是文件名称；define函数内部其实就是把这个name以及依赖模块、回调函数作为一个对象存储在全局的数组当中，
也就是 defQueue.push([name,deps,callback])；这个name就是这个组件注册的的ID！
例子：
define(["angular"],function(angular){ var app = angular.module("myApp",["angular插件ID"]); return app; //callback });
5.route.js中的内容
定义路由
格式：define(name,[],callback)
例子：
1 define(["app"],function(app){ //挂载在模块app下 2 return app.config(["$routeProvider",function($routeProvider){ 3 $routeProvider 4 .when("/",{ // /hash值 作用：锚点 输入127.0.0.1：8080/#/hash值 可以打开/hash 的页面 5 templateUrl:"js/views/web/web.html", 6 controller:"webCtrl" 7 }) 8 .when("/webdetails/:num",{ // ：num 用JsonP拿取数据的时候：num是后台数据的id 打开地址127.0.0.1:8080/#/hash值/id 9 templateUrl:"js/views/webDetails/webDetails.html", 10 controller:"webdetailsCtrl" 11 }) 12 //重定向页面 让页面初始和查找不到页面时候跳转到定向的页面 13 .otherwise({ 14 redirectTo:"/" 15 }) 16 }]); 17 });
扩展：跨域访问服务器数据
参数的传递：
1）html页面 传递页码 <a href="/#/webdetails/{{$index+1}}"></a>
2）路由页面修改路由信息 :num "/webdetails/:num"
3) 在控制器页面 使用 $routeParams 来进行接收
4）将json文件替换成后台接口数据的使用方式：
$http.jsonp("http://192.168.2.105/data/getWdData.php?id=" + $routeParams.num + "&callback=JSON_CALLBACK").
5）对于接口调用：首先要判断接口是否连通,直接输入http://192.168.2.105/data/getWdData.php?id= 进行测试
6.自定义控制器
格式：define(name,[],callback)
例子：
1 define(["app"],function(app){ 2 app.controller("myController",["$scope","$rootScope","$http",function($scope,$rootScope,$http){ //myController 自定义控制器名 3 $rootScope.headTitle = "营业网点"; 4 $rootScope.collect = true; //该页面是否显示收藏按钮 自定义变量 5 6 //get获取后台数据 7 $http.get("json/yywd.json").success(function(data){ //注意：一定要注意这里的文件地址是相对于主文件index.html的获取路径，写成对于控制器的路径会报错获取不到文件 8 $scope.branchs = data.branchs; //data后台回调的数据 9 }).error(function(data){ 10 console.log(data); 11 }) 12 13 //jsonp获取后台数据 14 $http.jsonp("http://192.168.2.105/data/getWdListData.php?callback=JSON_CALLBACK") //数据接口？回调数据处理 15 .success(function(data){ 16 $scope.branchs = data.branchs; 17 }) 18 .error(function(data){ 19 console.log(data) 20 }) 21 }]); 22 })
扩展：解析后台数据库中的html标签
$sce服务 用于解析从后台数据库文件中获取的html标签
7.自定义指令
格式：define(name,[],callback)
例子：
1 define(["app"],function(app){ 2 app.directive("backButton",["$window",function($window){ //backButton 自定义指令名 $window依赖注入的服务 3 return { //指令必须 return{} 4 restrict:"A", //A 指令的调用方式 ECMA分别代表元素，类，注释，属性，其中EA最常用 5 link:function(scope,elem,attr){ 6 elem.bind('click',function(){ 7 //回退 8 $window.history.back(); //$window服务功能的history.back()方法 9 }); 10 } 11 } 12 }]); 13 })
扩展：1）M调用方式的写法：<!-- directive:指令名 --> 注意:-和数字间要加个空格
2）驼峰写法指令调用：backButton调用时写成 back-button -b会把b转化成大写