AngularJS實際項目應用--ui-router

在項目開發過程中，我們都用ui路由來開發項目，因爲ui路由有三個重要的特性：多視圖、嵌套視圖、視圖命名。

具體ui-router的使用及功能請參考：http：//ui-router.github.io

首先看一下，項目中某個模塊的目錄結構：

看到每個模塊下都會有自己的路由配置文件，下面我們看怎麼從啓動app開始，配置動態加載路由的功能：

var app=angular.module("myApp",["ui.router","main"]);
app.config(["$stateProvider","$urlRouterProvider","$sceDelegateProvider",
    function($stateProvider,$urlRouterProvider，$sceDelegateProvider) {
        /*設置白名單(跨域訪問名單)*/
        $sceDelegateProvider.resourceUrlWhitelist([
                "self",
                "http://datainfo.duapp.com/**"
        ])
        /*默認訪問首頁*/
        $urlRouterProvider.otherwise("/main");
        $stateProvider
        .state({/*首頁*/
            name:"main",
            url:"/main",
            template:"<main-com></main-com>"
        }).state({
            name:"main.classify", //main頁面的下classify（用於展示商品分類的）
            url:"/classify",
            template:"<list-com></list-com>",
            params:{classID:null}
        })
    }])

使用ui路由時需要在模塊中，注入ui.router到AngularJS主模塊中。然後將main模板也注入到主模板中。

template:"<main-com></main-com>" 是要打開的模板組件名字

我們就詳細的看下主頁面main的詳細代碼：

JS代碼：

var main = angular.module("main", []);
main.component("mainCom",{
    templateUrl:"component/main/main.html",
    controller:["$scope","$http",
    function($scope,$http){
    $scope.classify=[]; //定義一個空數據，可以省略
        $http({
            method:"GET",
            url:"請求的地址"
        }).then(
            function success(resp){
                console.log(resp)
                $scope.classify=resp.data;
            },function error(resp){
                console.log("請求失敗")
            }
        )
    }]
})

HTML代碼：

<ul>
    <li ng-repeat="c in classify">
        <a ui-sref=".classify({classID:c.classID})">
            <span ng-bind="c.className"></span>
        </a>
    </li>
</ul>

<div ui-view></div>

ui-sref：用於代替按標籤的href屬性

goodeslist頁面（用於獲取商品列表）我的詳細代碼：

JS代碼：

var goodeslist=angular.module("goodeslist",[]);
goodeslist.component("listCom",{
    templateUrl:"example/goodes/goodeslist.html",
    controller:["$scope","$http","$stateParams",
    function($scope,$http,$stateParams){
    //$stateParams用來傳遞參數
        $scope.goodes=[];//定義一個空數據，可以省略
        $http({
            method:"JSONP",
            url:"請求的商品列表路徑",
            //$stateParams.classID 將calssID作爲參數傳遞過來
                classID:$stateParams.classID 
            }
        }).then(
            function success(resp){
                console.log("請求成功", resp);
                $scope.goodes=resp.data;
            },function error(resp){
                alert("系統繁忙請稍後再試")
            }
        )
    }]
})

這裏獲取到的爲jsonp對象，需要通過跨域也就是通過設置白名單的方式來訪問。

$stateParams  是ui路由中用來傳遞參數的

HTML代碼：

<div ng-repeat="g in goodes">
    <div>
      <img ng-src={{g.goodsListImg}}>  //輸出圖片
      <div>
        <p ng-bind="g.goodsName></p> //輸出商品名字
        <p ng-bind="g.price></p> //輸出價格
        <p>
            <a href="#">立即購買</a>
            <a href="#">加入購物車</a>
        </p>
      </div>
   </div>
 </div>

這樣就可以在頁面展示商品信息了。