一、简单了解一下AngularJS

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="Js/angular.js" type="text/javascript" charset="utf-8"></script>

二、AngularJS中的一些指令

1、指令与表达式

　　（1）原生JS绑定input与div

　　　　html部分

<input type="text" name="" id="input" value="" />

<div id="div"></div>

　　　　script部分

<script type="text/javascript">

    var inputs = document.getElementById("input")

    var div = document.getElementById("div")

    input.onchange = function(){

        div.innerHTML = inputs.value;

    }

</script>

　　（2）AngularJS绑定input与div

<input type="text" ng-model="name"/>

<div ng-bind="name"></div>

<div >{{name + "123"}}</div>

　　（3）表达式

　　　　AngularJS 用双大括号绑定表达式：{{ expression }}。
　　　　用于将表达式的内容输出到页面中
　　　　表达式可以是文字，运算符，变量等，也可以在表达式中进行运算输出结果

<p>{{ 5+5 +"Angular"}}</p>

　　　　如果Angular.Js文件放在页面的下方，在页面刷新的瞬间会看到{{}}表达式的原样。所以可以使用ng-bind指令代替表达式

<p ng-bind="5+5 +'Angular‘"></p>

2、ng-app

　　　　声明AngularJS所管辖的区域，一般写在body或者html标签上，原则上一个页面上只能有一个。

<body ng-app=""></body>

3、ng-model

　　　　指令把元素值（比如输入域的值）绑定到应用程序。

<input type="text" ng-model="name"/>

4、 ng-bind

　　　　把应用程序变量中的值，输出到页面HTML视图中。可以与表达式{{}}互相替换。

<div ng-bind="name"></div>

5、 ng-init

　　　　初始化AngularJS应用中的变量值

<body ng-app="" ng-init="name='jredu'">

　　　　应用程序初始化时，name变量就赋有初值

6、MVC三层架构

　　（1）model（模型层）：应用程序中，应用处理数据的部分。（包括将数据保存或修改到数据库、变量、文件中 ）。
　　　　　　在AngularJS中，Model特指的是：应用程序中的各种数据。
　　　　　　View（视图层）：用户可以看到的用户显示数据的页面
　　　　　　Controller（控制器）：控制器是链接View与Model的桥梁。负责从View读取数据，接受用户的操作输入；并将数据发送给Model层。Model层对数据处理完毕之后，将结果返回给Controller，Controller再将结果返回给View显示

　　　　 View → （数据） → Controller → （数据） 
　　↗　　　　　　　　　　　　　　　　　　　　↘
用户　　　　　　　　　　　　　　　　　　　　Model（处理数据）
　　↖　　　　　　　　　　　　　　　　　　　　↙
　　　　View ← （数据） ← Controller ← （数据） 

　　　　创建一个AngularJS的模块，即ng-app=""所需要绑定的部分
　　　　　　①模块名称，即ng-app双引号中需要绑定的名字。<body ng-app="myApp">
　　　　　　②数组：表示需要注入的模块名称，不需要注入其他模块可用空数组代替
　　　　　　　　>>>Angular将常用的功能封装到angular.js中，创建主模块是直接可以使用，无需注入
　　　　　　　　>>>而一些应用较少的功能，需要导入对用的Js文件，并且在[]中注入进这个模块，才能够使用
　　　　　　　　　　这是AngularJS中的【模块化开发】与【依赖注入】！

　　　　在AngularJS的模块上，创建一个控制器，需要传递两个参数
　　　　　　①控制器名称，即ng-controller需要绑定的 名称

<div ng-controller="myCtrl">

　　　　　　②控制器的构造函数，构造函数可以传入多个参数

　　　　　　　　>>>如果要在函数中使用系统的内置对象，贼必须通过函数的参数传入，否则不能使用
　　　　　　　　>>AngularJS中的内置对象，都用$开头，例如$scope,$rootScope

7、AngularJS的作用域

　　　①$scope： 局部作用域，声明在$scope上的属性和方法。只能在当前Controller使用
　　　　②$rootScope：根作用域。声明在$rootScope上的属性和方法，可以在整个ng-app所包含的范围使用
　　　　　　>>>如果没有$scope声明变量，而是直接使用ng-model在HTML标签中绑定的数据的作用域为：
　　　　　　　　a、如果使用ng-model写在某个Controller中，则这个变量会默认绑定到当前Controller的$scope上；
　　　　　　　　b、如果使用ng-model没有写在任何一个某个Controller中，则这个变量会默认绑定到$rootScope上；
　　　　　　>>>AngularJS中的父子作用域
　　　　　　　　a、ANgularJS中，子作用域 只能访问父作用域中的变量，而不能修改父作用域的变量
　　　　　　　　b、为了解决上述问题可以将父作用域中的变量声明为引用数据类型，例如对象等，这样可以在子作用域中，直接修改对象的属性，而不需要修改对象本身保存的地址

这是HTML部分

<div ng-controller="myCtrl1">

            <div ng-bind="name +'————myCtrl的name'"></div>

            <div ng-bind="age +'————myCtrl的age'"></div>

            <input type="text" ng-model="text"/>

            <input type="text" ng-model="obj.text"/>

            <mark ng-bind="text+'————myctrl的text'"></mark>

        </div> 

        <div ng-bind="name + '这是myctrl外的div'"></div>

        <mark ng-bind="text+'————全局的text'"></mark>

        <mark ng-bind="obj.text+'————全局的的text'"></mark>

这是AngularJS

var app = angular.module("myApp",[]);

app.controller("myCtrl1",function($rootScope){

    $rootScope.text = "aa";

    $rootScope.obj ={

        text:'bb',

    }

});

第一input之后跟myctrl时时改变，全局的两个都不会跟着改变

第二input之后跟第二个全局的text时时改变，第一个全局的text不会跟着改变，myctrl也不会跟着改变

8、AngularJS中的过滤器

　　过滤器可以使用一个管道字符（|）添加到表达式和指令中。
 　　　　>>>系统内置的过滤器，
　　　　　　currency 　　　　 将数字格式化给货币格式

<p>{{123456|currency}}</p>

　　　　　　lowercase 　　　   格式化字符串为小写。

<p>{{"aBcDeF"|lowercase}}</p>

　　　　　　　  uppercase 　　　   格式化字符串为大写。

<p>{{"aBcDeF"|uppercase}}</p>

　　　　　　orderBy 　　　　   根据某个表达式排列数组。

　　html部分的代码

<table border="1" width="400px">

    <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>成绩</th>

    </tr>

    <tr ng-repeat="item in classes | orderBy : 'score' ">

        <td>{{item.name}}</td>

            <td>{{item.age}}</td>

        <td>{{item.score}}</td>

    </tr>

</table>

　　这是AngularJS

angular.module("app",[]).controller("ctrl",function($scope){

    $scope.classes = [

        {name:"张三",age:12,score:44},

        {name:"张诶",age:15,score:80},

        {name:"刘青",age:11,score:23},

        {name:"55",age:15,score:99},

        {name:"小刘",age:13,score:54},

    ]

})

　　　　　　　filter 　　　　　　 从数组项中选择一个子集。

　　自定义过滤器

　　html部分的代码

<p>{{"我显示不出来了"|shouHello}}</p>
angular.module("app",[])

.controller("ctrl",function($scope){})

.filter("shouHello",function(){

    return function(text){

    return "Hello Angular";

    }

})

　　　　这是AngularJS　　↑

　　只能定义过滤器，同时需要传递过滤参数
　　调用实例

　　html部分的代码

<p>{{17862890990|hideTel:5}}</p>

　　传入的参数5，将被过滤函数的num形参所接受

　　这是AngularJS

.filter("hideTel",function(){

    return function(text,num){

    num = num>0&&num<11?num:3;

    text = text+"";

    var newText = text.substring(0,11-num)+text.substring(11-num,11).replace(/\d/g,"*");

    return newText;

    }

})

　　自定义过滤器，实现根据姓名筛选数据功能
　　　　调例演示

　　html部分的代码

请输入姓名：<input type="name" ng-model="search"/>

<table border="1" width="400px">

    <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>成绩</th>

    </tr>

    <tr ng-repeat="item in classes | orderBy : 'score' |filterByName:name ">

        <td>{{item.name}}</td>

        <td>{{item.age}}</td>

        <td>{{item.score}}</td>

    </tr>

</table>

　　这是AngularJS

angular.module("app",[])

.controller("ctrl",function($scope){})

.filter("filterByName",function(){

    return function(item,search){

        if(!search)return item;

        var arr = [];

        for(var i=0;i<item.length;i++){

        var index = item[i].name.indexOf(search);

            if(index>1){

            arr.push(item[i]);

            }

        }

    return arr;

        }

})

这次51就先写到这里了，剩下的等下次在接着写。

JavaScript 框架------------AngularJS（上）的更多相关文章

  1. 一款优秀的JavaScript框架—AngularJS

    AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...

  2. Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择

    转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...

  3. Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

    2017-08-04 前端大全 (点击上方公众号,可快速关注) 英文:ANTONI ZOLCIAK  译文:众成翻译 www.zcfy.cc/article/vue-react-angularjs-a ...

  4. 三大JavaScript框架对比——AngularJS、BackboneJS和EmberJS

    <三大JavaScript框架对比——AngularJS.BackboneJS和EmberJS> 本文转载自  作者:chszs,博客主页:http://blog.csdn.net/chs ...

  5. 顶级的JavaScript框架、库、工具及其使用

    几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃.多样,并在多个领域快速成长.想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务.接下 ...

  6. 20 个值得一试的JavaScript 框架

      投递人 itwriter 发布于 2011-09-26 17:46 评论(3) 有1956人阅读 原文链接 [收藏] « » 本文介绍 20 个值得一试的 JavaScript 框架,如果你认为答 ...

  7. 有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取

    点这里 阅读目录 用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取 解决方案 为什么公开我们的解决方案 实现 AngularJS 服务 结论   Pr ...

  8. 从零开始定义自己的JavaScript框架(一)

    来自:http://www.ituring.com.cn/article/48461 1.1 模块的定义 一个框架想要能支撑较大的应用,首先要考虑怎么做模块化.有了内核和模块加载系统,外围的模块就可以 ...

  9. 怎样克服 JavaScript 框架疲劳？

    [编者按]Tero Parviainen 著有 Build Your Own AngularJS,曾两次组织 Clojure CUP 竞赛,在 Twitter 上有近两千名关注者. 在本文中.Tero ...

随机推荐

  1. Microsoft Azure Storage Exployer使用指南

    概述 Microsoft Azure Storage Exployer 是微软官方推荐的一款管理Azure Storage 客户端工具,客户使用完全免费.支持Windows.Mac和Linux.用户使 ...

  2. 震惊！WIN2003存在后门大全,提权成功率高

     从某种意义上说,服务器被攻击是不可避免的,甚至被控制也情有可原.但绝对不能容忍的是,服务器被植入后门,攻击者如入无人之境,而管理者去浑然不觉.本文将对当前比较流行的后门技术进行解析,知己知彼方能杜绝 ...

  3. python -- 装饰器的高级应用

    装饰器和装饰器模式装饰器模式是面向对象的一种设计模式,支持将行为动态增加到已经存在的对象上.当装饰一个对象的时候,就表示独立与其他类实例对象,为该对象扩展了新的功能. python的装饰器不是装饰器模 ...

  4. vue.js基础知识篇(2):指令详解

    第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...

  5. Django 学习笔记（六）MySQL配置

    环境:Ubuntu16.4 工具:Python3.5 一.安装MySQL数据库 终端命令: sudo apt-get install mysql-server sudo apt-get install ...

  6. CDH-5.7.1离线安装

    CDH-5.7.1离线安装 参考自:http://blog.csdn.net/jdplus/article/details/45920733   1.文件下载 CDH (Cloudera's Dist ...

  7. JSP入门必读

    JSP基础知识:转自老师上课梳理的笔记,希望对大家有所帮助.有什么不妥当的地方还望大家批评指正. 特别适用于JSP入门的人员使用.1.JSP [1] 简介1.1 HTML    HTML擅长显示一个静 ...

  8. spi master接口的fpga实现

    前言 当你器件的引脚贼少的时候,需要主机和从机通信,spi就派上了用场,它可以一对多,但只是片选到的从机能和主机通信,其他的挂机. spi:serial peripheral interface 串行 ...

  9. js学习--变量作用域和作用域链

    作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域 就js变量而言,有全局变量和局部变量.这里 ...

  10. mqtt实现自动监听服务器消息

    本示例借助meteor的一个环境跑,和我们平时用的node自己搭的环境或java,php的环境本质一样,在此不多讨论. 首先需求是:多系统对接进行消息实时传递. 安装好mqtt:  npm insta ...