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

ng-view

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

使用

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

   ng-app="mainApp">  ...      ng-view>

ng-template

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

使用

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

   ng-app="mainApp">  ...      type="text/ng-template" id="addStudent.html">        <h2> Add Student h2>           {{message}}         

$routeProvider

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

使用

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

   ng-app="mainApp">  ...      type="text/ng-template" id="addStudent.html">        <h2> Add Student h2>           {{message}}         

使用

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

   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
         </span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">Angular JS Views</span><span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);">      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">      src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js">         

AngularJS Sample Application

ng-app="mainApp">

href="#addStudent">Add Student

href="#viewStudents">View Students

ng-view>
type="text/ng-template" id="addStudent.html"> <h2> Add Student h2> {{message}} type="text/ng-template" id="viewStudents.html"> <h2> View Students h2> {{message}}

结果

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

AngularJS Views
 


如若转载,请注明出处:http://www.osbaike.net/article-show-id-8743.html

声明:本站所有转载文章仅用于学习和交流目的,如有侵犯您的版权,请联系我们处理。
分享到:QQ空间新浪微博腾讯微博人人网微信
252阅读 | 0评论
你的回应
开源小组
内容管理(CMS)
JoomlaDrupalCmsEasyDedeCms帝国CMSJTBC(CMS)SupeSite
论坛(BBS)
ThinkSAASDiscuzphpBBphpwind
在线商城(SHOP)
ecshopMagentoDESTOON B2BoscommerceShopNCOpenCartPrestaShop
问卷调查(SURVEY)
LimeSurvey
在线学习(LEARNING)
Moodle
客户关系管理(CRM)
VtigerCRMSugarCRM
博客(BLOG)
WordPressX-SpaceBo-Blog
办公自动化(OA)
fengoffice小微OAGroup-Office
在线考试(EXAM)
phpems
单点登录(SSO)
UCenter
人力资源(HRM)
OrangeHRM
云存储/网盘(CLOUD)
ownCloudNextcloud
项目管理(PM)
禅道
BUG管理(BUG)
Mantis
最新文章
联系我们