angularJS中的ui-router和ng-grid模塊

時間 2019-12-14

標籤 angularjs router grid 模塊欄目 AngularJS 简体版

原文原文鏈接

關於angular的教程，學習了一下angular的ui-router和ng-grid這兩個模塊，順便模仿着作了一個小小的東西。php

代碼已經上傳到github上，地址在這裏https://github.com/Songyj-225/angular。html

有興趣的小夥伴能夠看看，目前還不會php只有前端的部分，那麼而後這裏咱們就先來了解一下這兩個模塊的用法前端

咱們先來講說ui-router這個模塊，這個模塊主要是用來實現深層次的路由的。其實angular有個內置的指令ng-route，若是在項目中沒有嵌套問題的話，那麼用這個指令來實現頁面之間的跳轉也仍是蠻方便的，可是他的短板就在於，他拿深層次的嵌套路由沒有任何辦法。那麼首先，咱們要使用這個模塊咱們就須要把他給下載下來。git

UI-Router被認爲是AngularUI爲開發者提供的最實用的一個模塊，它是一個讓開發者可以根據URL狀態或者說是'機器狀態'來組織和控制界面UI的渲染，而不是僅僅只改變路由（傳統AngularJS應用實用的方式）。該模塊爲開發者提供了不少最視圖（view）額外的控制。開發者能夠建立嵌套分層的視圖、在同一個頁面使用多個視圖、讓多個視圖控制某個視圖等更多的功能。即便是很是複雜的web應用，UI-Router也能夠極佳地駕馭github

下載地址在這裏http://www.bootcdn.cn/angular-ui-router/。web

下載下來以後，咱們就能夠把它導入進咱們的項目中了，這裏要注意下，由於這個模塊式基於angular的，因此在這以前，咱們還須要導入angular的js文件。這個能夠在angular的官網去下載。json

那麼在上面的準備工做都作完了以後，咱們就能夠來動手寫咱們的代碼了。bootstrap

index.htmlapp

<body>
    <div ui-view ></div>
</body>

　　這裏有一點要注意下，div裏面添加的屬性是ui-viewide

app.js

var app = angular.module('routerApp',['ui.router','ngGrid', 'BookListModule', 'BookDetailModule','Bookadd']);
/**
 * 因爲整個應用都會和路由打交道，因此這裏把$state和$stateParams這兩個對象放到$rootScope上，
 * 方便其它地方引用和注入。
 * 這裏的run方法只會在angular啓動的時候運行一次。
 *  $rootScope
 *  $state
 *  $stateParams
 **/
app.run(function($rootScope,$state,$stateParams){
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});
/**
* 配置路由.config
* 這裏採用的是ui-router這個路由，而不是原生的ng-router路由
* ng原生的路由不能支持嵌套視圖，因此這裏必須使用ui-router;
* $stateProvider
* $urlRouterProvider
**/
app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise('/index');//沒有任何值得狀況下去到index
    $stateProvider.state('index',{//登錄頁面
        url:'/index',
        templateUrl:'tpls/loginForm.html'
    }).state('booklist',{//後臺界面
        url: '/{bookType:[0-9]{1,4}}',
        views: { //注意這裏的寫法，當一個頁面上帶有多個ui-view的時候如何進行命名和視圖模板的加載動做
            '': {
                templateUrl: 'tpls/bookList.html'
            },
            'bookgrid@booklist': {
                templateUrl: 'tpls/bookGrid.html'
            }
            
        }
    }).state('addbook', {
            url: '/addbook',
            views: { //注意這裏的寫法，當一個頁面上帶有多個ui-view的時候如何進行命名和視圖模板的加載動做
                '': {
                    templateUrl: 'tpls/bookList.html'
                },
                'addbook@addbook':{
                    templateUrl: 'tpls/addBookForm.html'
                }
            }
            
        })
    .state('bookdetail', {
            url: '/bookdetail/:bookId',//注意這裏在路由中傳參數的方式
            views: { //注意這裏的寫法，當一個頁面上帶有多個ui-view的時候如何進行命名和視圖模板的加載動做
                '': {
                    templateUrl: 'tpls/bookList.html'
                },
                'seebook@bookdetail':{ 
                    templateUrl: 'tpls/bookDetail.html'
                }
            }
        }) 
})

一、是在進行嵌套的時候，我這裏最外層是booklist部分，而後裏面嵌套了seebook和addbook和bookgird部分，咱們須要注意下這裏的寫法。

二、當咱們須要根據選擇不一樣打開不一樣的內容時，也就是須要向下一個頁面傳參數，我這裏是細節部分，咱們也須要多注意下這裏的寫法。

三、在咱們利用angular.module建立一個app應用的時候，咱們須要在裏面導入ui.router模塊，另外咱們本身建立的一些模塊也須要在這裏導入進去。

四、咱們這裏使用$stateProvider來配置路由了，而不是$routeProvider了，還有就是這裏使用的state而不是when。

這裏吧路由配置好了以後，剩下的就是寫tpls中各個部分的代碼了，這裏就不作過多的介紹，這裏最重要的就是路由的配置。

好了下面咱們再來看看ng-grid的用法，這裏是下載地址http://www.bootcdn.cn/ng-grid/。

booklist.html

    <!-- 導航 -->
    <nav class="navbar navbar-inverse lan navbar-static-top" role="navigation">
     <div class="navbar navbar-inverse lan navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
            data-target="#leftnav"  >
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">圖書管理系統</a>
        </div>
        <ul class="nav navbar-nav navbar-right maright">
            <li><a><span class="badge colorred">5</span></a></li>
            <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;退出</a></li>
        </ul>
        <!-- 左側欄 -->
        <div class="navbar-collapse" id="leftnav" ng-controller="booklist">
            <ul class="nav">
                <li>
                    <a data-target="#list" class="coloractive"  data-toggle="collapse" aria-expanded="true">
                        <span class="glyphicon glyphicon-book"></span>&nbsp;書籍類型
                        <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                    </a>
                    <ul id="list" class="nav collapse listbg in" aria-expanded="true">
                        <li ng-repeat="book in booklist" ui-sref = "booklist({bookType:{{book.id}}})">
                        
                            <a > <span class="glyphicon {{book.img}}"></span>&nbsp;{{book.name}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        </div>
    </nav>
    <!-- 右側 -->
    <div class="page_mian">
        <div class="container">
            <div class="row ">
                <div ui-view="bookgrid"  class="col-xs-12">
                    <!--書籍列表加載中...-->
                </div>
                <div ui-view="addbook"  class="col-xs-12">
                    <!--添加書籍-->
                </div>
                <div ui-view="seebook"  class="col-xs-12">
                    <!--查看書籍-->
                </div>
            </div>
        </div>
    </div>

主要是右側部分，操做顯示都在右側替換

controller.js

/***
 * 這裏是登錄模塊
 * ***/
app.controller('validateCtrl',function($scope){
    $scope.user={
        email:'',
        password:''
    };
    $scope.arrs={
        email:'song@126.com',
        password:'123456'
    };
    $scope.compare = function(user){
        $scope.user= user;
        $scope.same = angular.equals($scope.user.email,$scope.arrs.email)//對比
        $scope.same1 = angular.equals($scope.user.password,$scope.arrs.password)//對比
        console.log($scope.same);
        console.log($scope.same1);
        console.log($scope.user.email);
        if($scope.same == false){
            $scope.user.email='用戶名不正確';
            console.log(user.email);
        };
        if($scope.same1 == false){
            $scope.user.password='';
            console.log(user.password);
        }
    }
});
/**
*後臺界面
**/
app.controller('booklist',function($scope,$http){
    $scope.booklist ={};
    $http.get('data/bookslist.json')
        .success(function (item){
            $scope.booklist = item;
            console.log($scope.booklist)
        });
});
/**
 * 這裏是書籍列表模塊
 **/
var bookListModule = angular.module("BookListModule", []);
bookListModule.controller('BookListCtrl', function($scope, $http, $state, $stateParams) {
    //如下是分頁內容
    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    };
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [5, 10, 20],
        pageSize: 5,
        currentPage: 1
    };
    $scope.setPagingData = function(data, page, pageSize) {
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.books = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };

    //這裏能夠根據路由上傳遞過來的bookType參數加載不一樣的數據
    console.log($stateParams);
    $scope.getPagedDataAsync = function(pageSize, page, searchText) {
        setTimeout(function() {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('../src/data/books' + $stateParams.bookType + '.json')//經過傳值調用不一樣json
                    .success(function(largeLoad) {
                        data = largeLoad.filter(function(item) {
                            return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                        });
                        $scope.setPagingData(data, page, pageSize);
                    });
            } else {
                $http.get('../src/data/books' + $stateParams.bookType + '.json')
                    .success(function(largeLoad) {
                        $scope.setPagingData(largeLoad, page, pageSize);
                    });
            }
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function(newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function(newVal, oldVal) {
        if (newVal !== oldVal) {
            $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);

    $scope.gridOptions = {
        data: 'books',//表格中顯示的數據來源
        rowTemplate: '<div style="height: 100%"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
            '<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
            '<div ng-cell></div>' +
            '</div></div>',
        multiSelect: false,//是否能多選
        enableCellSelection: true, //是否能選擇單元格
        enableRowSelection: false,//是否能選擇行
        enableCellEdit: true,//是否能修改內容
        enablePinning: true,  //是否被鎖住了
        columnDefs: [{
            field: 'index',//這裏是數據中的屬性名
            displayName: '序號', //這裏是表格的每一列的名稱
            width: 60,//表格的寬度
            pinnable: false,
            sortable: true//是否能排序
        }, {
            field: 'name',
            displayName: '書名',
            enableCellEdit: true
        }, {
            field: 'author',
            displayName: '做者',
            enableCellEdit: true,
            width: 220,
            pinnable: true,
            sortable: true
        }, {
            field: 'pubTime',
            displayName: '出版日期',
            enableCellEdit: true,
            width: 120
        }, {
            field: 'price',
            displayName: '訂價',
            enableCellEdit: true,
            width: 120,
            cellFilter: 'currency:"￥"'
        }, {
            field: 'bookId',
            displayName: '操做',
            enableCellEdit: false,
            sortable: false,
            pinnable: false,
            cellTemplate: '<div><a ui-sref="bookdetail({bookId:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">詳情</a></div>'
        }],
        enablePaging: true,//是否能翻頁
        showFooter: true,//是否顯示錶尾
        totalServerItems: 'totalServerItems',//數據的總條數 
        pagingOptions: $scope.pagingOptions,//分頁部分
        filterOptions: $scope.filterOptions,//數據過濾部分
    };
});


/**
 * 這裏是書籍詳情模塊
 * @type {[type]}
 */
var bookDetailModule = angular.module("BookDetailModule", []);
bookDetailModule.controller('BookDetailCtrl', function($scope, $http, $state, $stateParams) {
    console.log($stateParams);
});
var bookadd = angular.module('Bookadd',['ngAnimate', 'ngSanitize','ui.bootstrap']);
bookadd.controller('Bookaddctrl',function($scope,$http,$state, $stateParams){
    function abf(){
        $scope.userInfo={};//空
        $scope.userInfo.dt = new Date();//日曆
        $scope.popup2 = {
            opened: false
        };
        $scope.open2 = function() {
            $scope.popup2.opened = true;
        };    
        $scope.sites=[ //下拉列表
            {id:0,site:'計算機'},
            {id:1,site:'金融'},
            {id:2,site:'哲學'},
            {id:3,site:'歷史'}
        ];
         $scope.userInfo.zw = '1';//默認選中一個 
    };
    abf();//執行
    $scope.geto =function(user){        
        $scope.userInfo = user
        console.log($scope.userInfo.dt.toISOString().slice(0,10))//日期格式化
        $http({
            url:'data/books5.json',
            method:'POST',
            data:$scope.userInfo,
            data:JSON.stringify($scope.userInfo)
        }).success(function(da){
            console.log(da);
            // console.log($stateParams);
             window.history.back();
        });
    };
    $scope.setFormData = function(){//清空
        abf();
    }
   
})