angularjs初学总结

用angularjs有一段时间了，今天就把常用的一些东西总结下。

AngularJS其实简单理解起来就是Javascript的一个框架，运用这个框架可以更方便的去操作HTML页面。

首先，如果要用这个框架，那么第一件事就是引入该库到网页中。（script）如：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

网页加载完毕的时候，AngularJS就自动启动了。

（一）范围指令

1、ng-app：指出AngularJS运行的作用域；

<div ng-app="myApp">

</div>

//在上面这个div范围内，AngularJS才会生效。

2、ng-controller：控制器

使用scope对象来访问变量。

<div ng-controller="taskAdd">

</div>

3、ng-module：绑定输入的值到应用程序。

<script>

　　var  app = angular.module("myApp", []);

　　app.directive("myDirective", function() {

　　 　　return {

　　　　　　template : "<p>我是自定义标签</p>"

　　　　};

　　});

</script>

4、ng-disabled：一般用在多选框和单选框，按钮不能选的居多。

5、ng-show   ng-if

 ng-show：DOM节点一直存在；

ng-if：DOM节点只有在元素显示的时候存在。（一般ID不重复可以选择ng-if）

（二）表达式

1、{{expression}}

2、ng-bind

区别：页面加载的时候，{{}}会直接显示在页面上，ng-bind不会显示。

（三）常用指令

1、ng-repeat：循环

<ul>

　　<li ng-repeat="x in names">

　　　　{{x}}

　　</li>

</ul>

2、ng-model： 绑定应用程序到页面；支持双向绑定。

<div ng-app="myApp" ng-controller="myCtroller">
    ng-model的值: <input ng-model="value">

<p>你输入的ng-model的值是：{{value}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtroller', function($scope) {
    $scope.value= "我是ng-model的值";
});
</script>

（三）scope模型

AngularJS应用由三部分组成：（1）视图（2）模型（3）控制器

视图就是HTML页面，view层；

模型就是绑定到页面的数据，module层；

控制器就是可以去实现方法属性的修改，也就是JS的实现。

（四）service服务

我用的service感觉多的就是数据。

（1）在service里面去写自己的数据，这个一般都是以json的形式给出，一般都是用循环呈现在页面中，或者用ng-show的条件去判断是否呈现；

（2）就是在service中去写一些请求，这些请求会调用Action，根据请求的响应获取动态的数据。