AnglarJS(一)基础语法

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]">
        
        <p>Expense on Books : {{cost * quantity}} Rsp>

        
        <p>Hello {{student.firstname + " " + student.lastname}}!p>

        
        <p>Roll No: {{student.rollno}}p>

        
        <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>
    
    <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>

你可能感兴趣的:(6AnglarJS)