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,根据请求的响应获取动态的数据。
 
 
 
原文地址:https://www.cnblogs.com/kellyPan/p/7823250.html