angular路由(自帶路由篇)
阿新 • • 發佈:2017-06-29
一級路由 ext 容器 ams meta func 由於 ima .config
一、angular路由是什麽?
為了實現SPA多視圖的切換的效果,其原理可簡述為每個 URL 都有對應的視圖和控制器。所以當我們給url後面拼上不同的參數就能通過路由實現不同視圖的切換。
二、文件總覽
1.新建文件
一級目錄新建ngRoute.html(為主頁面,裏面進行路由配置)
一級目錄新建view文件夾,裏面再新建三個子頁面aboutus.html,home.html,order.html
一級目錄存放angular.js和angular-route.js文件,文件存放位置依自己喜好即可
2.ngRoute.html代碼展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular.min.js"></script> <script src="angular-route.js"></script> </head> <body ng-app=‘myApp‘> <a href="#/home">HOME</a> <a href="#/aboutus">AHOUTUS</a> <a href="#/order">ORDER</a> <!--ng-view相當於之前的div#container,用來展示子視圖--> <ng-view></ng-view> <!--ng-view和下面的代碼等價--> <!--<div id="container" ng-view></div>--> </body> <script> var app=angular.module("myApp",[‘ngRoute‘]); //配置路由 app.config(function($routeProvider){ //如果是home 讓ng-view裏面的視圖是home.html $routeProvider .when(‘/home‘,{ templateUrl:‘view/home.html‘, controller:‘homeVC‘ }) .when(‘/aboutus‘,{ templateUrl:‘view/aboutus.html‘, controller:‘aboutusVC‘ }) .when(‘/order‘,{ templateUrl:‘view/order.html‘, controller:‘orderVC‘ }) .otherwise({ redirectTo:‘/home‘ //重定向到home頁面 }) }); //配置Controller app.controller(‘homeVC‘,function($scope,$routeParams){ console.log($routeParams); $scope.title=‘我是homeVC‘ }); app.controller(‘aboutusVC‘,function($scope){ $scope.title=‘我是aboutusVC‘ }); app.controller(‘orderVC‘,function($scope){ $scope.title=‘我是orderVC‘ }); </script> </html>
頁面定義了三個路由,並默認重定向到了home頁面,三個頁面分別配置控制器controller,裏面都定義了變量title的值。結構層的a標簽通過#/參數的形式給url添加參數,然後根據定義的路由找到相應的參數,將相應的子頁面放入ng-view容器中。
3.子頁面代碼展示
<h1>{{title}}</h1>
為了簡化操作,三個子頁面都只存放了一條相同的代碼。title變量因為控制器賦值不同而展示不同的信息。
三、效果展示
打開頁面,默認展示home子頁面信息,如下:
點擊AHOUTUS,子頁面進行切換,如下:
點擊ORDER,如下:
這樣就實現了angular一級路由的切換效果,用來實現移動端導航還是很使用的,但若是需要二級路由,三級路由,這時我們就需要用到第三方路由,由於是采用的第三方插件,所以寫法和用法有些差異,angular路由(第三方路由篇)做詳細介紹。
angular路由(自帶路由篇)