<!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>

angularjs1-路由的更多相关文章

  1. AngularJS1.6版本中ui-router路由中/#!/的解决方法 - zhuan

    本地编译出的文件可以正常运行,但是服务器编译后到了测试那里路由上就莫名的出现了/#!/,这导致了很多问题. 后来查了下是服务器编译器把AngularJS升级到了1.6版本,而我本地的依旧是1.5. 但 ...

  2. AngularJs1.X学习--路由

    [三种使用说明:] $stateProvider.state('station.printQRCode', { //params: { 'parentOfficeId': null }, //一次性参 ...

  3. AngularJS-chapter2-7-前端路由

    Form表单提交会导致页面之间的切换,没法实现单页应用 Ajax请求不会留下History记录(在后台管理系统,没有后台历史记录还可以) ,但在网络型应用或门户型应用(用户没有办法给改页面加标签或分享 ...

  4. javascript基础修炼(6)——前端路由的基本原理

    [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...

  5. AngularJS1.X版本基础

    AngularJS  知识点: DataBinding Providers Validators Directives  Controllers Modules Expressions Factori ...

  6. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. nodejs进阶(3)—路由处理

    1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...

  9. .NetCore MVC中的路由（2）在路由中使用约束

    p { margin-bottom: 0.25cm; direction: ltr; color: #000000; line-height: 120%; orphans: 2; widows: 2 ...

  10. .NetCore MVC中的路由（1）路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

随机推荐

  1. python之路——二分查找算法

    楔子 如果有这样一个列表,让你从这个列表中找到66的位置,你要怎么做? l = [2,3,5,10,15,16,18,22,26,30,32,35,41,42,43,55,56,66,67,69,72 ...

  2. HBase编程 API入门系列之HTable pool（6）

    HTable是一个比较重的对此,比如加载配置文件,连接ZK,查询meta表等等,高并发的时候影响系统的性能,因此引入了“池”的概念. 引入“HBase里的连接池”的目的是: 为了更高的,提高程序的并发 ...

  3. 微软抛弃微软.Net了吗？Net技术的未来在哪里-浅谈微软技术路线

    winform:优点是简单易学,缺点是界面做不好看,界面适应能力很差. wpf:微软结合了显卡渲染技术推出的界面设计方式,模仿html推出了自己的xaml,winform能实现的wpf都能实现,因为w ...

  4. SEO规范（部分）

    1:尽量减少AJAX的使用搜索引擎无法检索ajax中的内容,也无法识别javascript代码. 2:拒绝iframe,frame标签iframe,frame会极大的阻碍搜索引擎爬取网站内容. 3:图 ...

  5. WPF 解决拼接屏全屏的问题

    需求: 8块1920*1080屏幕拼接 橙色4个框每个框(1920*1080)拼接成一个1920*1080 红色4个框每个框(1920*1080)拼接成一个1920*1080 橙色和红色作为displ ...

  6. 软件开发的MVC构架

    MVC:IDE开发环境开发时,无意中使用的软件结构. 转自于wikipedia:http://zh.wikipedia.org/wiki/MVC 软件的层次划分:框架--组件(设计模式)--算法与数据 ...

  7. mvc cshtml 中赋值

    @{ var str = ""; str = item.ApplyStatus == ? ? ? ? "申请驳回" : ""; } < ...

  8. Aeroplane chess HDU - 4405_数学期望_逆推

    Code: #include<cstdio> #include<algorithm> #include<cstring> using namespace std; ...

  9. 关闭浏览器 清除session

    捕获关闭浏览器的事件 关于关闭IE清空session的总结 Session过期会清楚session 还可以手动清除session实现关闭浏览器时清除session的方法

  10. 实验二：编写输出"Hello World!"

    1.首先打开eclipse这个软件,新建Java项目,执行“文件→ 新建→Java项目 ”菜单命令,打开新建Java对话框,在项目名的编辑框中输入项目名编写输出"Hello World!”, ...