【4858美高梅】视图详解及示范代码,简单介绍AngularJS的视图成效使用

By admin in 4858美高梅 on 2019年7月7日

AngularJS援助通过在单个页面上的多个视图的单页应用。要实现那点AngularJS提供ng-view
和 ng-template指令,以及 $routeProvider 服务。

 AngularJS帮助通过在单个页面上的几个视图的单页应用。要到位这点AngularJS提供ng-view
和 ng-template指令,以及 $routeProvider 服务。
ng-view

AngularJS 视图详解及示例代码,angularjs示例代码

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当定义了UEscortL“/addStudent”映射到“addStudent.html”。
addStudent.html应存在于同一的路子首要的html
页面。要是htm页面没有概念,那么ng-template被id=“addStudent.html”使用。大家早已应用了ng-template;

“otherwise”是用来安装的暗中同意视图;

【4858美高梅】视图详解及示范代码,简单介绍AngularJS的视图成效使用。“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。看到结果如下:

4858美高梅 1

如上正是对AngularJS
视图资料的整理,后续继续补充有关质地,多谢大家对本站的支撑!

视图详解及示例代码,angularjs示例代码
AngularJS支持通过在单个页面上的四个视图的单页应用。要成功这点AngularJS提供ng-view
和 n…

简单介绍AngularJS的视图作用使用

   那篇作品首要介绍了AngularJS的视图作用利用,包涵ng-view和ng-template以及$routeProvider的选用,以及
$routeProvider 供给的爱人能够参见下

  AngularJS协助通过在单个页面上的八个视图的单页应用。要产生这点AngularJS提供ng-view
和 ng-template指令,以及 $routeProvider 服务。

  ng-view

  ng-view
标志只是简短地创建多个占位符,是三个相应的视图(HTML或ng-template视图),能够依据安插来放置。

  使用

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

  ?

1

2

3

4

5

<div ng-app="mainApp">

<div ng-view></div>

 

</div>

  ng-template

  ng-template
指令是用来创制使用script标签的HTML视图。它包涵多少个用以由$routeProvider映射调节器视图“id”属性。

  使用

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

  ?

1

2

3

4

5

6

7

8

<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 的脚本块。

  ?

1

2

3

4

5

6

7

8

<div ng-app="mainApp">

<script type="text/ng-template" id="addStudent.html">

<h2> Add Student </h2>

{{message}}

</script>

 

</div>

  使用

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

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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当定义了U揽胜极光L“/addStudent”映射到“addStudent.html”。
addStudent.html应存在于一致的不二等秘书诀首要的html
页面。假如htm页面未有概念,那么ng-template被id=“addStudent.html”使用。我们早已运用了ng-template;

4858美高梅 ,  “otherwise”是用来安装的暗许视图;

  “conlloer”是用来设置该视图对应的调节器;

  例子

  上边的例证将显示上述全数指令。

  testAngularJS.html

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

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

4858美高梅 2

那篇小说主要介绍了AngularJS的视图成效应用,包含ng-view和ng-template以及$routeProvider的行使,以及
$routeProvider 供给…

ng-view

ng-view
标识只是轻便地开创几个占位符,是四个应和的视图(HTML或ng-template视图),能够依照计划来放置。
使用

ng-view
标识只是简短地开创四个占位符,是二个对应的视图(HTML或ng-template视图),能够依附计划来放置。

概念一个div与ng-view在主模块中。

使用

<div ng-app="mainApp">
...
  <div ng-view></div>

</div>  

概念一个div与ng-view在主模块中。

ng-template

<div ng-app="mainApp">
...
  <div ng-view></div>

</div>  

ng-template
指令是用来成立使用script标签的HTML视图。它涵盖五个用来由$routeProvider映射调整器视图“id”属性。
使用

ng-template

概念类型作为主模块中 ng-template 的脚本块。

ng-template
指令是用来创设使用script标签的HTML视图。它含有一个用来由$routeProvider映射调节器视图“id”属性。

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

</div>  

使用

$routeProvider

概念类型作为主模块中 ng-template 的脚本块。

$routeProvider是组网站的配置,将它们映射相应的HTML页面或
ng-template,并附加七个调节器接纳同样键的劳动。
使用

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

</div>  

概念类型作为主模块中 ng-template 的脚本块。

$routeProvider

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

</div>  

$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'
        });
     }]);

使用

   

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

以下是在上面的事例中必要思量的要紧难题

 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当定义了U中华VL“/addStudent”映射到“addStudent.html”。
    addStudent.html应存在于一致的路子主要的html
    页面。若是htm页面未有概念,那么ng-template被id=“addStudent.html”使用。大家早就运用了ng-template;
  •     “otherwise”是用来安装的私下认可视图;
  •     “conlloer”是用来安装该视图对应的调整器;

以下是在下边包车型大巴事例中要求思索的显要难点

例子

$routeProvider被定义为使用首要字作为’$routeProvider“下mainApp模块的安排效果与利益;

上面包车型客车事例将显得上述全体指令。
testAngularJS.html

$routeProvider当定义了U索罗德L“/addStudent”映射到“addStudent.html”。
addStudent.html应存在于同一的路线主要的html
页面。假使htm页面未有定义,那么ng-template被id=“addStudent.html”使用。大家已经使用了ng-template;

<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>

“otherwise”是用来安装的暗中同意视图;

结果

“conlloer”是用来安装该视图对应的调整器;

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

例子

4858美高梅 3

上边包车型大巴事例将展现上述全部指令。

你也许感兴趣的稿子:

  • AngularJS入门教程之路由与多视图详解
  • AngularJS基于ui-route完毕深层路由的法子【路由嵌套】
  • AngularJS通过ng-route达成基本的路由功用实例详解
  • AngularJS监听路由的扭转示例代码
  • AngularJS
    路由详解和精炼实例
  • AngularJS
    路由和模板实例及路由地址简化方法(不可不看)
  • 运用AngularJS对路由进行安全性管理的方法
  • Angularjs制作简便的路由作用demo
  • AngularJS入门教程之多视图切换用法示例
  • 模板视图和AngularJS之间争辩的消除办法
  • AngularJS
    视图详解及示例代码
  • AngularJS实现利用路由切换视图的艺术

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

4858美高梅 4

上述便是对AngularJS
视图资料的重新整建,后续继续补充相关资料,多谢大家对本站的支撑!

您或者感兴趣的篇章:

  • AngularJS入门教程之路由与多视图详解
  • AngularJS基于ui-route完结深层路由的方法【路由嵌套】
  • AngularJS通过ng-route达成大旨的路由成效实例详解
  • AngularJS监听路由的扭转示例代码
  • AngularJS
    路由详解和简单实例
  • AngularJS
    路由和模板实例及路由地址简化方法(非看不可)
  • 动用AngularJS对路由实行安全性管理的情势
  • Angularjs制作轻便的路由成效demo
  • AngularJS入门教程之多视图切换用法示例
  • 模板视图和AngularJS之间争执的解决格局
  • 简单介绍AngularJS的视图作用选拔
  • AngularJS完毕利用路由切换视图的艺术

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有