创建模块
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");
浙公网安备 33010602011771号