搜索文档
首页
HTML/CSS
JavaScript
服务端开发
Java教程
移动端
数据库
当前位置:
首页
JavaScript
AngularJS 教程
AngularJS 基础教程
源代码
清空
点击运行
<html> <head> <title>Angular JS Views</title> <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script> <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular-route.min.js"> </script> </head> <body> <h2>AngularJS-视图应用示例</h2> <div ng-app = "mainApp"> <p><a href = "https://www.div.cn/run/angularjs-views-1.html#addStudent" target="_self">新增学生</a></p> <p><a href = "https://www.div.cn/run/angularjs-views-1.html#viewStudents" target="_self">查看学生</a></p> <div ng-view></div> <script type = "text/ng-template" id = "addStudent.htm"> <h2>新增学生</h2> {{message}} </script> <script type = "text/ng-template" id = "viewStudents.htm"> <h2>查看学生</h2> {{message}} </script> </div> <script> var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }) .when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }) .otherwise({ redirectTo: '/addStudent' }); }]); mainApp.controller('AddStudentController', function($scope) { $scope.message = "此页面将用于显示添加学生表格"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "此页面将用于显示所有学生"; }); </script> </body> </html>
运行结果