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是一门很好的为静态 ...

随机推荐

envi利用矢量数据对影像做多边形裁剪 (转）
2011-05-25 17:31:10| 分类: ENVI|举报|字号订阅来自:http://zhangling357522.blog.163.com/blog/static/184687296 ...
cordova 开发 ios app 简要流程
1 安装node.js环境官网: http://nodejs.org/ 点击[install],会下载mac的安装包.正常安装即可 2 安装cordova:npm install -g cordo ...
Linux中怎么从root用户切换到普通用户
su是在用户间切换,可以是从普通用户切换到root用户, test@ubuntu:~$ su Password: root@ubuntu:/home/test# 也可以是从root用户切换到普通用户 ...
svn图标显示不正常，文件夹显示但文件不显示svn图标
svn图标显示不正常,文件夹显示但文件不显示svn图标这个问题的引发是自己造成的,使用myEclipse时progress会卡在 refresh svn status cache (0%)这里, ...
Win8 Pro 64 Install .net3.5 在线升级会遇到错误0x800F0906。
很多人安装Win8后都遇到了无法升级.NET Framework 3.5.1的问题,在线升级会遇到错误0x800F0906. Uninstall Windows update kB: KB296682 ...
Angular-cli 构建应用的一些配置
Angular-cli 构建应用的一些配置标签(空格分隔): Angular 直接使用 ng build --prod --build-optimizer --base-href=/ 来发布 ba ...
猿创|有赞的zan framework安装与使用
1.准备工作 1.1 一台腾讯云服务器2核CPU+2G内存的Linux CentOS 7.2(谢谢小杨同学@erchoc) 1.2 预装lnmp一键安装包环境,官方地址:lnmp一键安装包 (如不会使 ...
npm 安装axios和使用增删改查
1:安装axios(建议安装淘宝镜像) npm install axios 2:项目导入 npm install --save axios vue-axios 3:页面导入 import axios ...
Oracle10g使用$ORACLE_HOME/rdbms/admin/awrrpt.sql报错
Enter value for report_name: Using the report name awrrpt_1_591_593.htmlselect output from table(dbm ...
ZHS16GBK编码中汉字缺失
生产中使用ZHS16GBK编码的Oracle数据库,若出现字,则会出现乱码原因是此字不存在在ZHS16GBK编码中解决方法可以:此二字结构相同,但是后面的在ZHS16GBK编码中出现

Angular简单总结