欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

ng-view用法

ng-view用法

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

https://blog.csdn.net/u010006309/article/details/52779869

http://www.runoob.com/angularjs/angularjs-routing.html

https://blog.csdn.net/viewyu12345/article/details/79131956  $state和$stateParams

 

ng-view

开启视图,只是一个占位符,没有值  例:<div ng-view></div>

ng-template

创建视图,通过script标签,类型为ng-template,包含了一个$routeProvider映射控制的id属性,id指向一个html页面

$routeProvider

 

主要网址的配置,是一个angular对象,将他们映射相应的html页面或者ng-template

使用

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

var app = angular.module("app", ['ngRoute']);

      

 app.config(['$routeProvider',

        function($routeProvider) {

           $routeProvider.

              when('/addStudent', {

                 templateUrl: 'addStudent.html',

                 controller: 'AddStudentController'

              }).

              when('/viewStudents', {

                 templateUrl: 'viewStudents.html',

                 controller: 'ViewStudentsController'

              }).

              otherwise({

                 redirectTo: '/addStudent'

              });

        }]);

 

 通过config来配置,配置项为数组,回调函数的参数为$routeProvider,利用$routeProvider的when方法,参数1为请求路径,参数2为对象

包含了templateURL指向视图,controller为该视图的的控制器,otherwise 指向默认视图,如果页面不存在,渲染视图可以用template:(标签+内容)



AngularJS视图 ng-view

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”是用来设置该视图对应的控制器;

例子

下面的例子将展示上述所有指令。

复制代码
<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>
复制代码

 

引入其它页面

复制代码
<body>
    <div ng-app="mainApp">
        <p><a href="#about">About</a></p>
        <p><a href="#contact">Contact</a></p>
        <div ng-view></div>
    </div>
    <script>
        var mainApp = angular.module("mainApp", ['ngRoute']);
        mainApp.config(['$routeProvider',
         function($routeProvider) {
             $routeProvider.
                when('/about', {
                    templateUrl: 'page-about.html',
                    controller: 'AddStudentController'
                }).
                when('/contact', {
                    templateUrl: 'page-contact.html',
                    controller: 'ViewStudentsController'
                });
         }]);

        mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "This page will be used to display add student form";
        });
        </script>
</body>
复制代码

 

分类: AngularJs


来自  https://www.cnblogs.com/ideacore/p/7457485.html


普通分类: