您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

简介AngularJS的视图功能应用_AngularJS

2024/3/6 4:53:26发布23次查看
angularjs支持通过在单个页面上的多个视图的单页应用。要做到这一点angularjs提供ng-view 和 ng-template指令,以及 $routeprovider 服务。
ng-view
ng-view 标记只是简单地创建一个占位符,是一个相应的视图(html或ng-template视图),可以根据配置来放置。
使用
定义一个div与ng-view在主模块中。
...

ng-template
ng-template 指令是用来创建使用script标签的html视图。它包含一个用于由$routeprovider映射控制器视图“id”属性。
使用
定义类型作为主模块中 ng-template 的脚本块。
...

$routeprovider
$routeprovider是组网址的配置,将它们映射相应的html页面或 ng-template,并附加一个控制器使用相同键的服务。
使用
定义类型作为主模块中 ng-template 的脚本块。
...

使用
定义主模块的脚本块,并设置路由配置。
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
angular js views angularjs sample application add student
view students

结果
在web浏览器中打开textangularjs.html。看到结果如下:
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product