你的位置:首页 > Java教程

[Java教程]AngularJs基础


AngularJS

                         指令模块

ng-app:指令告诉AngularJS,<div>元素是AngularJS应用程序的“所有者”

ng-model指令把输入域的值绑定到应用程序变量name.

na-bind指令把应用程序name绑定到某个段落的Innerhtml。

ng-init:指令初始化AngularJS应用程序变量

 

example:

<div ng-app="">

  <p>名字 : <input type="text" ng-model="name"></p>

  <h1>Hello {{name}}</h1>

</div>

1.AngularJS表达式:{{expression}}

可以是{{5+5}}或者{{firstName+”“+”lastName}};

2. AngularJS模块(Module)定义了AngularJS应用;

AngularJS模块(controller)用于控制AngularJS应用;

ng-app指令定义了应用;

ng-controller定义了控制器;

ng-repeat指令是用来重复一个HTML元素。

eg:

<body>

<div ng-app=”” ng-init=”name[{name:’john’,country:’Norway’},{name:’hega’,country:’Chain’},{name:’kai’,country:’American’}]“>

<ul>

  <li ng-repeat=”x in name”>/*注意这个地方书写规范*/

{{x.name+’,’+x.country}}

</li>

</ul>

3. .directive函数是用来添加自定义的指令;如果需要调用自定义的指令;HTML元素上需要添加自定义的指令名;如下所示:

<body>

 <scripy>

var app=angular.module(“myapp”,[]);

app.directive(“runoobDirective”,function(){

   return{

     restrict:”A”,

     template:”<h1>自定义指令</h1>”

};

});

</script>

</body>

在上述表达式中使用的restrict值可以有如下几种:

E:只限元素名使用;

A:  只限属性使用

C:只限类名使用

M:只限注释使用

注意:restrict默认值为SA,既可以通过元素名和属性名来调用指令;

                                  模型模块 

例子1:双向绑定

<body>

<div ng-app=”myApp” ng-controller=”myCtrl”>

名字:<input ng-model=”name”>

<h1>你输入了:{{name}}</h1>

</div>

 

<script>

 var app=angular.module(‘myApp’,[]);

 app.controller(‘myCtrl’,function($scripe){

$scope.name=”John Doe”;

});

</script>

 

</script>

例子2:输入验证

<body>

  <form ng-app=”” name=”myForm”>

   Email:

   <input type=”email” name=”myAddress” ng-model=”text”>

   <span ng-show =” myForm.myAddress.$error.email”>不是合法邮箱地址</span>

</form>

效果如下:

 

ng-model指令基于他们状态为HTML元素提供CSS类;

eg:<style>

input.ng-invalid{

background-color:lightblue;}</style>

<body>

<form ng-app=”” name=”myForm”>

 请输入你的名字:

<input name=”myName” ng-model=”text required>

</form>

效果:

输入之前:

输入之后:

ng-model:指令根据表单域的状态添加/移出以下类:

ng-empty

ng-not-empty

ng-touched

ng-untouched

ng-valid

ng-invalid

ng-pending

ng-pristing

                             scope作用域

  1. 在使用AngularJS创建控制器时,可以讲$scope对象最为一个参数传递:
  2. AngularJS应用组成如下:

View(视图),即HTML;

Model(模型),当前视图中可用的数据

Controller(控制器),即JavaScript函数,可以添加或者修改属性

  1. scope是JavaScript的对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。
  2. 根作用域:所有的应用有一个$rootScope, 它可以作用整个应用中,因此也是各个controller中scope的桥梁,用rootscope定义的值,可以在各个Controller中使用:

例子:<body>

 

<div ng-app="myApp" ng-controller="myCtrl">

 

<h1>姓氏为 {{lastname}} 家族成员:</h1>

 

<ul>

    <li ng-repeat="x in names">{{x}} {{lastname}}/*根作用始终存在*/

</ul>

</div>

 

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {

    $scope.names = ["Emil", "Tobias", "Linus"];

    $rootScope.lastname = "Refsnes";/*注意他的定义方式*/

});

</script>

对于控制器,可以有方法(变量和函数)

<body>

<div ng-app=”myApp” ng-controller=”personCtrl”>

名:<input type=”text” ng-moddel=”firstname”>

< br>

姓:<input type=”text” ng-moddel=”lastname”>

<br>

姓名:{{fullname}}

</div>

<script>

var app=angular.module(‘myApp’,[]);

app.controller(‘personCtrl’,function($scope){

$scope.firstname=”john”;
$scope.lastname=”Doe”;

$scope.fullname=function(){

return $scope.firstname+” “+$lastname;

}/*此处为

});