Angular随笔第一课
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular随笔第一课相关的知识，希望对你有一定的参考价值。
一、调用angular
- 加载angular.js库（可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js，也可以下载到本地，楼主我就是下载到本地来引入代码的）
- 使用ng-app指令告诉angular应该管理dom中的哪一部分。
二、使用ng-app申明angular的边界
你可以使用ng-app指令告诉angular应该管理页面的哪一块，如果你正在构建一款纯angular应用，那么你应该把ng-app指令写在<html>标签中。
Eg:<html ng-app></html>
或者可以让angular只管理页面中的一部分
Eg:<html><div ng-app></div></html>
现在写一个简单的列子
<!DOCTYPE html> <html ng-app = ‘myApp‘> <head> <title></title> <meta name="name" content="content" charset="utf-8"> <script src="angular-1.4.2/angular.js" type="text/javascript"></script> <script type="text/javascript"> angular.module(‘myApp‘,[]).controller(‘textController‘,function($scope){ $scope.someText = ‘you have started your journey‘; }) </script> </head> <body ng-controller="textController"> <p>{{someText}}</p> </body> </html>
在页面中会显示 you have started your journey。
三、显示文本
在angular中，数据绑定有2种实现方法，一种是前面写的{{}}花括号的形式，另外一中就是使用ng-bind属性的指令形式。<p ng-bind=”someText”></p>
在书写中，我们会推荐使用第二种数据绑定的方法,原因如下：
- 在使用花括号的时候，第一个加载的页面，也就是应用中的index.html，其未被渲染的模板可能被用户看到。而使用第二种方法的视图就不会遇到这个问题了。（原因是：浏览器需要首先加载html页面，渲染他，然后angular才有机会把他解释成你期望看到的页面）
四、表单输入
我们可以使用ng-model属性把元素绑定到你的模型属性上
<form ng-controller="some">
<input type="checkbox" ng-model="youcheck">
</form>
- 当用户选中了复选框之后，some中的$socpe.youcheck=true,而反选复选框会让$socpe.youcheck=false;
- 如果你在some中把$socpe.youcheck的值设置为true,那么UI中的复选框就会变成选中的状态，反之就不会选中。
举一个列子
<form ng-controller="startUp">
Strat: <input type="text" ng-change="number()" ng-model="startnum">
add : {{needed}}
</form>
<script type="text/javascript">
angular.module(‘myApp‘,[]).controller(‘startUp‘,function($scope){
$scope.startnum = 0;
$scope.number = function(){
$scope.needed = $scope.startnum * 10;
}
})
</script>
当我们在文本框输入值的时候，我们会看到add的值是随时改变的。但是这样的话，就会出现一个问题，即如果还有其他输入框也绑定到模型中的这个属性上，会怎样呢？
我们可以引入$scope中的$watch()的函数----可以调用$watch()函数来监视一个表达式，当这个表达式发生改变时就会调用一个回调函数。
下面我们用这一技术重写
<script type="text/javascript">
angular.module(‘myApp‘,[]).controller(‘startUp‘,function($scope){
$scope.startnum = 0;
number = function(){
$scope.needed = $scope.startnum * 10;
}
$scope.$watch(‘startnum‘,number);
})
</script>
在某些情况下，你不想一有变化就立刻做出反应，直到用户告诉你他已经准备好了，列如发出一条确认信息之后（如下所示，是在form表单上面使用的列子，当表单提交的时候可以执行这个函数）
<form ng-controller="form" ng-submit="request()">
start:<input ng-change="computer()" ng-model="startform">
add: {{addform}}
<button>click me</button>
</form>
<script type="text/javascript">
angular.module(‘myApp‘,[]).controller(‘form‘, function ($scope) {
$scope.computer = function () {
$scope.addform = $scope.startform * 10;
}
$scope.request = function () {
window.alert(‘sorry‘);
}
})
</script>
同时，在提交表单的时候，ng-submit还会自动阻止浏览器执行默认的post操作
onclick ----ng-click ondbclick-----ng-dbclick
以上是关于Angular随笔第一课的主要内容，如果未能解决你的问题，请参考以下文章