angular的require模塊開發部分步驟內容

angular利用require.js和nodejs的一個模塊式開發部分步驟小結：

 

第一部分：Node.js的下載，npm的安裝，http服務的使用

一、下載並安裝 node.js

二、工做目錄下寫一個package.json
文件內容：
「scripts」: {
「start」: 「http-server -a 0.0.0.0 -p 8000」,
}
-p 端口號 (默認 8080)

-a IP 地址 (默認 0.0.0.0)

三、開始菜單搜索的地方，輸入 cmd

四、訪問上一級目錄 cd..

五、一級一級進入package.json所在文件夾 cd 文件名
例如： d: 進入d盤
cd www 進入d盤中的www文件夾

一次性進入package.json所在文件夾
例如： d: 進入d盤
cd 用戶目錄\個人文檔\HBuilderProject\Angularjs

六、配置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.

七、開啓http服務 http-server
注意：須要進入你要打開的文件夾內（在站點目錄下） 在打開cmd輸入http-server 不然打開127.0.0.1:8080 會進入 Index of / 的界面中，得一級級查找文件地址

八、訪問: 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: *\nDisallow: /')

 

第二部分：require的配置和使用

1、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文件中添加 控制器文件，而且依賴注入
注意： 必定要在服務器環境下運行
要及時刷新、清除緩存

2、使用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 加載一個模塊）

3、具體步驟：
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轉化成大寫