简介AngularJS的视图功能应用
更新时间：2015年06月17日 10:46:23 投稿：goldensun
这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以参考下
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”是用来设置该视图对应的控制器；
例子
下面的例子将展示上述所有指令。
testAngularJS.html
<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>
结果
在Web浏览器中打开textAngularJS.html。看到结果如下：
您可能感兴趣的文章:
相关文章
对angular 监控数据模型变化的事件方法$watch详解
今天小编就为大家分享一篇对angular 监控数据模型变化的事件方法$watch详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了angular4 获取wifi列表中文显示乱码问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家详细介绍了AngularJS学习第二篇，理解什么是AngularJS依赖注入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
这篇文章主要介绍了AngularJS实现的鼠标拖动画矩形框,涉及基于AngularJS的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了AngularJS手动表单验证的相关资料，AngularJS的表单验证大致有两种，一种是手动验证，一种是自动验证，本文重点介绍AngularJS自动表单验证，感兴趣的小伙伴们可以参考一下2016-02-02
今天小编就为大家分享一篇angular 未登录状态拦截路由跳转的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了angular表单验证的相关知识,angular来验证可以定义样式的，下文通过代码给大家实例介绍下，需要的朋友可以参考下2016-10-10
angular inputNumber指令输入框只能输入数字的实现
这篇文章主要介绍了angular inputNumber指令输入框只能输入数字的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要给大家介绍了关于Angular动画的2种方式以及添加购物车动画的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-08-08
使用JavaScript的AngularJS库编写hello world的方法
这篇文章主要介绍了使用JavaScript的AngularJS库编写hello world的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下2015-06-06
最新评论