本文实例讲述了angularjs实现使用路由切换视图的方法。分享给大家供大家参考,具体如下:
下面是一个简单的学生信息管理实例。
注意:除了引用angular.js之外,还要引用angular-route.js。
1、创建主视图
在主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单。在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉angular把视图显示在哪儿。
<!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>
2、创建list.html列表视图
<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>
3、创建detail.html详细视图
<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>
4、创建controllers.js控制器脚本
//创建模块 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]; })
更多关于angularjs相关内容感兴趣的读者可查看本站专题:《angularjs入门与进阶教程》及《angularjs mvc架构总结》
希望本文所述对大家angularjs程序设计有所帮助。
如对本文有疑问, 点击进行留言回复!!
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论