angular中路由和路由参数

路由

  • 根据url中不同的锚点值，在页面显示不同的内容！

路由使用

    // 1.创建模块
    var app = angular.module('myApp', ['ngRoute'])

    // 2.配置路由规则(约定什么样的锚点值，对应什么样的内容)
    // 第一个参数与controller第二个参数类似
    app.config(['$routeProvider',function($routeProvider){
      
      // 第一个参数：对应的url中锚点值
      // 当angular检测到url中锚点变为/ali里，
    //就会把template对应的内容插入到页面拥有ng-view指令的标签中
      $routeProvider.when('/ali',{
        template:'<div>阿里在二楼!</div>',

        // 指定一个控制器的名字,
        // 当前url中锚点值为/ali时就会执行控制器中的回调函数
        // 我们可以直接在template/templateUrl对应的模板中使用该
     //控制器中对应的$scope属性值
        controller:'demoController'
        //templateUrl
      })
      .when('/baidu',{
        template:'<div>百度在1楼</div>'
      })
    }])

路由完整代码

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
    <title>route</title>
  </head>
  <body ng-app="myApp">

    <div ng-view>

    </div>

    <script src="libs/angular.js"></script>
 <script src="libs/angular-route.js"></script>
  <script>
// 1.创建模块
var app = angular.module('myApp', ['ngRoute'])

// 2.配置路由规则(约定什么样的锚点值，对应什么样的内容)
// 第一个参数与controller第二个参数类似
app.config(['$routeProvider',function($routeProvider){
  
  // 第一个参数：对应的url中锚点值
  // 当angular检测到url中锚点变为/ali里，就会把template对应的
//内容插入到页面拥有ng-view指令的标签中
  $routeProvider.when('/ali',{
    template:'<div>{{msg}}</div>',
    // 指定一个控制器的名字,
    // 当前url中锚点值为/ali时就会执行控制器中的回调函数
    // 我们可以直接在template/templateUrl对应的模板中使用
   //该控制器中对应的$scope属性值
    controller:'demoController'
    //templateUrl
  })
  .when('/baidu',{
    template:'<div>百度在1楼</div>',
    // controller:''
  })
}])

app.controller('demoController',['$scope',function($scope){
  $scope.msg = "我是中国人，我爱自己的祖国!"
}])
  </script>
</body>
</html>

路由参数

  • 在原有规则中可以加冒号:,
  • 表示:号后的内容是可以变的(但是必须要有)
    • 如果加上问号，就能够匹配到了
  • 在控制器中可以通过$routeParams得到myname对应的值
    $routeProvider.when('/company/:myname？')


    // <body ng-app="myApp"> 
       <div ng-view>
    
          </div>
        
          <script src="libs/angular.js"></script>
          <script src="libs/angular-route.js"></script>
          <script>
            // 1.创建模块
            var app = angular.module('myApp', ['ngRoute'])
        
            // 2.配置路由规则(约定什么样的锚点值，对应什么样的内容)
            // 第一个参数与controller第二个参数类似
            app.config(['$routeProvider',function($routeProvider){
              
              // 第一个参数：对应的url中锚点值
              // 当angular检测到url中锚点变为/ali里，
                  //就会把template对应的内容插入到页面拥有ng-view指令的标签中
              // 在规则中以：号开始,后面跟上一个名字
                 //(就相当于变量名，表明当前位置可以写成任意的值)
              // ?号表示当前位置如果没有值，也可以匹配到
              $routeProvider.when('/company/:myname?',{
                template:'<div>{{msg}}</div>',
                // 指定一个控制器的名字,
                // 当前url中锚点值为/ali时就会执行控制器中的回调函数
                // 我们可以直接在template/templateUrl对应的模板中
                     //使用该控制器中对应的$scope属性值
                controller:'demoController'
                //templateUrl
              })
              .when('/xxx',{
                template:'<div>唂</div>'
              })
              // 当以上规则都不匹配时，匹配otherwise里的规则
              .otherwise({
                // 这里相应于把页面锚点值改为/company/ali
                redirectTo:'/company/ali'
              })
            }])
        
            app.controller('demoController',[
              '$scope',
              '$routeParams'
              ,function($scope,$routeParams){
               console.log($routeParams)
              // $routeParams的属性包含了路由参数及值
              // 假设有一组数据
              $scope.data = {
                baidu:'二楼',
                ali:'三楼',
                tx:'四楼'
              }
              $scope.msg = "你要找的公司在"+$scope.data[$routeParams.myname]
            }])
          </script>

otherwise

  • 当不匹配when方法对应的规则时，就会匹配otherwise对应的规则

webapi

  • I/O
  • // url

api

  • console.log('小明') //小明
  • I/O docuemnt.getGetElementById('')

豆瓣API

  • ng-src 指令: 用来取代src

$http

  • 发请求
    http.get('./in_theaters/data.json')
      .then(function(res){
        // 成功的回调函数
        // console.log(res.data)
        $scope.data = res.data
      })
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容