AngularJS基础

创建模块

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

添加控制器

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

AngularJS 指令

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

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

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

创建自定义的指令

指令本质上就是AngularJS拓展具有自定义功能的HTML元素的途径;你可以通过以下方式来调用指令：元素名、属性、类名、注释

<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});

以下实例方式也能输出同样结果:

元素名:<runoob-directive></runoob-directive>
类名:<div class="runoob-directive"></div>
注释:<!-- directive: runoob-directive -->

AngularJS 过滤器

currency 格式化数字为货币格式。

filter 从数组项中选择一个子集。

lowercase 格式化字符串为小写。

orderBy 根据某个表达式排列数组。

uppercase 格式化字符串为大写。

date 时间格式化

number 数字格式化（保留小数）

limitTo 截取（limitTo :6 // 从前面开始截取6位）

实例：

<p>姓名为 {{ lastName | uppercase }}</p>
向指令添加过滤器：
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

过滤输入

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

自定义过滤器

<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.msg = "Runoob";
 }); 
app.filter('reverse', function() { 
    //可以注入依赖 return function(text) { 
        return text.split("").reverse().join(""); 
    } 
});

AngularJS 服务(Service)

$location服务

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

$http 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});
$http({
	method: 'GET',
	url: '/someUrl'
}).then(function successCallback(response) {
		// 请求成功执行代码
	}, function errorCallback(response) {
		// 请求失败执行代码
});
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

$timeout 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

AngularJS 表单

数据绑定

Input 控件使用 ng-model 指令来实现数据绑定。

<input type="text" ng-model="firstname">

通过以上代码应用有了一个名为 firstname 的属性。它通过 ng-model 指令来绑定到你的应用。firstname 属性可以在 controller 中使用：

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});

Checkbox（复选框）

<form>
    Check to show a header:
    <input type="checkbox" ng-model="myVar">
</form>
 
<h1 ng-show="myVar">My Header</h1>
myVar值为true/false

单选框

我们可以使用 ng-model 来绑定单选按钮到你的应用中。单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
实例
根据选中的单选按钮，显示信息：
<form>
    选择一个选项:
    <input type="radio" ng-model="myVar" value="dogs">Dogs
    <input type="radio" ng-model="myVar" value="tuts">Tutorials
    <input type="radio" ng-model="myVar" value="cars">Cars
</form>

下拉菜单

使用 ng-model 指令可以将下拉菜单绑定到你的应用中。ng-model 属性的值为你在下拉菜单选中的选项：
实例
根据选中的下拉菜单选项，显示信息：
<form>
选择一个选项:
<select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
</select>
</form>

AngularJS 事件

ng-click 指令

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

隐藏 HTML 元素

ng-hide 指令用于设置应用部分是否可见。
ng-hide="true" 设置 HTML 元素不可见。
ng-hide="false" 设置 HTML 元素可见。

显示 HTML 元素

ng-show 指令可用于设置应用中的一部分是否可见 。
ng-show="false" 可以设置 HTML 元素 不可见。
ng-show="true" 可以以设置 HTML 元素可见。

AngularJS 依赖注入

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，它可以去除对依赖关系的硬编码，从而可以在运行时改变甚至移除依赖关系。

从功能上看，依赖注入会事先自动查找依赖关系，并将注入目标告知被依赖的资源，这样就可以在目标需要时立即将资源注入进去。

一句话 --- 没事你不要来找我，有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value
factory
service
provider
constant

value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

通常我们使用 factory 函数来计算或返回值。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");