AngularJS 视图详解及示例代码

AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务。

ng-view

ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置。

使用

定义一个div与ng-view在主模块中。

rush:js;">

ng-template

ng-template 指令是用来创建使用script标签的HTML视图。它包含一个用于由$routeProvider映射控制器视图“id”属性

使用

定义类型作为主模块中 ng-template 的脚本块。

rush:js;">
Add Student {{message}}

$routeProvider

$routeProvider是组网址的配置,将它们映射相应的HTML页面或 ng-template,并附加一个控制器使用相同键的服务。

使用

定义类型作为主模块中 ng-template 的脚本块。

rush:js;">
Add Student {{message}}

使用

定义主模块的脚本块,并设置路由配置。

rush:js;"> 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

结果

在Web浏览器中打开textAngularJS.html。看到结果如下:

以上就是对AngularJS 视图资料的整理,后续继续补充相关资料,谢谢大家对本站的支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...