AngularJS

AngularJS四大特征

  1. MVC模式
  2. 双向绑定
  3. 依赖注入
  4. 模块化设计

AngularJS 表达式

AngularJS 表达式写在双大括号内{{expression }}，可以包含文字、运算符和变量

AngularJS 指令

最常用的指令有

  1. ng-app定义应用程序的根元素
  2. ng-click定义元素被点击时的行为
  3. ng-controller定义应用的控制器对象
  4. ng-if如果条件为false移除HTML元素
  5. ng-init定义应用的初始化值
  6. ng-model绑定HTML控制器的值到应用数据
  7. ng-repeat定义集合中每项数据的模板

ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app=angular.module('myApp',[]);
            app.controller('myController',function($scope){
                $scope.name="张三";
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        我叫：<input ng-model="name" />
    </body>
</html>

双向绑定，在修改输入域的值时，AngularJS表达式中 属性的值也将改变

<body ng-app="myApp" ng-controller="myController">
        我叫：<input ng-model="name" />
        <h1>你叫：{{name}}</h1>
</body>

AngularJS Scope(作用域)

AngularJS MVC模式中scope是模型

  • Model(模型):数据,其实就是 angular 变量($scope.XX);
  • View(视图): 数据的呈现,Html+Directive(指令);
  • Controller(控制器):操作数据,就是 function,数据的增删改查;

scope是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

AngularJS 过滤器

过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写

自定义过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app=angular.module('myApp',[]);
            app.controller('myController',function($scope){
                $scope.msg = "好好休息天天向上"
            });
            app.filter('reverse',function(){
                return function(text){
                    return text.split("").reverse().join("");
                }
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <input ng-model="msg" />
        反转: {{msg | reverse}}
    </body>
</html>


AngularJS 服务(Service)

$location 服务

  1. 获取当前完整的url路径 $location.absUrl()
  2. 获取当前url的参数的序列化json对象 $location.search()
  3. 获取当前url路径(当前url#后面的全部内容) $location.url()
  4. 获取当前url的子路径(也就是当前url#后面的内容,不包括参数) $location.path()

$http 服务

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myController', function($scope, $http) {
                $http.get("http://www.runoob.com/try/angularjs/data/sites.php").then(function(response) {
                    $scope.names = response.data.sites;
                });
            });
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myController">
            <ul>
                <li ng-repeat="x in names">
                    {{ x.Name + ', ' + x.Country }}
                </li>
            </ul>
        </div>
    </body>
</html>

AngularJS Select(选择框)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myController', function($scope) {
                $scope.names = ["百度", "腾讯", "阿里巴巴", "网易" ,"京东"];
            });
        </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myController">
            超级品牌：<select ng-model="selectedName" ng-options="x for x in names"></select>
        </div>
    </body>
</html>

AngularJS 表格

<body ng-app="myApp" ng-controller="myController">
    <table border="1">
      <tr ng-repeat="x in names">
        <td>{{ x}}</td>
      </tr>
    </table>
</body>

显示序号 ($index)

<body ng-app="myApp" ng-controller="myController">
    <table border="1">
      <tr ng-repeat="x in names">
        <td>{{$index}}</td>
        <td>{{x}}</td>
      </tr>
    </table>
</body>

AngularJS 模块

通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。

//base.js
var app = angular.module('myApp', []);
//myController.js
app.controller('myController', function($scope) {
    $scope.names = ["百度", "腾讯", "阿里", "网易" ,"京东"];
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJS</title>
        <script src="js/angular.min.js"></script>
        <script src="js/base.js"></script>
        <script src="js/myController.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <table border="1">
          <tr ng-repeat="x in names">
            <td>{{$index}}</td>
            <td>{{x}}</td>
          </tr>
        </table>
    </body>
</html>

Angular简单总结的更多相关文章

  1. Angular简单应用剖析

    这一篇我们将一起感受学习一个小型的.活生生的应用,而不是继续深入分析哪些单个的特性.我们将会一起感受一下,前面所讨论过的所有片段如何才能真正的组合在一起,形成一个真实的.可以运行的应用. GutHub ...

  2. Angular 简单的Get

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  3. Angular 简单的Post

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  4. Angular.的简单运用

    从script引用angular文件.开始编写angular事件: 在angular文件中添加属性: ag-xxxx;初始化使用: ng-app="name"; 没有这个属性就不会 ...

  5. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  6. vue和angular的区别：

    相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...

  7. vue，react，angular

    一.Vue.js:     其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库.     Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...

  8. vue，angular，react框架对比

    转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...

  9. vue.js和angular.js的区别

    关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单 关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态 ...

随机推荐

  1. html跨域获取数据

    a.com下的a.html,需要嵌入b.com下的b.html.这时建一个静态页面c.html将c.html放到a.com服务器中.b.html在嵌入c.html.这样,将参数值传输到c.html中, ...

  2. java 将long类型的数值转无符号数

    由于JAVA中基本数据类型均为有符号数,而且最大数据类型long为8字节假如long为负数时,最高位为1,转为无符号数时会超出long的取值范围,所以转换规则如下: 方法: public static ...

  3. java 理解有符号数和无符号数

    转至:http://jinguo.iteye.com/blog/212049 理解有符号数和无符号数负数在计算机中如何表示呢? 这一点,你可能听过两种不同的回答. 一种是教科书,它会告诉你:计算机用“ ...

  4. wxpyhon 对话框

    Python内置了好多定义好了的对话框供我们使用,这里先介绍三个最常用的: 1 Message dialog 2 Text entry 3 Choosing from a list 当然python还 ...

  5. day011-网络编程

    1. 网络编程概述 1.1  网络编程三要素 地址.端口.协议 1.1.1 IP地址:网络中设备的唯一标识. IPV4格式:xxx.xxx.xxx.xxx由四段数字组成,每一段数字由八位二进制数字组成 ...

  6. 配置一个高效快速的Git环境

    username and email editor difftool and mergetool alias 可以直接修改~/.gitconfig文件,也可以用命令配置一个可以实际使用的高效的Git环 ...

  7. 最重要的“快捷键” IntelliJ IDEA

    转载:http://www.youmeek.com/intellij-idea-part-iii-hotkeys-explain/ @IntelliJ IDEA第三部分视频教程:最重要的“快捷键”专讲 ...

  8. 【LOJ6052】「雅礼集训 2017 Day11」DIV（杜教筛）

    点此看题面 大致题意: 求\(1\sim n\)内所有满足\(a>0\)的约数\(a+bi\)的\(a\)之和. 解题思路 首先,我们设\(x=(a+bi)(c+di)(1\le x\le n) ...

  9. 【转】 Android Fragment 真正的完全解析（下）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和 ...

  10. http://codeforces.com/gym/100623/attachments E题

    http://codeforces.com/gym/100623/attachments E题第一个优化它虽然是镜像对称,但它毕竟是一一对称的,所以可以匹配串和模式串都从头到尾颠倒一下第二个优化,与次 ...