AngularJS路由系列(3)-- UI-Router初體驗

時間 2019-11-11

標籤 angularjs 路由系列 router 體驗欄目 AngularJS 简体版

原文原文鏈接

本系列探尋AngularJS的路由機制，在WebStorm下開發。css

AngularJS路由系列包括：

一、AngularJS路由系列(1)--基本路由配置
二、AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，獲取路由參數，路由的Resolve
三、AngularJS路由系列(3)-- UI-Router初體驗
四、AngularJS路由系列(4)-- UI-Router的$state服務、路由事件、獲取路由參數
五、AngularJS路由系列(5)-- UI-Router的路由約束、Resolve屬性、路由附加數據、路由進入退出事件
六、AngularJS路由系列(6)-- UI-Router的嵌套State

html

項目文件結構

node_modules/
public/
.....app/
..........bower_components/
...............toastr/
....................toastr.min.css
....................toastr.min.js
...............jquery/
....................dist/
.........................jquery.min.js
...............angular/
....................angular.min.js
...............angular-ui-router/
....................release/
.........................angular-ui-router.min.js
...............angular-route/
.........................angular-route.min.js
..........controllers/
...............HomeController.js
...............AllSchoolsController.js
...............AllClassroomsController.js
...............AllActivityiesController.js
...............ClassroomController.js
...............ClassroomSummaryController.js
...............ClassroomMessageController.js
..........css/
...............bootstrap.cerulean.min.css
..........filters/
...............activityMonthFilter.js
..........services/
...............dataServices.js
...............notifier.js
..........templates/
...............home.html
...............allSchools.html
...............allClassrooms.html
...............allActivities.html
...............classroom.html
...............classroomDetail.html
...............classroom_parent.html
..........app.js
.....index.html
.....favicon.ico
server/
.....data/
.....routes/
.....views/
.....helpers.js
package.json
server.js

node

關於UI-Router

相比ngRoute, UI-Router不只包含ngRoute的所有功能，還包括其它更多的功能，提供了一種state-based的路由機制。

UI-Router中的state指什麼？
AngularJS應用程序中的places。

如何獲取UI-Router？

bower intall angular-ui-router#0.2.15
或
npm install angular-ui-router@0.2.15
或
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js
或
http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js

如何使用獲取UI-Router？

→ 添加angular-ui-router.js的引用
→ 添加對ui.router模塊的依賴
→ 在視圖中使用ui-view

如何配置UI-Router?jquery

(function(){
    var app = angular.module('app',['ui.router']);
    app.config(['$stateProvider', function($stateProvider){
        $stateProvider
            .state('home',{
                url:'/',
                controller: 'HomeController',
                controllerAs: 'home',
                templateUrl: 'app/templates/home.html'
            })
    }]);
}());

■ 激活一個State

● $state.go('classrooms');
● <a ui-sref="classrooms">Classrooms</a>
● <a href="/classrooms">Classrooms</a>git

使用UI-Router初體驗

■ index.html，從新設計，使用UI-Routergithub

bootstrap.cerulean.min.css
toastr.min.css

<!--Angular-->
angular.min.js
angular-ui-router.min.js

<!--Application-->
app.js

<!--Services-->
dataServices.js
notifier.js

<!--Filters-->
activityMonthFilter.js

<!--Controls-->
HomeController.js
AllSchoolsController.js
AllClassroomsController.js
AllActivityiesController.js
ClassroomController.js
ClassroomSummaryController.js
ClassroomMessageController.js


<body ng-app="app">
    <a href="#/">School Buddy</a>
    <a href="#/schools">Schools</a>
    <a href="#/activities">Activities</a>
    
    <div ui-view></div>
</body>

■ app.js, 從新設計，使用UI-Routerajax

(function(){
    var app = angular.module('app',['ui.router']);
    
    app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){
        $logProvider.debugEnabled(true);
        
        $stateProvider
            .state('home',{
                url: '/',
                template: '<h1>This is an inline template</h1>'
            });
    }]);
}());

UI-Router的templateUrl屬性

■ app.js, 使用templateUrl屬性npm

(function(){
    var app = angular.module('app',['ui.router']);
    
    app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){
        $logProvider.debugEnabled(true);
        
        $stateProvider
            .state('home',{
                url: '/',
                templateUrl: '/app/templates/home.html',
                controller: 'HomeController', //也能夠寫成HomeController as home
                controllerAs: 'home'
            });
    }]);
}());

■ app.js, 添加更多的路由json

(function(){
    var app = angular.module('app',['ui.router']);
    
    app.config(['$logProvider', '$stateProvider', function($logProvider, $stateProvider){
        $logProvider.debugEnabled(true);
        
        $stateProvider
            .state('home',{
                url: '/',
                templateUrl: '/app/templates/home.html',
                controller: 'HomeController', //也能夠寫成HomeController as home
                controllerAs: 'home'
            })
            .state('schools',{
                url: '/schools',
                controller: 'AllSchoolController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.thml'
            })
            .state('classrooms',{
                url:'/classrooms',
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/tempates/allClassrooms.html'
            })
            .state('activities', {
                url: '/activities',
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            })
    }]);
}());