AngularJS 入门1-基础_angularjs基础

AngularJS 入门1-基础

 

 1.简介及使用方法

AngularJS 可以干什么？

答：AngularJS 能够非常容易的将input，select，button，textarea的内容提取并应用到HTML中，即解决静态网页技术在构建动态应用上的不足。AngularJS是为了克服HTML在构建应用上的不足而设计的。

没有AngularJS 时，我们使用以下技术来实现HTML的动态效果：

  类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有:jQuery等

  框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

 

AngularJS 的使用方法

可通过 script 标签添加到网页中：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

 

2.一个最简单的AngularJS 实例

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

注1：ng-app 指令定义一个 AngularJS 应用程序。因为只有一个ng-app，故未命名。

注2：ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

注3：{{name}}是AngularJS 表达式，把数据绑定到 HTML。

 

3.表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例

 

4.AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

AngularJS 通过被称为 指令 的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

ng-repeat 指令会重复一个 HTML 元素：重复 HTML 元素

//范例1：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

//范例2：

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

 

创建自定义的指令

你可以使用 .directive 函数来添加自定义的指令。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

调用指令的方法

限制使用

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种，默认值为 EA

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

 

5.AngularJS 模型

AngularJS 由三部分组成：

·View(视图), 即 HTML。

·Model(模型), 当前视图中可用的数据，链接视图与控制器的纽带。

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

①ng-model 指令

用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

注：数据绑定是双向的，当HTML中input内容变化时，变量name变化；在<script>中修改name值，反映到HTML中，实现了同步。

②scope(作用域)

scope 是模型，是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";         //用ng-model定义的变量就是scope的属性
    $scope.sayHello = function() {  //用ng-click定义的函数就是scope的方法
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

根作用域 $rootScope

用 $rootScope 定义的值，可以在各个 controller 中使用。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

6.AngularJS 控制器

 AngularJS 控制器 控制 AngularJS 应用程序的数据。

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
  名: <input type="text" ng-model="firstName"><br>
  姓: <input type="text" ng-model="lastName"><br><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 + " " + $scope.lastName;
    }
});
</script>

解析：

HTML中

①ng-app="myApp" 定义一个AngularJS应用程序，应用程序在 <div> 内运行。

② ng-controller="myCtrl" 定义一个AngularJS控制器。

③{{fullName()}} 中fullName()是控制器定义的函数(方法)。

<script>中

①创建模块var app = angular.module('myApp', []);

注：AngularJS 模块

·模块定义了一个应用程序。

·模块是不同应用程序的容器。

·控制器通常属于一个模块。

·通过 AngularJS 的 angular.module 函数来创建模块：
②添加控制器

app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

注1：AngularJS 使用$scope 对象来调用控制器。

注2：控制器在作用域中创建了两个属性 ( firstName 和 lastName )

注3：控制器在作用域中创建了一个方法 ( fullName )

 

7.AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

范例：

注：names是数组

[ {"name":"Alfreds",country":"Germany"} , {"name":"Ana","country":"Mexico"} , {"name":"Moreno","country":"Mexico"} ]

 

8.ng-disabled和ng-show

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

<div ng-app="" ng-init="mySwitch=true">
<button ng-disabled="mySwitch">点我!</button> <br/>
<input type="checkbox" ng-model="mySwitch">按钮 <br/>
{{ mySwitch }}
</div>

 

注：复选框，ng-model=true/false

ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">
  <p ng-show="true">我是可见的。</p>
  <p ng-show="false">我是不可见的。</p>
</div>
<div ng-app="" ng-init="hour=13">
  <p ng-show="hour > 12">我是可见的。</p>
</div>

9.AngularJS 事件

以ng-click 指令为例

实例一：

<div ng-app="" ng-controller="myCtrl">
  <button ng-click="count = count + 1">点我！</button>
  <p>{{ count }}</p>
</div>

实例二：

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John",
  $scope.lastName = "Doe"
  $scope.myVar = false;
  $scope.toggle = function() {
    $scope.myVar = !$scope.myVar;
    };
});

 

10.AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

比较对象 | 迭代对象 | 转换对象

全局 API 函数使用 angular 对象进行访问。

 

11.AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

实例：

<body ng-app="">
  <div ng-include="'runoob.htm'"></div>
</body>

runoob.htm 文件代码：

<h1>菜鸟教程</h1>
<p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>

ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码

sites.htm 文件代码，含有ng命令：

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Url }}</td>
  </tr>
</table>

sites.htm 文件代码，含有js代码：

<div ng-app="myApp" ng-controller="sitesCtrl">
  <div ng-include="'sites.htm'"></div>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
    $http.get("sites.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>

 

12.AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。

使用动画需要引入 angular-animate.min.js 库：

<script src="....../libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

实例：

<html>
<head>
  <meta charset="utf-8">
  <style>
    div {
      transition: all linear 0.5s;
      background-color: lightblue;
      height: 100px;
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
    }
    .ng-hide {
      height: 0;
      width: 0;
      background-color: transparent;
      top:-200px;
      left: 200px;
    }
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
 
<body ng-app="ngAnimate">
  <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
  <div ng-hide="myCheck"></div>
</body>
</html>