【angularjs學習筆記】利用angularjs和requirejs構模組化塊化單頁面應用

概要描述（個人部落格http://www.leasonlove.cn/）

• angularJS描述:

  angularJS是可以用來建構WEB應用的，WEB應用中的一種端對端的完整解決方案。通過開發者呈現一個更高層次的抽象來簡化應用的開發。最适合的就是用它來建構一個CRUD應用，它提供了非常友善的且統一高效的解決方案，其資料綁定、基本模版辨別符、表單驗證、路由、深度連結、元件重用、依賴注入、以及HTML标記等，最受歡迎的莫過于它的雙向資料綁定。

• requireJS描述:

  requireJS是來解決傳統的頁面加載script标記操作，通過其初始化配置實作按需、并行、延時的載入js庫，聲明不同js檔案之間的依賴關系，它是遵循前端AMD規範(異步子產品加載)。js代碼可以以子產品化的方式進行組織(子產品化程式設計)。子產品化的意義就是通過代碼邏輯表明子產品之間的依賴關系和執行順序，按照子產品邏輯來分解代碼，起到配合mvc架構架構項目的作用。

• 整合：

  使用requireJS子產品化定義子產品質檢的依賴關系，打包不需要檔案挨個對照，很友善。将script腳本從模版頁面中抽離出來，通過js目前子產品加載需要依賴的js子產品。按需加載。路由更加友善。

實踐—–目錄結構

這裡檔案目錄可以根據項目需求自由調整

實踐—–index.html

和正常的html寫法一樣，這裡要注意引入js時隻要引用main和require.js，由require.js去動态加載所需要的js

<div class="main">
    <div class="header">
        <div class="right-bar">
            <span class="welcome">目前使用者：<b>...</b> <button class="btn btn-info btn-xs"><i class="fa fa-sign-out"></i> 登出</button></span>
        </div>
    </div>
    <div class="mainContent  has-shadow">
        <div ng-view></div>
    </div>
</div>
<script data-main="js/main" src="js/libs/require.js"></script>//隻要引用main和require.js
           

實踐—–入口檔案main.js

執行個體化require.js并配置各種js的路徑以及依賴關系，初始化整個項目

/**
 * 入口檔案
 */
require.config({
    baseUrl: "js/",
    paths: {
      "jquery": "libs/jquery203",
      "angular" : "libs/angular.min",
      "angular-route" : "libs/angular-route.min",
      "angular-sanitize" : "libs/angular-sanitize.min",


      "app" : "controllers/app",
      "loadingInterceptor" : "controllers/loadingInterceptor",
      "run_stateCtrl" : "controllers/run_stateCtrl",

      "route" : "routes/appRoute"
    },
    shim: {
       'angular': {
          exports: 'angular'
       },
       'angular-route':{
          deps: ["angular"],
          exports: 'angular-route'
       },
       'angular-sanitize':{
          deps: ["angular"],
          exports: 'angular-sanitize'
       }
    }
});
require(['jquery','angular','angular-route','angular-sanitize','app','loadingInterceptor','route','run_stateCtrl'],function ($,angular){

      $(function () {

            angular.bootstrap(document,["myApp"]);//初始化整app

      })

});
           

實踐—–建立angular.module 即app.js

建立angular.module，所有的操作都是在angular.module的基礎上進行的

/**
 * 建立angular.module
 */
define(['angular'], function (angular) {
    var app = angular.module('myApp', ['ngRoute','ngSanitize','ajaxLoading']);//引入需要以來的子產品
    return app;
});
           

實踐—–建立路由

不同的子產品被加載進主視圖，并綁定控制器

/**
 * 路由
 */
define(['app'], function(app){
   return app.config(['$routeProvider',function($routeProvider) {
            $routeProvider
              .when('/', {
                templateUrl: 'js/views/run_state.html',
                controller: 'run_stateCtrl'
              })
              .when('/xq', {
                templateUrl: 'js/views/xq.html',
                controller: 'xqCtrl'
              })
              .otherwise({ redirectTo: '/' });
   }])
});
           

實踐—–子產品控制器

被路由綁定的子產品控制器，控制着目前子產品的業務流程

define(['app'], function(app){      
   return app.controller('run_stateCtrl', ['$scope','$rootScope','$http', function ($scope,$rootScope,$http) {

            $rootScope.headTitle = $rootScope.title = "hello,angular!";
            $rootScope.appName = $rootScope.span = "angular側導航";
            $scope.getMore = function(){
              angular.element('.state').text('正在運作')
            };
            $http.get('./json/215145.json').
              success(function(data) {
                $scope.branchs = data.branchs;             
              });
        }])
});
           

總結

整體的子產品搭建完之後，具體的業務流程，根據angularjs的API來具體實作功能。