<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程---angular.js</title>
<meta name="keyword" content="菜鸟教程---angular.js">
<meta name="discription" content="菜鸟教程---angular.js">
</head>
<body>
<script>
第一章 Angular简介
AngularJS通过指令扩展了HTML, 且通过表达式绑定数据到HTMl
ng - app: 该指令告诉AngularJS, < div > 元素是AngularJS应用程序的 "所有者";
ng - model: 把输入域的值绑定到应用程序变量name
ng - bind: 把应用程序变量name绑定到某个段落的innerHTML
AngularJS:
1 使得开发现代的单一页面应用程序变的更加容易
2 把应用程序数据绑定到HTML元素
3 可以克隆和复制HMTL元素
4 隐藏显示HTML元素
5 可以在HTML元素 "背后"
添加代码
6 支持输入验证
第二章 表达式
使用表达式把数据绑定到HTML
1 表达式写在大括号内: { { expression } }
2 与ng - bind有一样的作用
第三章 指令
通过被称为指令的新属性开扩张HTML
通过内置的指令来为应用添加功能
允许自定义指令
ng - app: 初始化一个AngularJS应用程序, 定义了应用程序根元素, 网页加载完毕时会自动引导引用程序
ng - init: 初始化程序数据
ng - model: 把元素绑定到应用程序
/* <div ng-app="" ng-init="firstName = 'John'">
<input ng-model='firstName'>
</div>*/
ng - repeat: 重复一个HTML元素
/*
<li ng-repeat = 'x in names'>{{name}}</li>
*/
创建自定义指令:
app.directive("myDirective", function() {
return template: "<h1>自定义指令</h1>"
})
第四章 ng - model指令
用于绑定应用程序数据到HTML控制器(input, select, textarea) 的值
1 变量绑定
/*
<input ng-model="name">
$scope.name = "John Doe";
*/
2 双向数据绑定
/*
<input ng-mode="name">
<p>{{name}}</p>
*/
3 用户输入验证
/*
<input type="email" name = 'myAddress' ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
*/
4 应用状态
5 css类
第五章 Scope(作用域)
应用在HTML(视图) 和javascript(控制器) 之间的纽带
Scope是一个对象, 有可用的方法和属性
第六章 控制器
控制AngularJS应用程序数据
是常规的Javascript对象
由标准的javascript对象构造函数创建
1 外部文件的控制器:
在大型的应用程序中, 通常是把控制器存储在外部文件
第七章 过滤器
使用管道字符( | ) 添加到表达式和指令中
currency: 格式化数字为货币格式
filter: 从数组项中选择一个子集
lowercase: 格式化字符串为小写
orderBy: 根据某个表达式排列数组
uppercase 个数字符串为大写
第八章 服务
可以创建服务, 或使用內建服务
$location.absUrl(); //返回当前页面的URL地址
$http.get("welcome.htm").then(function(response) {
$scope.myWelcome = response.data;
}); //服务向服务器发送请求,应用响应拂去其穿送过来的数据
$timeout(function() {
$scope.myHeader = "How are you today?";
}, 2000); //计时器
$interval(function() {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000); //定时器
自定义服务:
app.filter('myFormat', ['hexify', function(hexify) {
return function(x) {
return hexify.myFunc(x);
};
}]);
$scope.hex = hexafy.myFunc(255); //调用
第九章 XMLHttpRequest
是AngularJS的一个核心服务, 用于读取远程服务器的数据
$http.get(url)
.success(function(response) {
$scope.names = response.records;
});
第十章 Select(选择框)
可以使用数组或者对象创建一个下拉列表选项
/*
<select ng-model="selectedName" ng-options="x for x in names"></select>
<option ng-repeat="x in names">{{x}}</option>
*/
第十一章 table(表格)
/*<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>*/
第十二章 SQL
第十三章 HTML DOM
为HTML元素的属性提供了绑定应用数据的指令
/*
<div ng-app="" ng-init="mySwitch=true">
<p><button ng-disabled="mySwitch">点我!</button></p>
<p><input type="checkbox" ng-model="mySwitch">按钮</p>
</div>*/
第十四章 事件
/*
<div ng-app="" ng-controller="myCtrl">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>
*/
第十五章 模块
模块定义了一个应用程序
模块是应用程序中不同部分的容器
模块是应用控制器的容器
控制器通常属于一个模块
/*
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
< /script>
*/
第十六章 表单
第十七章 输入验证
/*
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
*/
第十八章API(应用程序接口)
angular.lowercase();
.
.
.
.
第十九章 boostrap
第二十章 包含
/*
<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
*/
第二十一章 动画
/*
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
var app = angular.module('myApp', ['ngAnimate']);
*/
ngAnimate可以添加或移出class
ngAnimate模型并不能使用HTML元素产生动画, 但是ngAnimate会监听事件, 类型隐藏的显示HTML元素
如果事件发生ngAnimate就会使用预定于的clas来设置HTMLu元素的动画
添加 / 移出class的指令
/*
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
*/
第二十二章 依赖注入
是一种软件设计模式, 在这模式下, 一个或多个的依赖被注入到一个独立的对象中,
然后成为客户状态的一部分
1 value: 一个简单的javascript对象, 用于向控制器传递值
app.value("myData", "4343242");
app.controller("con", function($scope, myDate))
2 factory: 是一个函数用于返回值.在service和controller需要时创建
app.factory('mathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
})
app.service('CalcService', function(MathService) {
this.square = function(a) {
return MathService.multiply(a, a);
}
});
3 provider: 提供一个factory方法get(), 它用于返回value / service / factory
4 constant 用来在配置阶段传递数值, 注意这个敞亮在配置阶段是不可用的
第二十三章 路由
路由允许我们通过不同的url访问不同的内容
可以实现多视图单页面web应用
/*
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
*/
</script>
</body>
</html>