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路由（自帶路由篇）