angular的require模块开发部分步骤内容

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调用方式的写法： 注意:-和数字间要加个空格
2）驼峰写法指令调用：backButton调用时写成 back-button -b会把b转化成大写