AngularJS路由系列(1)--基本路由配置

時間  2019-11-08
標籤 angularjs 路由 系列 基本 配置 欄目 AngularJS 简体版
原文   原文鏈接

 

本系列探尋AngularJS的路由機制，在WebStorm下開發。主要包括：css

 

● 路由的Big Picturehtml

● $routeProvider配置路由node

● 使用template屬性jquery

● 使用templateUrl屬性angularjs

● redirectTo屬性，接受字符串ajax

● redirectTo屬性，接受函數npm

● 使用caseInsensitiveMatch屬性，禁止大小寫敏感json

● 使用otherwise屬性bootstrap

 

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

api

 

項目文件結構

 

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

安裝Web Server

 

node server.js
Listening on port:3000

 

訪問路徑：localhost:3000/#/

 

獲取ngRoute模塊

 

bower install angular-route#1.4.0
或
npm install angular-route@1.4.0
或
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js
或
https://code/angularjs.org/1.4.0/angular-route.js

 

如何使用呢？

 

在項目中引用angular-route.js,設置對ngRoute這個module的依賴(var app = angular.module('app',['ngRoute']))，在視圖中添加ng-view這個directive(<div ng-view></div>)。

 

Big Picture

 

在瞭解路由以前，有必要知道路由在整個AnuglarJS中所扮演的角色，以下：

 

 

 

$routeProvider配置路由

 

 

大體按以下配置：

 

(function(){
    var app = angular.module('app',['ngRoute']);
    app.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/',{
                controller: 'HomeController',
                contrllerAs: 'home',
                templateUrl: 'app/templates/home.html'
            });
    }])
}());

 

■ index.html

 

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

<!--Angular-->
angular.min.js
angular-route.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="#/classrooms">Classrooms</a>
    <a href="#/activities">Activities</a>
    
    <div ng-view></div>
</body>

 

app.js，第一次添加路由，使用template屬性

 

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                template: '<h1>This is an inline template</h1>'
            });
    }]);
}());

 

 

app.js,使用templateUrl屬性

 

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            });
    }]);
}());

 

■ home.html

{{home.message}}
{{home.schoolCount}}
{{home.activityCount}}

 

 

 

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

 

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html'
            })
            .when('/classrooms',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            });
    }]);
}());

 

點擊導航欄上的Schools

 

點擊導航欄上的Classrooms

 

點擊導航欄上的Activities

 

app.js, 添加redirectTo屬性,接受字符串

 

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html'
            })
            .when('/classrooms',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html',
                redirectTo: '/schools'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            });
    }]);
}());

 

點擊Classrooms導航到Schools下

 

app.js, 添加redirectTo,接受函數

 

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html'
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html',
                redirectTo: function(params, currPath, currSearch){
                    console.log(params);
                    console.log(currPath);
                    console.log(currSearch);
                    return '/';
                }
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            });
    }]);
}());

 

在瀏覽器輸入：localhost:3000/#/classrooms/1?foo=bar

 

可見，路由參數1被放在了params中，是一個object對象；/classrooms/1被放在了currPath中；foo=bar查詢字符串被放在了currSearch中了，是一個object對象。

 

app.js, 禁止大小寫敏感，使用caseInsensitiveMatch屬性

 

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html',
                caseInsensitiveMatch: true
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            });
    }]);
}());

 

localhost:3000/#/schools和localhost:3000/#/SCHOOLS能獲得相同的結果。

 

app.js, 當用戶輸入的uri無效導航到默認頁,使用otherwise屬性

 

(function(){
    var app = angular.module('app', ['ngRoute']);
    
    app.config(['$logProvider','$routeProvider', function($logProvider,$routeProvider){
        $logProvider.debugEnabled(true);
        
        $routeProvider
            .when('/',{
                controller: 'HomeController' ,
                controllerAs: 'home',
                templateUrl: '/app/templates/home.html'
            })
            .when('/schools',{
                controller: 'AllSchoolsController',
                controllerAs: 'schools',
                templateUrl: '/app/templates/allSchools.html',
                caseInsensitiveMatch: true
            })
            .when('/classrooms/:id',{
                controller: 'AllClassroomsController',
                controllerAs: 'classrooms',
                templateUrl: '/app/templates/allClassrooms.html'
            })
            .when('/activities',{
                controller: 'AllActivitiesController',
                controllerAs: 'activities',
                templateUrl: '/app/templates/allActivities.html'
            })
            .otherwise('/');
    }]);
}());

 

未完待續~~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程