Question

我想尝试使用angular.js路由的一些简单示例。这是我的剧本：

var sampleApp = angular.module('sampleApp', []);

    sampleApp.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
                when('/AddNewOrder', {
                    templateUrl: 'templates/add_order.html',
                    controller: 'AddOrderController'
                }).
                when('/ShowOrders', {
                    templateUrl: 'templates/show_orders.html',
                    controller: 'ShowOrdersController'
                }).
                otherwise({
                    redirectTo: '/AddNewOrder'
                });
        }]);

    sampleApp.controller('AddOrderController', function($scope){
        $scope.message = 'This is Add new order screen';
    });

    sampleApp.controller('ShowOrdersController', function($scope){
        $scope.message = 'This is Show orders screen';
    });

的index.html：

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>AngularJS Routing example</title>  

  <body ng-app="sampleApp">

    <div class="container">
        <div class="row">
        <div class="col-md-3">
           <ul class="nav">
                <li><a href="#AddNewOrder"> Add New Order </a></li>
                <li><a href="#ShowOrders"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div ng-view></div>
        </div>

        </div>

    </div><!-- /.container -->

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="main.js"></script>

  </body>
</html>

show_orders.html：

<h2>Show Orders</h2>
{{ message }}

add_order.html：

<h2>Add New Order</h2>
{{ message }}

当我点击浏览器（Chrome）中的链接时，他们不会打开，我在“网络”中遇到此错误。标签：

否＆＃39;访问控制 - 允许 - 来源＆＃39;标题出现在请求的上资源。起源＆＃39; null＆＃39;因此不允许访问。

这里有什么问题？

Answer 1

您需要在后面运行http服务器

在python中为exmaple（来自项目目录）

python -m SimpleHTTPServer

或者将模板转换为脚本标记，例如

<script  type="text/ng-template" id="templates/add_order.html">
<h2>Add New Order</h2>
{{ message }}
</script>

Answer 2

我建议在开发AngularJS应用程序时使用 Grunt （http://gruntjs.com/），因为它会：

简化流程
促进测试，代码验证和依赖性解决
并修复您的问题，因为它在端口9000上引导一个小型http服务器。：）

No＆＃39; Access-Control-Allow-Origin＆＃39;使用angular.js路由模块时出错

2 个答案: