您的位置：首页 > Web前端 > AngularJS

Angular随笔第一课

2016-03-01 18:59 549 查看

一、调用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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航