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