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);
    }
});