当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 简介AngularJS的视图功能应用

简介AngularJS的视图功能应用

2019年05月29日  | 移动技术网IT编程  | 我要评论

 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。看到结果如下：

2015617104059841.jpg (560×429)

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网