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. 14_synchronized深入

    [脏读] 对于对象同步和异步的方法,我们在设计程序的时候,一定要考虑问题的整体,不然会出现不一致的错误,最经典的错误的就是脏读(dirty read). [实例代码] package com.higg ...

  2. Android端访问服务器核心代码

  3. UIRecorder安装与使用

    继vue单元测试,将进行vue的e2e测试学习. 学习点: 安装uirecorder 用工具(UI Recorder)录制测试脚本 测试脚本的回放 本文意在安装UI Recorder,并且利用该工具进 ...

  4. 测试笔记：jsonp跨域接口测试

    原先测过这个接口,前后端同源(域名,协议,端口相同),开发提供的文档: $.post("http://host/url", { data1: "data1", ...

  5. C语言 变量类型

    // a是一个全局变量,静态变量 int a; void test() { // b是一个局部变量,自动变量 ; b++; // c是一个局部变量,静态变量 ; c++; printf("b ...

  6. NS_ENUM和NS_OPTIONS宏

    枚举的宏定义 一.简介  NS_ENUM和NS_OPTIONS宏提供了一种简明.简单的方法来定义基于C语言的枚举和选项. 这些宏提高了Xcode中的代码完成性,并明确指定了枚举和选项的类型和大小. 此 ...

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

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

  8. luogu4566 [Vani有约会]雨天的尾巴

    题目 线段树合并的板子题目了,写一写对线段树合并的理解 首先线段树合并就是把一大堆权值线段树合并起来的算法 尽管复杂度看起来并不是非常科学,但是确是非常优秀的\(O(nlogn)\) 主要的写法两种 ...

  9. React中的虚拟DOM

    当组件当state和props发生变化当时候,组件当render函数就会重新执行,组件就会被重新渲染,react中实现这种重新渲染,他的性能是非常高的,因为他引入了一个虚拟Dom的概念,那么什么是虚拟 ...

  10. 2018中国大学生程序设计竞赛 - 网络选拔赛 1010 YJJ's Salesman 【离散化+树状数组维护区间最大值】

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6447 YJJ's Salesman Time Limit: 4000/2000 MS (Java/O ...