个人中心
gpt4 book ai didi

javascript - AngularJS 未在网页上呈现 "AngularJSDemos"Dan Wahlin

转载 作者：行者123 更新时间：2023-12-03 10:04:12 24 4
gpt4 key购买 nike

我一直在研究本教程“AngularJSDemos”Dan Wahlin 链接 https://www.youtube.com/watch?v=i9MHigUZKEM ，但应用程序 SPA AngularJS 未在网页上呈现。我下面的代码中是否缺少任何内容？

Html 页面具有以下代码:“使用 AngularJS 指令和数据绑定(bind)”

<!DOCTYPE html>
<html data-ng-app="demoApp"> 
<head>
     <title>Using AngularJS Directives and Data Binding</title>
</head>
<body>
<div>
    <!--Placeholder for views-->
    <div data-ng-view=""></div>
</div>
<script src="Scripts/angular.min.js"></script>

<script>
    var demoApp = angular.module('demoApp', []);

    demoApp.config(function ($routeProvider) {
        $routeProvider
        .when('/view1',
        {
            controller: 'SimpleController',
            templateUrl: 'Partials/View1.html'
        })
        .when('/view2',
        {
            controller: 'SimpleController',
            templateUrl: 'Partials/View2.html'
        })
        .otherwise({ redirectTo: '/view1' });
    });

    demoApp.factory('simpleFactory', function () {
        var customers = [
            { name: 'John Smith', city: 'Phoenix' },
            { name: 'Jane Doe', city: 'San Francisco' },
            { name: 'John Doe', city: 'New York' },
            { name: 'Mike Leski', city: 'Clarksburg' },

        ];

        var factory = {};
        factory.getCustomers = function() {
            return customers;
        };

        factory.postCustomer = function (customer) {

        };
        return factory;
    });

    demoApp.controller('SimpleController', function ($scope, simpleFactory) {
        $scope.customers = [];

        init();

        function init() {
            $scope.addCustomer = simpleFactory.getCustomers();
        }

        $scope.addCustomer = function () {
            $scope.customers.push(
                {
                    name: $scope.newCustomer.name,
                    city: $scope.newCustomer.city
                });
        };
    });

</script>

View1.html

  <div class="container">
    <h2>View 1</h2>
    Name:
    <br />
    <input type="text" data-ng-model="filter.name" />
<br />
<ul>
    <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{ cust.name | uppercase}} - {{ cust.city | lowercase}}</li>
</ul>

<br />
Customer Name:<br />
<input type="text" data-ng-model="newCustomer.name"/>
<br />
Customer City:<br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer</button>
<br />
<a href="#/view2">View 2</a>
 </div>

还有最后一个View2.html

  <div class="container">
  <h2>View 2</h2>
  City:
  <br />
  <input type="text" data-ng-model="city" />
  <br />
  <ul>
    <li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{ cust.name | uppercase}} - {{ cust.city | lowercase}}</li>
</ul>
  </div>

最佳答案

问题是您在声明 demoApp 模块时缺少 ngRoute 依赖项:

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

Here是您的代码的工作示例

另外记得添加ngRoute的脚本，可以使用:

npm install Angular-route --save-dev

或者添加CDN脚本:

https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js例如

PD:我建议您使用ui-router更稳健

关于javascript - AngularJS 未在网页上呈现 "AngularJSDemos"Dan Wahlin，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30443940/

24 4 0
文章推荐： javascript - 将表单提交到新窗口并将页面加载到表单窗口
文章推荐： javascript - 执行外部 Javascript NodeJS
文章推荐： javascript - 将输入值作为字符串插入标签中
文章推荐： javascript - 将数据元素应用到数据表单元格
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com