本文实例讲述了AngularJS实现使用路由切换视图的方法。分享给大家供大家参考,具体如下:
下面是一个简单的学生信息管理实例。
<强> 1,创建index . html主视图
在index . html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单。在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉角把视图显示在哪儿。
& lt; !DOCTYPE html>
& lt; html xmlns=" http://www.w3.org/1999/xhtml " ng-app=癝tuApp”比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>学生信息& lt;/title>
& lt;脚本src=" https://www.yisu.com/Scripts/angular.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/Scripts/angular-route.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/controllers.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; h2>学生信息& lt;/h2>
& lt; div ng-view> & lt;/div>
& lt;/body>
& lt;/html>
之前
<强> 2,创建list.html列表视图
& lt; table>
& lt; tr>
& lt; th>学号& lt;/th>
& lt; th>姓名& lt;/th>
& lt; th>性别& lt;/th>
& lt; th>年龄& lt;/th>
& lt;/tr>
StudentList & lt; tr ng-repeat=把痹?
& lt; td> {{student.id}} & lt;/td>
& lt; td> & lt; ng-href=" https://www.yisu.com/zixun//视图/{{student.id}}在{{student.name}} & lt;/a> & lt;/td>
& lt; td> {{student.sex}} & lt;/td>
& lt; td> {{student.age}} & lt;/td>
& lt;/tr>
& lt;/table>
之前
<强> 3,创建detail.html详细视图
& lt; div>
& lt; div> & lt; strong>学号:& lt;/strong> {{Student.id}} & lt;/div>
& lt; div> & lt; strong>姓名:& lt;/strong> {{Student.name}} & lt;/div>
& lt; div> & lt; strong>性别:& lt;/strong> {{Student.sex}} & lt;/div>
& lt; div> & lt; strong>年龄:& lt;/strong> {{Student.age}} & lt;/div>
& lt; a href=" https://www.yisu.com/zixun//弊４欠祷? lt;/a>
& lt;/div>
之前
<强> 4,创建controllers.js控制器脚本
//创建模块
var StuServices=角。模块(“StuApp”, [' ngRoute ']);//在URL,模板和控制器之前建立映射关系
函数StuRouteConfig (routeProvider美元){
routeProvider美元。当('/',{
控制器:“ListController”,
templateUrl:“list.html”
})。当(/视图/:id, {
控制器:“DetailController”,
templateUrl:“detail.html”
})。否则({redirectTo: '/'});
}//配置路由,以便学生服务能够找到它
StuServices.config (StuRouteConfig);//一些虚拟的学生信息
StudentList=[{id: 0,名字:“张三”,性别:男,年龄:18},
{id: 1,名字:“李四”,性别:女,年龄:15},
{id: 2、名称:“王五”,性别:男,年龄:16}
];//列表模板
StuServices。控制器(“ListController”功能(范围美元){
美元的范围。StudentList=StudentList;
}）//详细模块:从路由信息(从URL中解析出来的)中获取邮件id,然后用它找到正确的邮件对象
StuServices。控制器(“DetailController”功能(范围、routeParams美元){
美元的范围。学生=StudentList [$ routeParams.id];
}）
之前
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
