首页 技术 正文
技术 2022年11月14日
0 收藏 799 点赞 4,973 浏览 1207 个字

概念(1)


AngularJS 应用

  • AngularJS 模块(Module) 定义了 AngularJS 应用。
  • AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
  • ng-app指令定义了应用, ng-controller 定义了控制器。

eg:

<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

AngularJS 模块

var app = angular.module('myApp', []);
  • 可以通过angular.module()方法操作模块
  • 注意:该方法只有在传入两个参数时才会创建模块,否则为获取已有模块!获取模块var app = angular.module('myApp')

AngularJS 控制器

app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
  • AngularJS 应用程序被控制器控制。
  • ng-controller 指令定义了应用程序控制器。
  • 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数创建。

应用解析:

AngularJS 应用程序由 ng-app 定义。应用程序在div内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。

控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)

AngularJS 指令

  • AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
  • ng-app 指令初始化一个 AngularJS 应用程序。
  • ng-init 指令初始化应用程序数据。
  • ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

完整的指令内容可以参阅 AngularJS 参考手册

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,493
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,907
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,740
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,495
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,133
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,297