韦德娱乐1946网页版AngularJS删除路由中的,Angula

2019-06-22 20:18 来源:未知

正文实例讲述了AngularJS完毕选择路由切换视图的秘诀。分享给大家供我们参考,具体如下:

本文实例讲述了AngularJS路由用法。分享给大家供大家参考,具体如下:

新近做多个web应用,有个须要要求删除angular路由中的#号。

上边是贰个大致的上学的儿童消息保管实例。

当前的接头中,那一个NG的路由模块能够用来带有多视图的单页面开辟。

例如:

注意:除了引用angular.js之外,还要引用angular-route.js。

先把具备代码贴出:

http://example.com/
http://example.com/#/about
http://example.com/#/contact

1、创建index.html主视图

HTML:

亟待改成

在index.html主视图中,大家将会把多个视图共有的事物都投身个中,比如菜单。在这些例子中,大家一味把利用的标题放在中间,然后再用ng-view指令来报告Angular把视图呈现在哪儿。

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="test.js"></script>
</body>
</html>
http://example.com/
http://example.com/about
http://example.com/contact
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="StuApp">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>学生信息</title>
  <script src="/Scripts/angular.min.js"></script>
  <script src="/Scripts/angular-route.min.js"></script>
  <script src="controllers.js"></script>
</head>
<body>
  <h1>学生信息</h1>
  <div ng-view></div>
</body>
</html>

list.html:

以此是angular暗中同意自带的,所以想要删除要求配置一下:

2、创立list.html列表视图

<div>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</div>
$locationProvider.html5Mode(true);
<table>
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr ng-repeat="student in StudentList">
    <td>{{student.id}}</td>
    <td><a ng-href="#/view/{{student.id}}">{{student.name}}</a></td>
    <td>{{student.sex}}</td>
    <td>{{student.age}}</td>
  </tr>
</table>

JS:

接下来再index.html 的header中,钦命二个base:

3、创造detail.html详细视图

var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/',{template:'这是首页页面'})
      .when('/computers',{
        template:'这是电脑分类页面'
      })
      .when('/user',{templateUrl:'list.html',controller:'listController'})
      .otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
  $scope.name="ROSE";
});
<base href="/">
<div>
  <div><strong>学号:</strong>{{Student.id}}</div>
  <div><strong>姓名:</strong>{{Student.name}}</div>
  <div><strong>性别:</strong>{{Student.sex}}</div>
  <div><strong>年龄:</strong>{{Student.age}}</div>
  <a href="#/">返回</a>
</div>

首先是因为本人用的是Angular1.5,所以须求相当引进angular-route.js:

如上所述是笔者给我们介绍的AngularJS删除路由中的#标志的方法,希望对大家持有支持,若是咱们有其余疑问请给本身留言,作者会及时回复大家的。在此也非常多谢大家对台本之家网站的支撑!

4、创设controllers.js调节器脚本

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

你大概感兴趣的稿子:

  • Angularjs制作轻松的路由成效demo
  • AngularJS 路由详解和精炼实例
  • 接纳AngularJS对路由举行安全性管理的主意
  • AngularJS路由完结页面跳转实例
  • AngularJS通过ng-route完毕主旨的路由功用实例详解
  • AngularJS监听路由的变动示例代码
  • 轻易解说AngularJS的Routing路由的定义与应用
  • angularjs ui-router中路由的二级嵌套
  • AngularJS基于ui-route落成深层路由的措施【路由嵌套】
  • AngularJS入门教程之路由体制ngRoute实例深入分析
  • AngularJS入门教程之路由与多视图详解
  • AngularJS达成选取路由切换视图的点子
  • AngularJS入门教程一:路由用法初探
//创建模块
var StuServices = angular.module("StuApp", ['ngRoute']);
//在URL、模板和控制器之前建立映射关系
function StuRouteConfig($routeProvider) {
  $routeProvider.when('/', {
    controller: 'ListController',
    templateUrl: 'list.html'
  }).when('/view/:id', {
    controller: 'DetailController',
    templateUrl: 'detail.html'
  }).otherwise({ redirectTo: '/' });
}
//配置路由,以便学生服务能够找到它
StuServices.config(StuRouteConfig);
//一些虚拟的学生信息
StudentList = [{ id: 0, name: '张三', sex: '男', age: 18 },
  { id: 1, name: '李四', sex: '女', age: 15 },
  { id: 2, name: '王五', sex: '男', age: 16 }
];
//列表模板
StuServices.controller("ListController", function ($scope) {
  $scope.StudentList = StudentList;
})
//详细模块:从路由信息(从URL中解析出来的)中获取邮件id,然后用它找到正确的邮件对象
StuServices.controller("DetailController", function ($scope, $routeParams) {
  $scope.Student = StudentList[$routeParams.id];
})

要利用NG里的路由,必须先在一定的模块中定义它:

更多关于AngularJS相关内容感兴趣的读者可查看本站专项论题:《AngularJS入门与晋级教程》及《AngularJS MVC架构总计》

.config(['$routeProvider', function($routeProvider){
//内容
}

仰望本文所述对大家AngularJS程序设计拥有协理。

由此when和otherwise多少个主意来开始展览路由的合作。(其实正是十一分上边UPRADOL前面/的字符)。最后把相称到的字符所对应的字段只怕文件放入带有ng-view 指令的DOM里面。

你恐怕感兴趣的篇章:

  • AngularJS入门教程一:路由用法初探
  • AngularJS 路由详解和省略实例
  • 运用AngularJS对路由实行安全性管理的点子
  • AngularJS路由达成页面跳转实例
  • AngularJS通过ng-route达成主题的路由功效实例详解
  • angularjs ui-router中路由的二级嵌套
  • AngularJS监听路由变化的法子
  • AngularJS基于ui-route完毕深层路由的点子【路由嵌套】
  • AngularJS入门教程之路由与多视图详解
  • AngularJS ui-router (嵌套路由)实例
  • 详解在Angularjs中ui-sref和$state.go怎么样传递参数
  • Angularjs中$http以post央浼通过音信体传递参数的兑现方式
  • AngularJS入门教程二:在路由中传递参数的主意解析

when里面有成都百货上千性质。里面能够安装调整器,调整器会同盟给相应的字段或文件。就疑似上边代码中listController调整器同样。

ng-view指令有无数平整:

在匹配路由时:

1、创设一个新的此时此刻功效域。
2、删除前一个功能域。
3、将目前的沙盘(调整器等)与当前新建的功效域关联起来。
4、假若有内置关联的控制器,将其与当期功效域关联起来。

更加的多关于AngularJS相关内容感兴趣的读者可查阅本站专项论题:《AngularJS指令操作技艺计算》、《AngularJS入门与进阶教程》及《AngularJS MVC架构计算》

盼望本文所述对大家AngularJS程序设计有着帮忙。

您可能感兴趣的稿子:

  • AngularJS 路由详解和省略实例
  • 行使AngularJS对路由举行安全性处理的办法
  • AngularJS路由达成页面跳转实例
  • AngularJS通过ng-route完成基本的路由成效实例详解
  • angularjs ui-router中路由的二级嵌套
  • AngularJS监听路由变化的方法
  • AngularJS基于ui-route完毕深层路由的办法【路由嵌套】
  • AngularJS入门教程之路由与多视图详解
  • AngularJS ui-router (嵌套路由)实例
  • AngularJS实现应用路由切换视图的不二秘籍
  • 详解在Angularjs中ui-sref和$state.go如何传递参数
  • Angularjs中$http以post央浼通过新闻体传递参数的兑现情势
  • AngularJS入门教程二:在路由中传递参数的议程分析
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:韦德娱乐1946网页版AngularJS删除路由中的,Angula