微信小程序编程_AngularJS完成使用路由切换视图的

所属分类：行业新闻发布时间：2021-01-12
AngularJS实现使用路由切换视图的方法       这篇文章主要介绍了AngularJS实现使用路由切换视图的方法,结合学生信息管理系统为例分析了使用controllers.js控制器来切换视图的具体步骤与相关操作技巧,需要的朋友可以参考下

本文实例讲述了AngularJS实现使用路由切换视图的方法。分享给大家供大家参考，具体如下：

下面是一个简单的学生信息管理实例。

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

<主视图

<主视图中，我们将会把多个视图共有的东西都放在里面，例如菜单。在这个例子中，我们仅仅把应用的标题放在里面，然后再用ng-view指令来告诉Angular把视图显示在哪儿。

 !DOCTYPE html 
 html xmlns="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
<列表视图

 table 
 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
<详细视图

 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',
 '
 }).when('/view/:id', {
 controller: 'DetailController',
 '
 }).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程序设计有所帮助。


新闻资讯