AngularJS学习第一篇 AngularJS基础知识

AngularJS学习第一篇，了解指令、过滤器等相关内容。

指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-

1、 ng-app：

定义了 AngularJS 应用程序的根元素；
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序；

<div ng-app="Demo"></div>

2、 ng-init：

为 AngularJS 应用程序定义了 初始值；
通常情况下，我们使用一个控制器或模块来代替它；

<div ng-app="Demo" ng-init="firstName='John'"> <p>我的名字是：{{ firstName }}</p></div>

3、 ng-model：

绑定 HTML 元素 到应用程序数据
同时也可以： 
     为应用程序数据提供类型验证（number、email、required）； 
     为应用程序数据提供状态（invalid、dirty、touched、error）；
     为HTML 元素提供 CSS 类；
     绑定 HTML 元素到 HTML 表单；

<div ng-app="Demo" ng-init="firstName='John'"> <p>姓名：<input type="text" ng-model="firstName"></p> <p>我的名字是：{{ firstName }}</p></div>

4、ng-repeat：对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

<div ng-app="Demo" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"> <ul>   <li ng-repeat="x in names">    {{ x.name + ', ' + x.country }}   </li> </ul></div> 

5、ng-controller：为应用程序添加控制器。请根据下面示例进行了解：

<div ng-app="Demo"> <h1 ng-controller="DemoCtrl">{{name}}</h1> <h1 ng-controller="DemoCtrl2">{{lastName}}</h1></div><script> // $scope表示作用区域，指向当前controller // 每个应用都有一个$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。用 rootscope 定义的值，可以在各个 controller 中使用。 var app = angular.module('Demo', []); app.controller('DemoCtrl', function($scope, $rootScope) {  $scope.name = "Volvo";  $rootScope.lastName = "Tom"; });</script>

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

6、ng-options：创建一个下拉列表，列表项通过对象和数组循环输出。