Anguler route(路由)初始

1、路由： angular:vue react angular都是單頁面應用程序， 利用a標籤的錨點 功能，頁面之前跳轉都是通過路由實現

2、路由的實現：

        ①angular使用路由 需要引入js文件  
        ②注入依賴 var app=angular.module('app',['ngRoute']) ; 路由注入到主模型上
        ③使用路由 app.config() 裏面注入服務  實現路由
        ④配置項 路由提供的服務  $routeProvider
            app.config(['$routeProvider',function($routeProvider){
                $routeProvider.when()
            }])
            （1）$routeProvider服務 提供兩個方法
                  .when() ;//配置路由的名稱
                  .otherwise();//重定向 頁面路由不對的不對 重新定向

            （2） when('/名稱',{//名稱：使用英文  /home
                   template:'展示內容',
                   templateUrl:'展示內容',//路徑
                   controller:['$scope',function($scope){

                      }]
                   })  
           （3） otherwise({ //重定向  304 302 303
                       redirectTo:'/home'
                  })
      ⑤路由展示
            <div ng-view></div>
      ⑥.路由導航
             <a href="#!/home">第一頁</a>

eg：

    <ul>
         <li><a href="#!/home">首頁</a></li>//#!/home阻止頁面刷新，不刷新就能切換頁面
         <li><a href="#!/news">新聞</a></li>
         <li><a href="#!/dong">動態</a></li>
    </ul>
     <!-- 顯示內容   -->
    <div ng-view></div>

            var app=angular.module('app',['ngRoute']);
            app.controller('main',['$scope','$location',function($scope,$location){
                $location.path('/home')
            }])
            //路由
            app.config(['$routeProvider',function($routeProvider){
                $routeProvider
                .when('/home',{
                    // template:'<h2>首頁數據{{msg}}</h2>',
                    // controller:['$scope',function($scope){
                    //     $scope.msg='哈哈哈123'
                    // }]
                    templateUrl:'view/home.html',
                    controller:['$scope',function($scope){
                        $scope.man='底下是一個數組',
                        $scope.arr=[1,2,3,4,3,2]
   
                    }]
                })
                .when('/news',{
                    template:'<h2>新聞</h2>',
                })
                .when('/dong',{
                    template:'<h2>動態</h2>'
                })
                .otherwise({
                    redirectTo:'/home'
                })
            }])

③home.html頁面

<div>
    <h3>首頁的內容</h3>
    <p>第一段：{{man}}</p>
    <ul>
        <li ng-repeat='inte in arr track by $index'>{{inte}}</li>
    </ul>
    <ul>
        <li ng-repeat=''></li>
    </ul>
</div>