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>
复制代码

 


本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/7241442.html,如需转载请自行联系原作者

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
移动开发 前端开发 JavaScript
AngularJS 技术深入解析
AngularJS 是一个流行的 JavaScript 框架,用于构建动态的单页面应用程序(SPA)。它提供了一种优雅而强大的方式来开发前端应用,具有出色的数据绑定、模块化和可扩展性等特性。本文将深入探讨 AngularJS 的一些关键技术。
111 0
|
6月前
|
UED
深入了解 AngularJS 路由的原理和使用技巧
深入了解 AngularJS 路由的原理和使用技巧
100 0
|
移动开发 前端开发 API
angularJS学习小结——ngRoute(路由机制)
angularJS学习小结——ngRoute(路由机制)
159 0
angularJS学习小结——ngRoute(路由机制)
|
存储 缓存 前端开发
Day 2: AngularJS —— 对AngularJS的初步认识
我们发现了比较有趣的系列文章《30天学习30种新技术》,准备翻译,一天一篇更新,年终礼包。以下是第二天技术的译文。
164 0
Day 2: AngularJS —— 对AngularJS的初步认识
|
Web App开发 前端开发 API
angular2路由
http://codin.im/2016/11/07/angular2-route-1-basic/
687 0