1.AngularJS API
- AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如: 比较对象, 迭代对象,转换对象.
- 全局 API 函数使用 angular 对象进行访问.
| API | 描述 |
|---|---|
| angular.lowercase() | 转换字符串为小写 |
| angular.uppercase() | 转换字符串为大写 |
| angular.isString() | 判断给定的对象是否为字符串，如果是返回 true |
| angular.isNumber() | 判断给定的对象是否为数字，如果是返回 true |
<div ng-app="myApp" ng-controller="myCtrl">
<!--ng-blur 指令: 当输入框失去焦点(onblur)时执行-->
<input type="text" ng-model="myInput" ng-blur="blur()" />
<p>输入的内容为: {{myInput}}</p>
<p>变成小写: {{x1}} </p>
<p>变成大写: {{x2}} </p>
<p ng-switch="x3">
是不是字符串:
<label ng-switch-when="true">是</label>
<label ng-switch-when="false">否</label>
<label ng-switch-when=""></label>
</p>
<p ng-switch="x4">
是不是数字:
<label ng-switch-when="true">是</label>
<label ng-switch-when="false">否</label>
<label ng-switch-when=""></label>
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.blur = function() {
if($scope.myInput =='') {
$scope.myInput = undefined;
}
if(!isNaN($scope.myInput)) {
$scope.myInput = Number($scope.myInput);
}
$scope.x1 = angular.lowercase($scope.myInput);
$scope.x2 = angular.uppercase($scope.myInput);
$scope.x3 = angular.isString($scope.myInput);
$scope.x4 = angular.isNumber($scope.myInput);
// 还可以直接使用 isNaN 判断
// $scope.x4 = !isNaN($scope.myInput);
}
})
</script>
AngularJS_API
2.AngularJS包含
- 在 AngularJS 中，你可以在 HTML 中使用
ng-include指令包含 HTML 文件. -
ng-include指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码 - 默认情况下，
ng-include指令不允许包含其他域名的文件。如果你需要包含其他域名的文件，你需要设置域名访问白名单(此外，你还需要设置服务端允许跨域访问).
<body ng-app="">
<div ng-include="'test.htm'"></div>
// 域名访问白名单
<div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div>
</body>
3.AngularJS 动画
- AngularJS 提供了动画效果，可以配合 CSS 使用。
- AngularJS 使用动画需要引入
angular-animate.min.js库。 - 应用中动画不宜太多，但合适的使用动画可以增加页面的丰富性，也可以更易让用户理解.
<head>
<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="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/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>
AngularJS_动画
如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中,如下所示.
<body ng-app="myApp">
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
ngAnimate模型的作用
ngAnimate 模型可以添加或移除 class类。
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画.
支持的指令:
| 指令 | 支持动画 |
|---|---|
| ng-show | add and remove (the ng-hide class value) |
| ng-class | add and remove |
| ng-view | enter and leave |
| ng-include | enter and leave |
| ng-if | enter and leave |
| ng-switch | enter and leave |
| ng-repeat | enter, leave and move |
| form | add and remove (dirty, pristine, valid, invalid & all other validations) |
| ng-model | add and remove (dirty, pristine, valid, invalid & all other validations) |
那么，怎么使用呢? 本文拿ng-repeat这个指令来做个介绍，其他的一些指令使用方式几乎相同，可类推。
ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程如下:
创建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默认状态
默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素
- ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
- 其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
- 当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
- 在动画完成后，HTML 元素的类集合将被移除。
例如： ng-hide 指令会添加以下类：
- ng-animate
- ng-hide-animate
- ng-hide-add (如果元素将被隐藏)
- ng-hide-remove (如果元素将显示)
- ng-hide-add-active (如果元素将隐藏)
- ng-hide-remove-active (如果元素将显示)
这样的效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger里面的transition-delay的样式时间。
具体情况还需要我们自己去实践.
参考:http://www.open-open.com/lib/view/open1437529447443.html
4.AngularJS 依赖注入
依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖.
一句话解释: --- 没事你不要来找我，有事我会去找你
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
- value
- factory
- service
- provider
- constant
4.1 value
Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）
4.2 factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建, 通常我们使用 factory 函数来计算或返回值。
<h2>AngularJS 简单应用</h2>
<div ng-app = "mainApp" ng-controller = "CalcController">
<p>输入一个数字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">X<sup>2</sup></button>
<p>结果: {{result}}</p>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.value("defaultInput", 5);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
});
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
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);
}
});
</script>
AngularJS_依赖注入
4.3 provider
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
/* 把上图示例中的 mainApp.factory 替换成如下代码,效果相同 */
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
4.4 constant
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");
5. AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
<body ng-app="myApp">
<h2>AngularJS 路由</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/product">产品</a></li>
<li><a href="#/news">新闻</a></li>
<li><a href="#/contact">联系我们</a></li>
</ul>
<div ng-view></div>
<script src="https://cdn.bootcss.com/angular.js/1.5.3/angular.min.js"></script>
<script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {template:'这是首页页面'})
.when('/product', {template:'这是产品页面'})
.when('/news', {template:'这是新闻页面'})
.when('/contact', {template:'这是联系我们页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
AngularJS_路由
实例解析：
- 1、载入了实现路由的 js 文件：
angular-route.js。 - 2、包含了 ngRoute 模块作为主应用模块的依赖模块:
angular.module('myApp',['ngRoute']) - 3、使用 ngView 指令:
<div ng-view></div>, 该 div 内的 HTML 内容会根据路由的变化而变化。 - 4、配置
$routeProvider, 用来定义路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。$routeProvider为我们提供了when(path,object) & otherwise(object)函数按顺序定义所有路由，函数包含两个参数: 第一个参数是 URL 或者 URL 正则规则, 第二个参数是路由配置对象。
路由设置对象语法规则如下：
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
| 参数 | 说明 |
|---|---|
| template | 在 ng-view 中插入简单的 HTML 内容 |
| templateUrl | 在 ng-view 中插入 HTML 模板文件 |
| controller | 在当前模板上执行的controller函数，生成新的scope |
| controllerAs | 为controller指定别名 |
| redirectTo | 重定向的地址 |
| resolve | 指定当前controller所依赖的其他模块 |
6.应用
一个简单的备忘录应用
<body ng-app="myApp" ng-controller="myCtrl">
<h2>我的备忘录</h2>
<form ng-submit="add()">
<input type="text" ng-model="myInput" size="50" placeholder="请输入备忘录内容..." />
<input type="submit" value="新增" />
</form>
<br>
<div ng-repeat="x in notelist">
<input type="checkbox" ng-model="x.done"/>
<span ng-bind="x.note"></span>
</div>
<button ng-click="remove()">删除记录</button>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.notelist = [{note:'我的第一条备忘录', done:false}];
$scope.add = function() {
$scope.notelist.push({note:$scope.myInput, done:false});
$scope.myInput = "";
};
$scope.remove = function() {
var oldList = $scope.notelist;
$scope.notelist = [];
angular.forEach(oldList, function(x) {
if (!x.done) $scope.notelist.push(x);
});
};
});
</script>
</body>
AngularJS_应用
