AnglarJS(一)基础语法

xiaoxiao2021-02-28  61

AngularJS组件

ng-app : 指令定义和链接AngularJS应用程序到HTML。ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。

AngularJS指令

ng-app : 指令定义和链接AngularJS应用程序到HTML。ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。

ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。

ng-controller指令:控制器

ng-init 指令 :ng-init 指令初始化一个AngularJS应用程序的数据。

ng-repeat 指令:ng-repeat 指令重复html元素集合中的每个项目。常用于数组的迭代便利。

AngularJS表达式

<div ng-app="" ng-init="quantity=2;cost=30; student={firstname:'李',lastname:'刚',rollno:101};marks=[82,91,78,77,64]"> <!-- 表达式1:使用数字 --> <p>Expense on Books : {{cost * quantity}} Rs</p> <!-- 表达式2:使用字符串 --> <p>Hello {{student.firstname + " " + student.lastname}}!</p> <!-- 表达式3:使用对象 --> <p>Roll No: {{student.rollno}}</p> <!-- 表达式4:使用数组 --> <p>Marks(Math): {{marks[3]}}</p> </div>

AngularJS-MVC设计模式

<script type="text/javascript"> //3.控制器Controller (函数) function helloController($scope){ $scope.greeting = { //1.模型model:(数据) text:'hello,angularJS' }; }; </script> </head> <body ng-app> <!-- 2.视图view --> <h1 ng-controller="helloController"> 调用控制器方法:{{greeting.text}} </h1> </body> </html>

AngularJS模块儿化

将控制器定义在模块儿下,将属性和函数定义在控制器下

<script type="text/javascript"> //定义模块 var app = angular.module("pyg",['用于引入插件']); //把函数定义模块下 app.controller('helloController',function($scope){ //定义添加方法 $scope.add = function(a,b){ return parseInt(a)+parseInt(b); } //定义查询方法 $scope.findAll = function(){ return "this is findAll"; } }) </script> </head> <body ng-app="pyg"> <div ng-controller="helloController"> a:<input type="text" ng-model="a"/> {{a}}<br> b:<input type="text" ng-model="b"/> {{b}}<br> 打印结果:{{add(a,b)}}<br> 调用查询方法:{{findAll()}} </div> </body>

AngularJS控制器

studentController如下:

<script> function studentController($scope) { $scope.student = { firstName: "yiibai", lastName: "com", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script>

studentController 定义 scopeJavaScript s c o p e 作 为 J a v a S c r i p t 对 象 参 数 。 scope 表示应用程序,使用studentController对象。

$scope.student 是studentController对象的属性。

firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。

fullName 是$scope.student对象的函数,它的任务是返回合并的名称。

在fullName函数中,我们现在要学生对象返回组合的名字。

作为一个说明,还可以定义控制器对象在单独的JS文件,并把有关文件中的HTML页面。

现在可以使用ng-model或使用表达式如下使用studentController学生的属性。

Enter first name: <input type="text" ng-model="student.firstName"><br> Enter last name: <input type="text" ng-model="student.lastName"><br> <br> You are entering: {{student.fullName()}}

AngularJS-事件

ng-click

ng-dbl-click

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-keydown

ng-keyup

ng-keypress

ng-change

ng-model:数据双向绑定

ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。

<title>angularJS数据双向绑定</title> <script type="text/javascript" src="plugins/angularjs/angular.min.js"></script> </head> <body ng-app> 姓名:<input type="text" ng-model="username"/> 用户姓名:{{username}}

ng-init 指令:数据的初始化

ng-init 指令 :ng-init 指令初始化一个AngularJS应用程序的数据。

<body ng-app ng-init="myname='唐僧去西天取经不得不说故事?'"> 姓名:<input type="text" ng-model="myname"><br> 获取值:{{myname}} </body>

ng-repeat 指令:ng-repeat 指令重复html元素集合中的每个项目。常用于数组的迭代便利。 循环数组

<script type="text/javascript"> //定义模块 var app = angular.module("pyg",[]); //把函数定义模块下 app.controller('userController',function($scope){ //定义变量 $scope.list = [12,23,56,88,99]; }) </script> </head> <body ng-app="pyg"> <div ng-controller="userController"> <h1 ng-repeat="x in list"> {{x}} </h1> </div> </body>

循环对象

<script type="text/javascript"> //定义模块 var app = angular.module("pyg",[]); //把函数定义模块下 app.controller('userController',function($scope){ //定义变量 $scope.list = [{name:'张三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56}]; }) </script> </head> <body ng-app="pyg"> <div ng-controller="userController"> <h1 ng-repeat="entity in list"> {{entity.name}} // {{entity.shuxue}} // {{entity.yuwen}} </h1> </div> </body>
转载请注明原文地址: https://www.6miu.com/read-2622536.html

最新回复(0)