一、简单了解一下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. 鸟瞰spring

    一.spring框架概述: Spring框架主要提供了Ioc容器.AOP.数据访问.Web开发.消息.测试等相关技术的支持. 1.Spring的模块 1)核心容器 Spring-Core:核心工具类, ...

  2. FileDetector-基于java开发的照片整理工具

    1. 项目背景 开发这个功能的主要原因如下: 1. 大学期间拍摄了约50G的照片,照片很多 2. 存放不规范,导致同一张照片出现在不同的文件夹内,可读性差,无法形成记忆线. 3. 重复存放过多,很多照 ...

  3. UWP 手绘视频创作工具技术分享系列

    开篇先来说一下写这篇文章的初衷. 初到来画,通读了来画 UWP App 的代码,发现里面确实有很多比较高深的技术点,同时也是有很多问题的,扩展性,耦合,性能,功能等等.于是我们决定从头重构这个产品,做 ...

  4. sql执行机制

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp38 sql执行机制 1.对于普通的sql语句只有where条件的执行机制 ...

  5. [我所理解的REST] 2.REST用来干什么的？

    笔者每当遇到一个新事物的想去了解的时候,总是会问上自己第一个问题,这个新事物是干什么用的?在解释我所理解的REST这个过程中也不例外,这篇博客我们先关注一下REST是干什么用的,然后后续再解释REST ...

  6. wait与sellp方法区别

    Java Thread(线程)案例详解sleep和wait的区别    上次对Java Thread有了总体的概述与总结,当然大多都是理论上的,这次我将详解Thread中两个常用且容易疑惑的方法.并通 ...

  7. 团队作业4——第一次项目冲刺（ALpha版本）第三天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完成了前端的HTML页面设计 2.功能 完成了后端数据处理的全部基本功能: 数据结构设计及数据交互操作 博客页面数据 ...

  8. 201521123034《Java程序设计》第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 多线程的冲突 互斥共享(有时两个或两个以上的线程需要同时对 而线程之间如果不加以控制,会产生一种情况-竞争) sy ...

  9. 201521123045 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  10. Java课程设计 购物车系统（个人博客）

    1. 团队课程设计博客链接 课程设计 2. 个人负责模块或任务说明 编写ShoppingCart类,连接数据库 编写updateCart类,从数据库中获取商品信息,获取指定编号的商品信息 编写User ...