angularjs学习（一） 顶 原

angularjs是一个JavaScript框架,使用它可以直接引入js文件即可。引入方式：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>   <--!可以通过这个地址直接将加载的内容保存为js文件即可-->
<script type="text/javascript" src="js/angular.min.js"></script>

下载地址

1. 表达式

写在大括号内{{expression }}，表达式里面的数据需要我们自己往里赛值,数据主要为以下写法：

<p>我的第一个表达式: {{ 5 + 5 }}</p>
<p>总价： {{ quantity * cost }}</p>
<p>总价： <span ng-bind="quantity * cost"></span></p>

2.指令

以前缀ng-开始，常见指令集合（了解即可）：

ng-mode       将表单控件和当前作用域的属性进行绑定
ng-init         该指令被调用时会初始化内部作用域
ng-app        定义了 AngularJS 应用程序的 根元素
ng-controller    控制器
ng-bind        和{{}}差不多
ng-repeat        遍历集合

自定义指令

<runoob-directive></runoob-directive>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

3. 作用域scope

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上。当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。 $rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

4.控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。AngularJS 控制器是常规的 JavaScript 对象。

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

个人理解：控制器相当于一个调度器，用于管理所有的控件

5.过滤器

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

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

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

常见过滤器

currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

自定义过滤器

var app = angular.module('myApp', [])
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

6.服务

AngularJS 中你可以创建自己的服务，或使用内建服务。服务是一个函数或对象，可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

自定义服务

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});