AngularJS学习

参考：RUNOOB.COM，菜鸟教程

1 实例：根据输入内容，直接展示内容。

引入：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

input内输入XX,直接下面显示  Hello XX

  一、Angular JS基础

1,1  表达式

<div ng-app ="">    //不可缺少  ng-app
  <p>我的第一个表达式： {{ 5 + 5 }}</p>   结果为10
</div>

1.2 指令

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p>  //John

1.3

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

1.4 验证

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress"ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

1.5

< style >

input.ng-invalid {
    background-color: lightblue;
}

< /style >
< body >

< form ng-app= "" name= "myForm" >
    输入你的名字:
    < input name= "myAddress" ng-model= "text" required >
< /form >

1.6

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

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

< ul >
    < li ng-repeat= "x in names" > {{x}} {{lastname}} < /li >
< /ul >

< /div >

< script >

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

app.controller( 'myCtrl', function($scope, $rootScope) {
    $scope.names = [ "Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});

< /script >

二、Angular JS指令

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app 定义应用程序，ng-model 元素值绑定，ng-bind 应用程序数据绑定到HTML视图；

ng-init 指令初始化 AngularJS 应用程序变量；data-ng-bind自定义属性。

ng-app定义应用，ng-controller定义了控制器。

ng-show 属性返回 true 的情况下显示

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

注：

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。