AngularJS案例 - W3xue在线HTML/CSS/JS运行工具

W3xue Tools一起学习，一起紧随时代的步伐

案例：AngularJS案例 状态：可编辑再运行进入横版

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="/js/angular.js1.4.6/angular.min.js"></script>
<script src="/js/angular.js1.4.6/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

<script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

<div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>
</html>

​x
 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="/js/angular.js1.4.6/angular.min.js"></script>
<script src="/js/angular.js1.4.6/angular-route.js"></script>
​
<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});

运行结果　

部分手机浏览器需要先点“提交代码”才能编辑代码。W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。部分案例需要特定浏览器支持，如案例没有显示效果，请尝试更换浏览器。意见反馈 友情链接：直通硅谷　点职佳

　北美留学生论坛