请教AngularJS的ngRoute问题：为何这段程序无法执行？问题出在哪？

2017-04-28 03:16:30 212 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

MEAN全栈开发实战：从环境搭建到端到端业务落地 MEAN架构是基于JavaScript的全栈开发范式，融合MongoDB（文档型数据库）、Express.js（轻量Web框架）、AngularJS（MVVM前端框架）与Node.js（事件驱动运行时），构成统一语言、统一异步模型、统一包管理的闭环工作流。其核心价值在于降低I/O密集型应用的开发熵值，通过无模式数据结构、声明式路由、双向绑定与非阻塞I/O，显著提升MVP验证效率。典型适用于内容管理系统、内部工具平台及实时协作类场景，尤其在数据模型高频演进、团队具备前端基础、交付周期紧迫等条件下展现出不可替代阅读详情



/** index.html **/

<!DOCTYPE html>

<html ng-app="exampleApp">

<head>

    <title>Products</title>

    <script src="angular.js"></script>

    <script src="angular-route.js"></script>

    <script src="products.js"></script>

    <link href="bootstrap.css" rel="stylesheet" />

    <link href="bootstrap-theme.css" rel="stylesheet" />

</head>

<body ng-controller="defaultCtrl">

<div class="panel panel-primary">

    <h3 class="panel-heading">Products</h3>

    <div ng-view></div>

</div>

</body>

</html>



/** products.js **/

angular.module("exampleApp", ["ngRoute"])



.config(function ($routeProvider) {

    $routeProvider.when("/list", {templateUrl: "/tableView.html"});

    $routeProvider.when("/edit", {templateUrl: "/editorView.html"});

    $routeProvider.when("/create", {templateUrl: "/editorView.html"});

    $routeProvider.otherwise({templateUrl: "/tableView.html"});

})



.controller("defaultCtrl", function ($scope, $location) {

    $scope.currentProduct = null;



    $scope.listProducts = function () {

        $scope.products = [

            {id: 0, name: "Dummy1", category: "Test", price: 1.25},

            {id: 1, name: "Dummy2", category: "Test", price: 2.45},

            {id: 2, name: "Dummy3", category: "Test", price: 4.25}

        ];

    };



    $scope.deleteProduct = function (product) {

        $scope.products.splice($scope.products.indexOf(product), 1);

    };



    $scope.createProduct = function (product) {

        $scope.products.push(product);

        $location.path("/list");

    };



    $scope.updateProduct = function (product) {

        for (var i = 0; i < $scope.products.length; i++) {

            if ($scope.products[i].id === product.id) {

                $scope.products[i] = product;

                break;

            }

        }

        $location.path("/list");

    };



    $scope.editOrCreateProduct = function (product) {

        $scope.currentProduct = product ? angular.copy(product) : {};

        $location.path("/edit");

    };



    $scope.saveEdit = function (product) {

        if (angular.isDefined(product.id)) {

            $scope.updateProduct(product);

        } else {

            $scope.createProduct(product);

        }

    };



    $scope.cancelEdit = function () {

        $scope.currentProduct = {};

        $location.path("/list");

    };



    $scope.listProducts();

});