如何在Angular Js中将一个页面导航到另一个页面
在AngularJS中，可以使用路由（routing）来实现页面之间的导航。以下是在AngularJS中将一个页面导航到另一个页面的步骤：
- 首先，确保已经引入了AngularJS库文件，并在HTML文件中声明了ng-app指令，用于定义AngularJS应用程序的根元素。
- 在应用程序的JavaScript文件中，定义一个AngularJS模块（module），并配置路由。
- 在应用程序的JavaScript文件中，定义一个AngularJS模块（module），并配置路由。
- 在上述代码中，我们使用了ngRoute模块来实现路由功能。通过调用
$routeProvider的when方法，我们可以定义不同URL路径对应的模板文件和控制器。 - 创建页面模板文件（例如page1.html和page2.html），并在这些模板文件中定义相应的HTML内容。
- 创建控制器（例如Page1Controller和Page2Controller），并在控制器中定义页面逻辑。
- 创建控制器（例如Page1Controller和Page2Controller），并在控制器中定义页面逻辑。
- 在HTML文件中使用
ng-view指令来指定路由视图的位置。 - 在HTML文件中使用
ng-view指令来指定路由视图的位置。 ng-view指令会根据当前URL路径加载相应的模板文件，并将其内容显示在指定位置。
现在，当用户访问/page1路径时，AngularJS会自动加载page1.html模板文件，并使用Page1Controller控制器处理页面逻辑。同样地，当用户访问/page2路径时，会加载page2.html模板文件，并使用Page2Controller控制器处理页面逻辑。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版、腾讯云CDN等。你可以在腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。
相关·内容
2回答
jsPlumb是否在angular.js视图更改后重新绘制？
javascript、angularjs、jsplumb、ngroute、ng-view
我用angularjs ngRoute制作了两页。在第一页中，我显示了两个连接的jsPlumb对象。第二页不包含Plumb对象。但是，当我从第一页转到第二页时，物体并没有消失。您知道如何使用jsPlumb更新实现适当的ng-view刷新吗？
script.js
var app;
app = angular.module('ironcoderApp', [
'ngRoute',
'appControllers'
]);
app.config(['$routeProvider',
function($route
浏览 1提问于2015-02-28得票数 1
回答已采纳
1回答
无法将对象数组传递给指令
angularjs
我写了这个指令
var app = angular.module('ExampleApp2', ['ngResource', 'ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/page1', {templateUrl: 'page1.html', controller: 'page1Controller'})
.when('/page2', {tem
浏览 1提问于2014-05-25得票数 0
回答已采纳
1回答
AngularJS读取当前templateURL指令
javascript、angularjs、angularjs-directive、angular-services
我在控制器中编写了一些逻辑来插入我的应用程序元数据：
HTML:
html ng-app="myApp" ng-controller="MainController"
meta name="description" content="{{ seo.metaDescription }}"
JS:
var app = angular.module('myApp', ['ngRoute']);
app.config(["$routeProvider", "$locationPr
浏览 2提问于2015-02-09得票数 1
1回答
angularjs路线-上一页js不清楚
jquery、angularjs、routes
我使用以下代码
index.html
<div ng-app="myApp">
<select id="mySelect">
<option value="A">A</option>
<option value="B">B</option>
</select>
<a href="#!/page1">Page 1</a>
<a href=&#
浏览 2提问于2019-11-07得票数 0
2回答
在AngularJS中处理路由时删除散列
angularjs、angularjs-routing
我用角度做了一个SPA样品。我使用了角度路由功能，有一个布局页面，然后根据最终用户请求的URL注入和交换不同的视图。对于索引页上href路由中的散列，一切都很好。
<a href="#/page1">page1</a>，但这样做，我的网页网址将类似于http://localhost/angular/#/page1
所以我想删除URL中的散列，使其像http://localhost/angular/page1一样
要删除散列，您必须启用html5Mode路由，并在索引页上设置基href。
$location/nobase
我做了完全相同的事情(请看下面的代
浏览 3提问于2016-04-27得票数 0
回答已采纳
2回答
在路线变更AngularJS上保持表单输入
javascript、angularjs、angular-routing
考虑一下这个例子：
Main.html：
<html>
<body>
<script>
angular.module('app', ['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/page1', { templateUrl : 'page1.html' })
浏览 3提问于2014-10-30得票数 4
回答已采纳
2回答
基本角路由问题
javascript、html、angularjs
在AngularJS中玩弄路由，但我似乎无法让它正常工作。尝试为每个控制器显示一些具有不同控制器的模板，但它似乎只是路由到其中的一个。
柱塞连接：
以下是代码：
index.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ang
浏览 5提问于2017-01-08得票数 1
回答已采纳
4回答
Angular Routing -显示找不到页面
angularjs
//您好，我正在学习Angular路由。我只是在尝试youtube上的一个简单示例。当我点击页面1和页面2链接时。我仍然站在同一立场上。请帮帮忙
//This is index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Practice</title>[enter image description here][1]
<script src = "app.js" type =
浏览 0提问于2017-04-05得票数 0
2回答
角-如何将路由更改为特定的页面并传递params，然后在加载路由后使用params执行函数？
javascript、angularjs
我有一个主页面，包括两个路由页面(使用ngRoute)、page1和page2，分别具有独立的子控制器。主页上有一个搜索栏。
假设我现在在page1上，通过提交搜索栏表单，我希望将路径更改为page2，并将字符串作为param传递，然后在传入param的情况下执行controller2函数。
下面是我的代码，我使用$broadcast传递param，但是除非我设置了1000 my的延迟，否则函数不会被执行。我的问题是如何在加载路由后将路由更改为page2并触发$on？
html(主页)：
<div ng-controller="mainController">
浏览 3提问于2016-05-18得票数 0
回答已采纳
1回答
类不对其他页面执行角操作。
javascript、html、css、angularjs
我用的是ngRoute。路由工作正常，但是page 1和page 2没有被样式化。在我的css文件中，我只是简单地更改了测试的背景色。
<!doctype html>
<html>
<head>
<link rel = "stylesheet" href = "main.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></
浏览 3提问于2016-12-24得票数 2
回答已采纳
1回答
AngularJS: ng视图中的控制器
angularjs、angularjs-controller、ng-view、angularjs-ng-route、angular1.6
当我触发ng路由时，控制器负载有问题。这是我的主页：
<!DOCTYPE html>
<html>
<head ng-app="testapp">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></scrip
浏览 4提问于2018-03-04得票数 0
3回答
我能否实例化一个变量，但稍后将一个值赋值给值呢？
javascript、angularjs、angularjs-ng-repeat、ng-repeat
我的控制器中有一个变量，希望稍后在单击按钮时赋值。即
var app = angular.module('myApp', ['ngRoute']);
....
var userArray = [
{name: "John", age: 25}, {name: "Jim", age: 30}
];
app.controller('Page2Controller', function($scope) {
$scope.message = 'Look! I am from page
浏览 4提问于2016-05-18得票数 0
回答已采纳
2回答
动态添加控制器到ng-包括
javascript、angularjs
这是改变ng-include控制器的一种动态方法吗？
我的应用程序允许用户创建页面、一些内容和控制器。我可以更改ng-include src，但我不知道如何动态关联一个新控制器。以下代码不起作用：
<div ng-app="MyApp">
<div ng-controller="ParentController">
<select ng-model="currentItem" ng-options="item as item.url for item in items track by
浏览 7提问于2015-06-22得票数 1
回答已采纳
1回答
$routeProvider -将变量传递给存储在何处的.when
angularjs
我是个有角的业余爱好者。我使用路由提供程序加载单独的html页面和控制器。这很好，当我知道什么网页的网站，我可以定义他们。
app.config(function($routeProvider) {
$routeProvider
.when("/page1", {
templateUrl: "../page1.html",
controller: "Page1Ctrl"
})
.when("/page2", {
浏览 2提问于2014-10-03得票数 1
回答已采纳
1回答
如何对ng-view (angularjs)中的代码使用常规javascript
javascript、angularjs、templates、ng-view
第一次在这里使用angularJS。基本上，我使用了路由服务，所以我在一个模板中使用了一个with路由调用，其中包含html代码。我还拥有模板中代码正确显示所需的所有常规javascript函数(幻灯片等等)。
当我运行时，我会得到所有这些空错误(我的JS函数似乎找不到各种元素，因为它要么无法访问ng-view/模板中的代码，要么在加载ng-view/模板之前运行)。
当我将所有javascript函数粘贴到我为该模板分配的控制器中时，它就成功了。但我有种感觉我不该这么做。什么是正确的方式使这一工作？谢谢。
var app = angular.module("myApp", [
浏览 5提问于2016-06-18得票数 5
回答已采纳
2回答
使用角度和ng-route将视图嵌入到另一个视图中
javascript、html、ruby-on-rails、angularjs
我在Angualr做前端，在Rails做后端。我想在另一个视图中嵌入一个视图。下面的结构就是我目前正在做的。
//index.html
<head>
<scrip src="path/MainController.js"></script>
<scrip src="path/controller1.js"></script>
<scrip src="path/controller2.js"></script>
<head>
<body ng-c
浏览 0提问于2016-07-04得票数 0
2回答
角routeProvider与控制器的结合
angularjs
请考虑需要在ng视图中插入页(N) routeProvider的代码。
除了控制台错误之外：
未知提供者：$routeProviderProvider <- $routeProvider
函数routeIt的参数是要导航到的页面的名称，如何将条件开关与routeProvider.when混合，以便以最有效的方式调用匹配参数的页面？谢谢
(function () {
'use strict';
angular
.module('appModule')
.controller('MainMen
浏览 1提问于2016-01-27得票数 0
1回答
AngularJS路由不适用于templateUrl？
angularjs
我如此努力地想得到这份工作，但我所有的努力都失败了。我试图学习角路由，我开始时非常简单:在同一个文件夹中创建了4个文件: index.html、page1.html、page2.html和page3.html。这是index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>routing</title>
<meta charset="UTF-8">
<meta name="viewport
浏览 4提问于2017-01-06得票数 0
1回答
从ng中调用父控制器中的方法-在角指令中单击
angularjs
我写了这份申请书
在这里，我试图调用在父控制器中定义的方法，该方法是从我的角指令中的ng单击事件中定义的。
var app = angular.module('ExampleApp2', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/page1', {templateUrl: 'page1.html', controller: 'page1Controller'})
});
app.dir
浏览 1提问于2014-05-25得票数 0
回答已采纳
1回答
来自控制器的ng视图中的AngularJS更改视图
javascript、html、angularjs、ng-view、office-app
我有一个JavaScript网络应用程序，我用AngularJS来缓解问题，但现在我遇到了一个小问题。
我想换个ng控制器的视角。我使用$location.path来做这件事，但遗憾的是，什么都没有发生。如果我检查$location对象，路径将被正确更改，但视图不会更改。
我的Home.html中有一个ng视图.这是我为它编写的配置：
<html ng-app="app">
...
<body>
<div id="navigation-menu" ng-controller="NavigatorCon
浏览 2提问于2015-10-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
