如何使用 ngRoute 进行路由(带 Demo) [英] How to route using ngRoute (with Demo)

查看：20 发布时间：2021/11/10 5:06:51 angularjs angularjs-directive angular-ui-router angularjs-scope angularjs-1.2

本文介绍了如何使用 ngRoute 进行路由(带 Demo)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的代码从这里开始

<头><title>路由</title><body ng-app="myApp"><a href="#/login">登录</a><a href="#/register">注册</a><div ng-view></div><script src="angular-min.js" type="text/javascript"></script><script src="angular-route.js" type="text/javascript"></script><脚本>var app = angular.module("myApp", ["ngRoute"]);app.config(function($routeProvider) {$routeProvider.when("/登录", {模板网址:登录.html"}).when("/注册", {templateUrl : "register.html"})});</html>

<块引用>

我不能路由，用html简单兜售，使用简单的方法，基本的，我不知道为什么它不路由

解决方案

这是 1.2 版.

var app = angular.module("myApp", ["ngRoute"])app.config(function($routeProvider) {$routeProvider.when('/', {模板:`<h1>登录</h1>`，控制器:'loginCtrl'}).when('/注册', {模板:`注册
`，控制器:'RegisterCtrl'}).除此以外({重定向到:'/'});});app.controller('loginCtrl', function($scope) {$scope.name = "登录";});app.controller('RegisterCtrl', function($scope) {$scope.name = "注册";})

<html ng-app="myApp"><头><meta charset="utf-8"/><title>AngularJS 用户注册和登录示例 </title><身体><a href="#/login">登录</a><a href="#/register">注册</a><div class="mainContainer" ng-view></div><script src="//code.angularjs.org/1.2.26/angular.js"></script><script src="https://code.angularjs.org/1.2.26/angular-route.min.js"></script></html>

如果您使用的是 Angularjs 1.6 及更高版本，路由已更改.看看这个 答案

My code starts from here

<!DOCTYPE html>
<html>
<head>


<title>Routing</title>
</head>
<body ng-app="myApp">
<a href="#/login">Login</a>
<a href="#/register">Register</a>
<div ng-view></div>
</body>
<script src="angular-min.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script>
        var app = angular.module("myApp", ["ngRoute"]);
        app.config(function($routeProvider) {
              $routeProvider

                  .when("/login", {
                           templateUrl : "login.html"
                           })
                  .when("/register", {
                         templateUrl : "register.html"
                           })                       
                });
</script>
</html>

I cannot route, it is simple touting with html, using simple method , the basic one , i do not know why it doesnt route

解决方案

This is with the version 1.2.

var app = angular.module("myApp", ["ngRoute"])
app.config(function($routeProvider) {
  $routeProvider.when('/', {
      template: `<h1>Login</h1>`,
      controller: 'loginCtrl'
    })
    .when('/register', {
      template: `<h1>Register</h1>`,
      controller: 'RegisterCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });

});
app.controller('loginCtrl', function($scope) {
  $scope.name = "Login";

});
app.controller('RegisterCtrl', function($scope) {
  $scope.name = "Register";

})

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS User Registration and Login Example  </title>
</head>

<body>
  <a href="#/login">Login</a>
  <a href="#/register">Register</a>
  <div class="mainContainer" ng-view></div>
  <script src="//code.angularjs.org/1.2.26/angular.js"></script>
  <script src="https://code.angularjs.org/1.2.26/angular-route.min.js"></script>
</body>

</html>

If you are using Angularjs version 1.6 and above, routes has changed. Look at this Answer

这篇关于如何使用 ngRoute 进行路由(带 Demo)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何使用 ngRoute 进行路由(带 Demo) [英] How to route using ngRoute (with Demo)

问题描述

注册

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何使用 ngRoute 进行路由(带 Demo) [英] How to route using ngRoute (with Demo)

问题描述

注册

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭