AngularJS

AngularJS四大特征

MVC模式
双向绑定
依赖注入
模块化设计

AngularJS 表达式

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

AngularJS 指令

最常用的指令有

ng-app定义应用程序的根元素
ng-click定义元素被点击时的行为
ng-controller定义应用的控制器对象
ng-if如果条件为false移除HTML元素
ng-init定义应用的初始化值
ng-model绑定HTML控制器的值到应用数据
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 服务

获取当前完整的url路径 $location.absUrl()
获取当前url的参数的序列化json对象 $location.search()
获取当前url路径(当前url#后面的全部内容) $location.url()
获取当前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简单总结的更多相关文章

Angular简单应用剖析
这一篇我们将一起感受学习一个小型的.活生生的应用,而不是继续深入分析哪些单个的特性.我们将会一起感受一下,前面所讨论过的所有片段如何才能真正的组合在一起,形成一个真实的.可以运行的应用. GutHub ...
Angular 简单的Get
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
Angular 简单的Post
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
Angular.的简单运用
从script引用angular文件.开始编写angular事件: 在angular文件中添加属性: ag-xxxx;初始化使用: ng-app="name"; 没有这个属性就不会 ...
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 的目的是 ...
vue和angular的区别：
相同: 1.数据绑定:vue和angular绑定都可以用{{}} 2.都支持内置指令和自定义指令 3.都支持内置过滤器和自定义过滤器. 区别: 1.学习成本和API 设计:vue相比于angular来 ...
vue，react，angular
一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库. Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...
vue，angular，react框架对比
转载自:https://www.cnblogs.com/hubgit/p/6633214.html 首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Mod ...
vue.js和angular.js的区别
关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态 ...

随机推荐

php基础--取默认值以及类的继承
(1)对于php的默认值的使用和C++有点类似,都是在函数的输入中填写默认值,以下是php方法中对于默认值的应用: <?phpfunction makecoffee($types = array ...
【Linux】sudo用户权限管理
权力下放一.权力分配- sudo Sudo是Unix/Linux平台上的一个非常有用的工具,它允许系统管理员分配给普通用户一些合理的"权力",让他们执行一些只有超级用户或其他特 ...
浅谈Socket编程
浅谈Socket编程说到Socket,想必大家会觉得陌生又熟悉.许多同学听说过Socket,但仅仅知道它翻译成中文叫做套接字,除此之外似乎并没有太多的了解了.那么今天我就来抛砖引玉地聊一聊Socke ...
Windows 线程消息队列和GetMessage实现内幕
注:转自http://blog.csdn.net/FreeWave/article/details/2056469?reload. 清晰地讲解了Windows线程的消息队列和GetM ...
并发包java.util.concurrent.locks.Lock
** * * @描述: Lock比传统线程模型中的synchronized方式更加面向对象.与生活中的锁类似,锁本身也应该是一个对象,两个线程执行的代码片段要实现同步互排的效果 * 它们必须用同一个L ...
分布式check_mk切换远端图片到本地访问
http://hermannsspace.de/wp/collect-pnp4nagios-data-in-check_mk-distributed-environment slave1数据目录 /o ...
（一）svn介绍
项目管理中的版本控制问题通常软件开发由多人协作开发,如果对代码文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大解决代码冲突困难容易引发BUG 难于恢复至以前正确版本 ...
htmlunit模拟登录
htmlunit jar项目路径http://sourceforge.net/projects/htmlunit/files/htmlunit/ demo代码如下 public class AutoL ...
WCF如何使用X509证书
如何创建证书: makecert.exe -sr LocalMachine -ss My -a sha1 -n CN=JiangServer -sky exchange -pe (服务端证书) ...
Oracle服务端及客户端搭建帮助文档
Oracle服务端及客户端搭建帮助文档目录简介 Oracle服务端安装 Oracle客户端安装 PLSQL安装登录测试系统配置修改用户操作解锁账户.密码创建账户及密码配置监听文件监听 ...

Angular简单总结