angularjs1-路由

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script>
        <style>
            .red{ background:red;}
            .yellow{ background:yellow;}
        </style>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              <div ng-bind-html="text"></div>
          </div>
      </div>
      <script type="text/javascript">
        var app = angular.module('myApp',['ngSanitize']);//依赖
          app.controller('firstController',['$scope','$interval',function($scope,$interval){
              $scope.text = '<h1>hello</h1>';//解析html，
          }]);
      </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div class="header">
              <a href="#div1">第一个div</a>
              <a href="#div2">第二个div</a>
              <a href="#div3">第三个div</a>
              <a href="#content/13/5">点击去内容12</a>
          </div>
          <div ng-view></div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", ['ngRoute']);
          app.run(['$rootScope',function($rootScope){
              $rootScope.$on('$routeChangeStart',function(event,current,pre){
                  console.log(event);
                 // console.log(current);
                 // console.log(pre);
              });
          }]);
          app.config(['$routeProvider',function($routeProvider){
              $routeProvider
                      .when('/div1',{
                          templateUrl : '../template1.html',
                          controller : 'div1Controller'
                      })
                      .when('/div2',{
                          template : '<p>这是div2{{text}}</p>',
                          controller : 'div2Controller'
                      })
                      .when('/div3',{
                          template : '<p>这是div3{{text}}</p>',
                          controller : 'div3Controller'
                      })
                      .when('/content/:id/:cateid',{
                          template : '<p>这是content{{id}}</p>',
                          controller : 'div4Controller'
                      })
                      .otherwise({
                          redirectTo : '/div3'
                      });
          }]);

          app.controller('div1Controller',function($scope){
              $scope.text='phonegap中文网 外部页面';
          });
          app.controller('div2Controller',function($scope){
              $scope.text='div2Controller';
          });
          app.controller('div3Controller',function($scope){
              $scope.text='div3Controller';
          });
          app.controller('div4Controller',['$scope','$routeParams',function($scope,$routeParams){
              console.log($routeParams);
              $scope.id=$routeParams.num;
              $scope.text='div4Controller';
          }]);
         /*
         *  app.controller('firstController',function($scope){
          //$scope.text='phonegap中文网';
          });
         * */
      </script>
    </body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
<script>
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
    $routeProvider
        .when('/aaa/:num',{
            template : '<p>首页的内容</p>{{name}}',
            controller : 'Aaa'
        })
        .when('/bbb',{
            template : '<p>学员的内容</p>{{name}}',
            controller : 'Bbb'
        })
        .when('/ccc',{
            templateUrl : 'test.html',
            controller : 'Ccc'
        })
        .otherwise({
            redirectTo : '/aaa'
        });
}]);
m1.run(['$rootScope',function($rootScope){//run是module初始化的时候，
    $rootScope.$on('$routeChangeStart',function(event,current,pre){//on监听触发的事件，
        console.log(event);
        console.log(current);
        console.log(pre);
    });
}]);
m1.controller('Aaa',['$scope','$location','$routeParams',function($scope,$location,$routeParams){
    $scope.name = 'hello';
    $scope.$location = $location;
    console.log( $routeParams );
}]);
m1.controller('Bbb',['$scope',function($scope){
    $scope.name = 'hi';
}]);
m1.controller('Ccc',['$scope',function($scope){
    $scope.name = '你好';
}]);
</script>
</head>
<body>
<div ng-controller="Aaa">
   <a href="" ng-click="$location.path('aaa/123')">首页</a>
   <a href="" ng-click="$location.path('bbb')">学员</a>
   <a href="" ng-click="$location.path('ccc')">课程</a>
   <div ng-view></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div class="header" ng-controller="firstController">
              <a ng-click="$location.path('div1')">第一个div</a>
              <a ng-click="$location.path('/div2')">第二个div</a>
              <a href="#div3">第三个div</a>
              <a href="#content/13/5">点击去内容12</a>
          </div>
          <div ng-view></div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", ['ngRoute']);
          app.run(['$rootScope',function($rootScope){
              $rootScope.$on('$routeChangeStart',function(event,current,pre){
                  console.log(event);
                 // console.log(current);
                 // console.log(pre);
              });
          }]);
          app.config(['$routeProvider',function($routeProvider){
              $routeProvider
                      .when('/div1',{
                          templateUrl : 'template1.html',
                          controller : 'div1Controller'
                      })
                      .when('/div2',{
                          template : '<p>这是div2{{text}}</p>',
                          controller : 'div2Controller'
                      })
                      .when('/div3',{
                          template : '<p>这是div3{{text}}</p>',
                          controller : 'div3Controller'
                      })
                      .when('/content/:id/:cateid',{
                          template : '<p>这是content{{id}}</p>',
                          controller : 'div4Controller'
                      })
                      .otherwise({
                          redirectTo : '/div1'
                      });
          }]);
          app.controller('div1Controller',function($scope){
              $scope.text='phonegap中文网 外部页面';
          });
          app.controller('div2Controller',function($scope){
              $scope.text='div2Controller';
          });
          app.controller('div3Controller',function($scope){
              $scope.text='div3Controller';
          });
          app.controller('div4Controller',['$scope','$routeParams',function($scope,$routeParams){
              console.log($routeParams);
              $scope.id=$routeParams.num;
              $scope.text='div4Controller';
          }]);
        app.controller('firstController',function($scope,$location){
             $scope.$location= $location;
             $scope.text='phonegap中文网';
          });
      </script>
       
    </body>
</html>

posted @ 2017-07-26 19:09 无天666 阅读(623) 评论(0) 收藏举报

刷新页面返回顶部

672530440

angularjs1-路由

公告