AngularJS视图 ng-view
2024-09-05 03:34:32
AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。
ng-view
ng-view 标记只是简单地创建一个占位符，是一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。
使用
定义一个div与ng-view在主模块中。
<div ng-app="mainApp">
...
<div ng-view></div> </div>
ng-template
ng-template 指令是用来创建使用script标签的HTML视图。它包含一个用于由$routeProvider映射控制器视图“id”属性。
使用
定义类型作为主模块中 ng-template 的脚本块。
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script> </div>
$routeProvider
$routeProvider是组网址的配置，将它们映射相应的HTML页面或 ng-template，并附加一个控制器使用相同键的服务。
使用
定义类型作为主模块中 ng-template 的脚本块。
<div ng-app="mainApp">
...
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script> </div>
使用
定义主模块的脚本块，并设置路由配置。
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
以下是在上面的例子中需要考虑的重要问题
$routeProvider被定义为使用关键字作为'$routeProvider“下mainApp模块的配置功能；
$routeProvider当定义了URL“/addStudent”映射到“addStudent.html”。 addStudent.html应存在于相同的路径主要的html 页面。如果htm页面没有定义，那么ng-template被id=“addStudent.html”使用。我们已经使用了ng-template；
“otherwise”是用来设置的默认视图；
“conlloer”是用来设置该视图对应的控制器；
例子
下面的例子将展示上述所有指令。
<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp">
<p><a href="#addStudent">Add Student</a></p>
<p><a href="#viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.html">
<h2> View Students </h2>
{{message}}
</script>
</div> <script>
var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]); mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
}); mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
引入其它页面
<body>
<div ng-app="mainApp">
<p><a href="#about">About</a></p>
<p><a href="#contact">Contact</a></p>
<div ng-view></div>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/about', {
templateUrl: 'page-about.html',
controller: 'AddStudentController'
}).
when('/contact', {
templateUrl: 'page-contact.html',
controller: 'ViewStudentsController'
});
}]); mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
</script>
</body>
最新文章
- java BigInteger使用
- swift 存储属性和计算属性 set{}和get{} didSet{}和willSet{}
- java 数据结构
- 单独批次性任务采用MySQL定时器解决需求
- 《IT运维之道》
- 【HDOJ】4704 Sum
- 3 MySQL SQL基础
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
- sql Server 创建临时表 嵌套循环 添加数据
- M2贡献分分配方案
- 利用selenroid扩展uiautoamtor的webview解析能力
- 万恶之源 - Python 自定义模块
- non linear processor
- Bypass 360主机卫士SQL注入防御（多姿势）
- 在Eclipse中配置Maven插件
- android拾遗——AlarmManager的使用
- Delphi Code Editor 之 几个特性(转）
- 三）Wiring up jobs using triggers and the SchedulerFactoryBean
- iOS 滑动比较
- BestCoder #58 div1