腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

AngularJS 視圖詳解及示例代碼

更新時(shí)間：2016年08月17日 10:13:28 作者：李嘉圖

本文主要介紹AngularJS 視圖，這里整理了相關(guān)知識(shí)，并附代碼示例和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下

AngularJS支持通過在單個(gè)頁面上的多個(gè)視圖的單頁應(yīng)用。要做到這一點(diǎn)AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服務(wù)。

ng-view

ng-view 標(biāo)記只是簡(jiǎn)單地創(chuàng)建一個(gè)占位符，是一個(gè)相應(yīng)的視圖(HTML或ng-template視圖)，可以根據(jù)配置來放置。

使用

定義一個(gè)div與ng-view在主模塊中。

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

</div>

ng-template

ng-template 指令是用來創(chuàng)建使用script標(biāo)簽的HTML視圖。它包含一個(gè)用于由$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是組網(wǎng)址的配置，將它們映射相應(yīng)的HTML頁面或 ng-template，并附加一個(gè)控制器使用相同鍵的服務(wù)。

使用

定義類型作為主模塊中 ng-template 的腳本塊。

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

</div>

使用

定義主模塊的腳本塊，并設(shè)置路由配置。

 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被定義為使用關(guān)鍵字作為'$routeProvider“下mainApp模塊的配置功能；

$routeProvider當(dāng)定義了URL“/addStudent”映射到“addStudent.html”。 addStudent.html應(yīng)存在于相同的路徑主要的html 頁面。如果htm頁面沒有定義，那么ng-template被id=“addStudent.html”使用。我們已經(jīng)使用了ng-template；

“otherwise”是用來設(shè)置的默認(rèn)視圖；

“conlloer”是用來設(shè)置該視圖對(duì)應(yīng)的控制器；

例子

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

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>

結(jié)果

在Web瀏覽器中打開textAngularJS.html?？吹浇Y(jié)果如下：