美文网首页
angularJs 路由

angularJs 路由

作者: 灿若星宸 | 来源:发表于2016-12-03 23:01 被阅读0次

    设置好请求路径所展示的网页
    根据用户的请求路径,跳转到不同的页面

    要先安装 angular-route

    命令请看官网

    demo

    //使用ng官方提供的路由
    //1.引包  把angular 和 angular-route 引进去
    //2.创建模块同时添加依赖项ng-Route
    //3.调用模块的config 方法,注入一个$routeProvider对象
    //4.使用$routeProvider配置路由表
    //5.以HTTP协议测试访问
    angular.modular('DemoApp',['ng-Route']).config(['$routeProvider',function($routeProvider){
    $routeprovider
      .when('/',{ 
          // 我们利用templateUrl 来写更多的标签
          //templateUrl:""
          template:'<h1>{{name}}</h1>',
          //页面不可能只有一个标签,所以我们添加一个控制器来管理
          controller:'IndexController'
    })
      .when('/login',{
          template:'<h1>{{name}}</h1>',
          controller:'loginController'
    })
      .when('/register',{
           template:'<h1>{{name}}</h1>',
           controller:'registerController'
    })
    }])
    
    
    
    angular.moudle('DemoApp')
    .controller('IndexController',['$scope',function($scope]){
      $scope.name='index'
     }])
     .controller('loginController',['$scope',function($scope]){
      $scope.name='login'
     }])
      .controller('registerController',['$scope',function($scope]){
      $scope.name='register'
     }])
    

    关于测试

    单页应用的url 是指#后面的路径

    相关文章

      网友评论

          本文标题:angularJs 路由

          本文链接:https://www.haomeiwen.com/subject/dqwcmttx.html