简介AngularJS的视图功能应用_AngularJS-js教程-PHP中文网

首页

web前端

js教程

简介AngularJS的视图功能应用_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:54 PM

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 id="Add-Student"> 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 id="Add-Student"> 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 id="AngularJS-Sample-Application">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 id="Add-Student"> Add Student </h2>
     {{message}}
   </script>
   <script type="text/ng-template" id="viewStudents.html">
     <h2 id="View-Students"> 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)

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

iOS 17 的待机模式将正在充电的 iPhone 变成家庭集线器Jun 06, 2023 am 08:20 AM

iOS17中的Apple正在引入待机模式，这是一种新的显示体验，专为水平方向的充电iPhone而设计。处于这个位置的iPhone能够显示一系列全屏小部件，将其变成一个有用的家庭中心。待机模式会在水平放置在充电器上运行iOS17的iPhone上自动激活。您可以查看时间、天气、日历、音乐控制、照片等信息。您可以通过可用的待机选项向左或向右滑动，然后长按或向上/向下滑动以进行自定义。例如，随着时间的流逝，您可以从模拟视图、数字视图、气泡字体和日光视图中进行选择，其中背景颜色会根据时间而变化。有一些选项

如何在Vue中实现可编辑的表格Nov 08, 2023 pm 12:51 PM

在许多Web应用程序中，表格是必不可少的一个组件。表格通常具有大量数据，因此表格需要一些特定的功能来提高用户体验。其中一个重要的功能是可编辑性。在本文中，我们将探讨如何使用Vue.js实现可编辑的表格，并提供具体的代码示例。步骤1：准备数据首先，我们需要为表格准备数据。我们可以使用JSON对象来存储表格的数据，并将其存储在Vue实例的data属性中。在本例中

理解SpringBoot和SpringMVC之间的差异及比较Dec 29, 2023 am 09:20 AM

对比SpringBoot与SpringMVC，了解它们的差异随着Java开发的不断发展，Spring框架已经成为了许多开发人员和企业的首选。在Spring的生态系统中，SpringBoot和SpringMVC是两个非常重要的组件。虽然它们都是基于Spring框架的，但在功能和使用方式上却有一些区别。本文将重点对比一下SpringBoot与Sprin

php如何使用CodeIgniter4框架？May 31, 2023 pm 02:51 PM

PHP是一种非常流行的编程语言，而CodeIgniter4是一种常用的PHP框架。在开发Web应用程序时，使用框架是非常有帮助的，它可以加速开发过程、提高代码质量、降低维护成本。本文将介绍如何使用CodeIgniter4框架。安装CodeIgniter4框架CodeIgniter4框架可以从官方网站（https://codeigniter.com/）下载。下

Laravel开发：如何使用Laravel View生成视图？Jun 14, 2023 pm 03:28 PM

Laravel是目前最流行的PHP框架之一，其强大的视图生成能力是让人印象深刻的一点。视图是Web应用程序中展示给用户的页面或视觉元素，其中包含HTML、CSS和JavaScript等代码。LaravelView允许开发者使用结构化的模板语言来构建网页，同时通过控制器和路由生成相应的视图。在本文中，我们将探讨如何使用LaravelView生成视图。一、什

Word视图有哪几种Mar 19, 2024 pm 06:10 PM

我猜想，很多同学都想学习word的排版技巧，但小编偷偷告诉大家，在学习排版技巧之前需要先了解清楚word视图，在Word2007中提供了5种视图供用户选择，这5种视图包括页面视图、阅读版式视图、Web版式视图、大纲视图和普通视图，今天和小编了解一下这5种word视图吧。1.页面视图页面视图可以显示Word2007文档的打印结果外观，主要包括页眉、页脚、图形对象、分栏设置、页面边距等元素，是最接近打印结果的页面视图。2.阅读版式视图阅读版式视图以图书的分栏样式显示Word2007文档，Office

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

Django框架中的视图详解Jun 17, 2023 am 10:18 AM

Django是一个高度可定制的Web框架，它提供了许多方便的工具和库，来帮助开发者快速创建高性能的、可扩展的Web应用程序。其中，视图是Django框架中最重要的组成部分之一。视图负责处理来自客户端的请求，并返回相应的响应。在本文中，我们将深入探讨Django框架中的视图，并介绍如何使用它来创建高性能、可定制的Web应用程序。一、视图的基本概念在Django

See all articles