举例讲解AngularJS中的模块_AngularJS-js教程-PHP中文网

AngularJS Sample Application

首页

web前端

js教程

举例讲解AngularJS中的模块_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:54 PM

angularjs 模块

AngularJS支持模块化的方法。模块用于单独的逻辑表示服务，控制器，应用程序等，并保持代码的整洁。我们在单独的js文件中定义的模块，并将其命名为按照module.js文件形式。在这个例子中，我们要创建两个模块。

Application Module - 用于初始化控制器应用程序
Controller Module - 用于定义控制器

应用模块

mainApp.js

var mainApp = angular.module("mainApp", []);

登录后复制

在这里，我们已经声明使用 angular.module 功能的应用程序 mainApp 模块。我们已经通过了一个空数组给它。此数组通常包含从属模块。
控制器模块

studentController.js

mainApp.controller("studentController", function($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fees:500,
   subjects:[
     {name:'Physics',marks:70},
     {name:'Chemistry',marks:80},
     {name:'Math',marks:65},
     {name:'English',marks:75},
     {name:'Hindi',marks:67}
   ],
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
});

登录后复制

在这里，我们已经声明采用studentController模块的mainApp.controller功能的控制器。
使用模块

<div ng-app="mainApp" ng-controller="studentController">
..
<script src="mainApp.js"></script>
<script src="studentController.js"></script>

登录后复制

在这里，我们使用 ng-app 指令和控制器采用ng-controller指令应用模块。我们已经在主要的HTML页面导入mainApp.js和studentController.js。
示例

下面的例子将展示上述所有模块。

testAngularJS.htm

<html>
  <head>
 <title>Angular JS Modules</title>
 <style>
 table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
 }
 table tr:nth-child(odd) {
  background-color: #f2f2f2;
 }
 table tr:nth-child(even) {
  background-color: #ffffff;
 }
 </style>
 </head>
 <body>
 <h2 id="AngularJS-Sample-Application">AngularJS Sample Application</h2>
 <div ng-app="mainApp" ng-controller="studentController">
 <table border="0">
 <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
 <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
 <tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
 <tr><td>Subject:</td><td>
 <table>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr ng-repeat="subject in student.subjects">
    <td>{{ subject.name }}</td>
    <td>{{ subject.marks }}</td>
  </tr>
 </table>
 </td></tr>
 </table>
 </div>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
 <script src="mainApp.js"></script>
 <script src="studentController.js"></script>
</body>
</html>

登录后复制

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

mainApp.controller("studentController", function($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fees:500,
   subjects:[
     {name:'Physics',marks:70},
     {name:'Chemistry',marks:80},
     {name:'Math',marks:65},
     {name:'English',marks:75},
     {name:'Hindi',marks:67}
   ],
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
});

登录后复制

输出

在Web浏览器打开textAngularJS.htm。看到结果如下。

201561794640977.png (644×450)

本站声明

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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7364

Java教程

1628

CakePHP 教程

1353

Laravel 教程

1266

PHP教程

1214

显示更多

Related knowledge

WLAN扩展模块已停止[修复] Feb 19, 2024 pm 02:18 PM

如果您的Windows计算机上的WLAN扩展模块出现问题，可能会导致您与互联网断开连接。这种情况常常让人感到困扰，但幸运的是，本文提供了一些简单的建议，可以帮助您解决这个问题，让您的无线连接重新正常运行。修复WLAN扩展模块已停止如果您的Windows计算机上的WLAN可扩展性模块已停止工作，请按照以下建议进行修复：运行网络和Internet故障排除程序禁用并重新启用无线网络连接重新启动WLAN自动配置服务修改电源选项修改高级电源设置重新安装网络适配器驱动程序运行一些网络命令现在，让我们来详细看

WLAN可扩展性模块无法启动 Feb 19, 2024 pm 05:09 PM

本文详细介绍了解决事件ID10000的方法，该事件表明无线局域网扩展模块无法启动。在Windows11/10PC的事件日志中可能会显示此错误。WLAN可扩展性模块是Windows的一个组件，允许独立硬件供应商(IHV)和独立软件供应商(ISV)为用户提供定制的无线网络特性和功能。它通过增加Windows默认功能以扩展本机Windows网络组件的功能。在操作系统加载网络组件时，WLAN可扩展性模块作为初始化的一部分启动。如果无线局域网扩展模块遇到问题无法启动，您可能会在事件查看器的日志中看到错误消

Python常用标准库及第三方库2-sys模块 Apr 10, 2023 pm 02:56 PM

一、sys模块简介前面介绍的os模块主要面向操作系统，而本篇的sys模块则主要针对的是Python解释器。sys模块是Python自带的模块，它是与Python解释器交互的一个接口。sys 模块提供了许多函数和变量来处理 Python 运行时环境的不同部分。二、sys模块常用方法通过dir()方法可以查看sys模块中带有哪些方法：import sys print(dir(sys))1.sys.argv-获取命令行参数sys.argv作用是实现从程序外部向程序传递参数，它能够获取命令行参数列

Python编程：详解命名元组（namedtuple）的使用要点 Apr 11, 2023 pm 09:22 PM

前言本文继续来介绍Python集合模块，这次主要简明扼要的介绍其内的命名元组，即namedtuple的使用。闲话少叙，我们开始——记得点赞、关注和转发哦~ ^_^创建命名元组Python集合中的命名元组类namedTuples为元组中的每个位置赋予意义，并增强代码的可读性和描述性。它们可以在任何使用常规元组的地方使用，且增加了通过名称而不是位置索引方式访问字段的能力。其来自Python内置模块collections。其使用的常规语法方式为：import collections XxNamedT

如何在 Python 中使用 DateTime Apr 19, 2023 pm 11:55 PM

所有数据在开始时都会自动分配一个“DOB”(出生日期)。因此，在某些时候处理数据时不可避免地会遇到日期和时间数据。本教程将带您了解Python中的datetime模块以及使用一些外围库，如pandas和pytz。在Python中，任何与日期和时间有关的事情都由datetime模块处理，它将模块进一步分为5个不同的类。类只是与对象相对应的数据类型。下图总结了Python中的5个日期时间类以及常用的属性和示例。3个有用的片段1.将字符串转换为日期时间格式，也许是使用datet

Python 的 import 是怎么工作的？ May 15, 2023 pm 08:13 PM

你好，我是somenzz，可以叫我征哥。Python的import是非常直观的，但即使这样，有时候你会发现，明明包就在那里，我们仍会遇到ModuleNotFoundError，明明相对路径非常正确，就是报错ImportError:attemptedrelativeimportwithnoknownparentpackage导入同一个目录的模块和不同的目录的模块是完全不同的，本文通过分析使用import经常遇到的一些问题，来帮助你轻松搞定import，据此，你可以轻松创建属

Ansible工作原理详解 Feb 18, 2024 pm 05:40 PM

Ansible工作原理从上面的图上可以了解到：管理端支持local、ssh、zeromq三种方式连接被管理端，默认使用基于ssh的连接，这部分对应上面架构图中的连接模块；可以按应用类型等方式进行HostInventory（主机清单）分类，管理节点通过各类模块实现相应的操作，单个模块，单条命令的批量执行，我们可以称之为ad-hoc；管理节点可以通过playbooks实现多个task的集合实现一类功能，如web服务的安装部署、数据库服务器的批量备份等。playbooks我们可以简单的理解为，系统通过

一文总结特征增强&个性化在CTR预估中的经典方法和效果对比 Dec 15, 2023 am 09:23 AM

在CTR预估中，主流都采用特征embedding+MLP的方式，其中特征非常关键。然而对于相同的特征，在不同的样本中，表征是相同的，这种方式输入到下游模型，会限制模型的表达能力。为了解决这个问题，CTR预估领域提出了一系列相关工作，被称为特征增强模块。特征增强模块根据不同的样本，对embedding层的输出结果进行一次矫正，以适应不同样本的特征表示，提升模型的表达能力。最近，复旦大学和微软亚洲研究院合作发布了一篇关于特征增强工作的综述，对比了不同特征增强模块的实现方法及其效果。现在，我们来介绍一

See all articles

举例讲解AngularJS中的模块_AngularJS

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题