一、 环境搭建
1. Mac、Linux、Windows系统中安装java运行环境,(进行单元测试时使用)
java -version
用来检查java是否安装
2. 安装nodejs
node -v
3. 安装web浏览器及文本编辑器
二、 开始
1. 实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
2. Angular是一个javascript框架,引入方式:script标签(可在线可下载)
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
AngularJS把应用程序数据绑定到 HTML 元素
AngularJS可以克隆和重复 HTML 元素
AngularJS可以隐藏和显示 HTML 元素
AngularJS可以在 HTML 元素"背后"添加代码
AngularJS支持输入验证
ng-directives:扩展html
ng-app: 定义一个AngularJS应用程序的根元素,告诉angular,div元素师angular程序的“所有者”
ng-init:为AngularJS应用程序定义了初始值。(多用控制器货模块来代替)
ng-model:把html元素绑定到应用程序数据(还可以为数据提供类型验证、为数据提供状态、为html提供css类、绑定html元素到html表单),把输入域值绑定到应用程序变量name
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
ng-bind:把程序数据绑定到html视图,把应用程序变量name绑定到某个段落的innerHTML
ng-repeat:重复一个html元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
创建自定义指令,使用.directive函数来添加自定义的指令;调用自定义指令,html元素上需要添加自定义指令名;使用驼峰法命名指令,以“-”作为元素标签
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
4. AngularJS表达式
写在{{}}中间;
把数据绑定到html,同ng-bind
将表达式写在输出位置
可以包含文字、运算符、变量等表达式 {{5+5}}
5. AngularJS应用
AngularJS模块定义了AngularJS应用
var app = angular.module('myApp', []);
AngularJS控制器用于控制AngularJS应用
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
ng-app指令定义了应用,ng-controller定义了控制器
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
scope是一个javascript对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。Scope在MVC模型中属于M层,包含当前视图中可用的数据
作用范围:
1)根作用域:$rootScope,所有应用都有,它可以作用在ng-app指令包含的所有html元素中。
7. 控制器【controller层】
AngularJS控制器控制AngularJS应用程序的数据,是常规的javascript对象
当应用程序比较大的时候,控制器可以像js外部文件一样,储存在外部文件中。
8. 过滤器
用于转换数据。(currency, filter, lowercase, orderBy, uppercase)
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
AngularJS中,服务是一个函数货对象,在应用中可以使用。angular自己本身有内置服务。(个人觉得有些像内置对象)
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();//location是服务,返回当前页面url
});
$location: 获取url
$http: 服务向服务器发送请求,应用相应服务器传回来的数据
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
$timeout: 对应window.setTimeout
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
$interval: 对应window.setInterval
10. 前后端交互
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'https://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});
11. AngularJS对html dom的操作
1)ng-disabled:指令直接绑定应用程序数据到html的disabled属性
<button ng-disabled="mySwitch">点我!</button>
2)ng-show:隐藏或显示一个html
<p ng-show="true">show/p>
<p ng-show="false">disable</p>
3)ng-hide:隐藏或显示html元素
<p ng-hide="true">不可见</p>
<p ng-hide="false">可见</p>
1)ng-click指令
<button ng-click="count = count + 1">点我!</button>
13. AngularJS模块
模块定义一个应用程序,是应用程序中不同部分的容器,模块是应用控制器的容器,控制器同城属于一个模块
添加模块:
var app = angular.module("myApp", []);
添加模块后添加控制器。
个人感觉很多地方还是和vue挺像的,可以互相帮助理解。