AngularJS ng-view 不工作

2023-11-23

所以我遵循了这个指南:http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

但是当我试图改变观点时什么也没有发生,有人知道我做错了什么吗?

这是我得到的代码。 首页.php:

<!DOCTYPE html>
<html ng-app="lax">
<head>
    <meta name="author" content="Koen Desmedt" />
    <meta name="description" content="CMS Belgium Lacrosse" />
    <meta name="keywords" content='Lacrosse, BLF, Belgium' />
    <meta name="googlebot" content="noarchive" />
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">        
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="lax.js"></script>
    <link href="css/style.css" rel="stylesheet">        
    <title>CMS Belgium Lacrosse</title>
</head>
<body>        
    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>                    
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav navbar-left">
                    <li>
                        <a href="#/home">
                            <span class="glyphicon glyphicon-home"></span> BLF
                        </a>
                    </li>
                    <li>
                        <a href="#/players">Players</a>
                    </li>
                    <li>
                        <a href="#/club">Club</a>                            
                    </li>
                    <li>
                        <a href="#/games">Games</a>
                    </li>                        
                </ul>             
            </nav>
        </div>
    </header>
    <div id='contentcontainer'>
        <div class='container' ng-view></div>
    </div>        
</body>
</html>

lax.js:

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

lax.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
            when('/home', {
                templateUrl: 'views/news.php',
                controller: 'NewsController'
            }).
            when('/players', {
                templateUrl: 'views/players.php',
                controller: 'PlayersController'
            }).
            otherwise({
                redirectTo: '/home'
            });
}]);

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


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

从 Angular 1.2.0 开始,ngRoute 已移至其自己的模块。您必须单独加载它并声明依赖关系。

更新您的 HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>

And Js:

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

了解更多信息:http://docs.angularjs.org/guide/migration

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS ng-view 不工作 的相关文章

  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 将函数传递给指令以在链接中执行的正确方法

    我知道我们通常通过隔离范围将函数传递给指令 directive myComponent function return scope foo 然后在模板中我们可以这样调用这个函数
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

随机推荐

  • 无法导入 cv2 模块(Python 3.6)

    总的新人在这里 我尝试安装失败cv2python 的模块 但它不起作用 我正在使用 Python 3 6 64 位 我在cmd中输入了以下命令 C Users leahj gt C Users leahj AppData Local Pro
  • GitHub API - 写入存储库

    我查看了所有文档 但它没有回答我的问题 有没有办法写入存储库 上传文件 比如创建一个文件夹 然后上传 readme md 不需要创建文件夹 因为它们仅隐式存在于 git 中 这意味着如果您有一个带有路径的文件folder file txt那
  • 编译时如何编写程序?

    编写一个小型 C 程序 编译时需要另一个程序 从输入终端 运行时给出第二个的结果 程序 注意 关键是 想想 UNIX 假设 程序是1 c 然后 在编译时 cc o 1 1 c int main printf Hello World n D
  • Chromecast 设备被列入白名单后,如何在 Chrome 中启动接收器应用程序?

    我正在尝试从 Chrome 浏览器启动我的自定义接收器应用程序 这样做的第一步似乎是为我感兴趣的活动类型添加接收器侦听器 cast api new cast Api cast api addReceiverListener activity
  • 如何使用 MVC5RC/RTW 与现有数据库进行身份验证

    我最初问这个question当 Identity 处于测试阶段时 从那时起 类和接口发生了很大的变化 并且appearsRTW版本在RC版本的基础上又做了一些修改 原则上我需要实现以下目标 根据我的用户表 tblMembers 验证本地登录
  • 在 Excel VBA 中设置活动工作簿的值

    我现在已经以这种方式设置了我的工作簿 其中工作簿被硬编码到 Set 命令中 我想知道是否有一种方法可以做到这一点 以便我可以将其放在流畅的地方 因此 无论此代码放置在何处 在另一个工作簿中 代码都会适应新的环境 这有道理吗 以下是我现在正在
  • Swig:如何包装 double& (通过引用传递 double)?

    我正在使用 SWIG 从 Python 访问 C 代码 如何优雅地包装一个函数 该函数返回通过引用传递的变量中的值 例如 void set double a a 42 我不知道该怎么做 在最好的情况下 我能够在 Python 中使用带有 P
  • 在 .NET 中读取 PDF 中的文本

    我正在尝试使用 iTextSharp 库将 PDF 中的文本读取为字符串 iTextSharp text pdf PdfReader pdfReader new iTextSharp text pdf PdfReader C mypdf p
  • 如何从嵌入式视频中完全删除 YouTube 品牌?

    我尝试嵌入不带 YouTube 品牌的视频 因为它会将我的流量发送到 YouTube 我设置modestbranding 1 and showinfo 0但当我将光标悬停在播放器上时 我仍然在播放器底部看到 YouTube 品牌 当我收到这
  • 如何在 Vue 中使用 jQuery 插件

    我正在 VueJS 中构建一个 Web 应用程序 但遇到了问题 我想使用 jQuery 扩展 具体来说是cropit 但我不知道如何以正确的方式实例化 要求 导入它而不会出现错误 我正在为我的应用程序使用官方 CLI 工具和 webpack
  • 在“更新”操作中使用聚合管道更新数组的元素

    Scenario 对于下面的文档 我想更新status某具体的message in the messages array id ObjectId 6079bab4f297df39a44609cb title Test messages of
  • 使用 NX Monorepo 从另一个库导入构建库

    情况如下 我正在使用 Nrwl NX Monorepo 我有 2 个库 lib a and lib b 两者都是通过 NX 创建的可发布库 现在我创建一个MyClass ts in lib a 自然地在路径下workspace tsconf
  • MySQLdb 对于大型结果集非常慢

    我在 phpMyAdmin 和 MySQLdb python 中执行了以下查询 SELECT SELECT CONCAT id name image code FROM model artist WHERE id artist id as
  • Python 是否有相当于 Perl 正则表达式“/x”修饰符的函数?

    Perl 使构建变得容易可读的正则表达式使用 x修饰符 此修饰符允许编写正则表达式字符串并忽略这些字符串中的所有空格 换句话说 正则表达式的逻辑部分可以用空格甚至回车符分隔 从而具有良好的可读性 在Python中 我看到这样做的唯一方法是构
  • Python:json规范化“字符串索引必须是整数”错误

    我在以下代码中收到类型错误 TypeError 字符串索引必须是整数 import pandas as pd import json from pandas io json import json normalize full json d
  • JDBC 参数 verifyServerCertificate=false 无需 clientkeystore 和 truststore 即可连接

    我正在尝试使用以下设置创建到 MYSQL 服务器的 ssl 连接 我注意到 当我在 jdbc url 中指定 verifyServerCertificate false 时 Java 似乎忽略了我通过 System setProperty
  • Android:菜单项的自定义视图

    我希望能够为MenuItem 我想在操作栏中的购物车菜单项上显示一个指示器 显示当前购物车中有多少商品 我可以做到这一点的唯一方法是通过添加自定义视图而不是利用 MenuItem 生命周期等 使用自定义视图MenuItem call set
  • 是否可以将 setup.exe 和 setup.msi 图标更改为不同的图标?

    VS 2008 SP1 我为我们的客户创建了一个设置项目 setup exe 和 setup msi 的图标是标准图标 我们的客户不想要这些图标 他们想要有看起来像他们的标志的图标 是否可以将 exe 和 msi 图标更改为不同的图标 您可
  • 如何在 Visual Studio 中使用 .NET 5(隔离进程)调试 Azure Functions?

    我最近从 NET Core 3 1 迁移到 NET 5 0 使用隔离 进程外运行时 对于 C 中的 Azure Function 项目 一切都按预期进行 但是 每当我调试时 我的断点都不会命中 为什么我以前可以 但现在无法调试 Azure
  • AngularJS ng-view 不工作

    所以我遵循了这个指南 http viralpatel net blogs angularjs routing and views tutorial with example 但是当我试图改变观点时什么也没有发生 有人知道我做错了什么吗 这是