今天简单学习了AngularJS框架,在这里我想简单的总结一下我所了解的AngularJS和一些入门案例!

首先,我们要知道什么是AngularJS?

AngularJS  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

然后,AngularJS怎么用?为什么我们要使用AngularJS?

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面,通过指令拓展了HTML

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

我认为AngularJS 的优势在于减轻前端js代码量，增加js的复用 也可以通过学习AngularJS学习到更多的前端页面框架 而且最重要的是AngularJS具有四大特性 分别是:

1.采用MVC设计模式

说起MVC设计模式就不得不提一下设计模式这个关键词了，常见的设计模式有23+1种，这个+1就是指MVC了，其他的可以自行百度了解，学过软件工程的可能会了解的多一点，虽然很繁琐，但确实是很有用的东西。

在angularJS中MVC分别代表模型（model）,视图（view）,控制器（controller）

Model：模型，就是业务数据，前端项目中就是JS变量；

View：业务数据向用户展示的地方，前端项目中就是HTML；

Controller：负责业务数据的增删改查，前端项目中相当于函数。

2.双向数据绑定

数据绑定有两个方向，意识从Model到View，二是从View到Model。

1.从Model到View，只要Model中数据发生改变，View中的数据会自动同步更新。许多方法都可以实现此种方向的绑定，例如：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked，其他的指令没有手动尝试，如果大家有兴趣可以自己敲一敲尝试一下。

2.从View到Model，这种方向的绑定实现方法只有一种，就是ngModel

单行文本输入域，ngMode可以把value属性值绑定到Model变量

复选框，ngModel可以把true/false值绑定到Model变量

单选框，ngModel可以把当前选中的单选框的value值绑定到Model变量

下拉框，ngModel可以把当前选中的option的value值绑定到Model变量

3.依赖注入

学过spring的同学可能知道这个概念，对于angular JS来说如果需要那些对象可以在参数中直接写出来，然后就可以在函数的使用了，这些对象不需要你自己创建，它本身已经被angular创建好了，你就可以直接使用了。

module.controller('控制器', function($scope, $interval){})

Angular中的ngController指令在实例化控制器对象时，会根据指定的形参名，创建出控制器所依赖的对象，并注入给控制器对象——依赖注入（Dependency Injection，DI）现象。

注意：

(1)Angular在创建控制器对象时，会根据形参列表中的每个形参的名称来创建依赖的对象，故控制器声明函数不能声明Angular无法识别的形参名——Angular只提供了这一种依赖注入方式——根据形参名来注入依赖的对象！

(2)若项目JS文件使用了类似yuicompressor等压缩程序，默认会把函数的形参名精简为一个字母的形式，会导致Angular的依赖注入失败！解决办法：

4.模块化开发

顾名思义就是通过定义模块 把各个部分分开 采用了高内聚低耦合的原则 从而使代码的依赖降低

我们应该如何使用AngularJS呢

首先我们需要导入所要用到的script 标签 使用方法和Jquery一样

  1. <script type="text/javascript" src="js/angular.min.js" ></script>

接下来要认识几个比较常用的指令

ng-model   可以将输入域的值与 AngularJS 创建的变量绑定。 与jsp中的name属性类似

ng-app=myApp 用于告诉 AngularJS 应用当前这个元素是根元素。一般写在<body>标签中 一个HTML只有一个ng-app

ng-controller 用于为你的应用添加控制器。一般写在<body>标签中

ng-repeat 用于遍历循环 哪里需要用到就添加在对应的标签上

ng-init 初始化

$scoper 作用域是当前页面

表达式 页面 如果需要展示数据 需要用{{表达式或者变量}} 比如:

  1.         <script>
  2.             var app=angular.module('myApp',[])//  定义了一个模块   叫myApp
  3.             // 定义控制器
  4.             app.controller('mycontroller',function($scope){
  5.                 $scope.add=function(){
  6.                     return parseInt($scope.x)+parseInt($scope.y);
  7.                 }
  8.             });
  9.         </script>
  10.     </head>
  11.     <body ng-app=myApp ng-controller="mycontroller">
  12.         x：<input type="text" ng-model="x" />
  13.         y：<input type="text" ng-model="y" />
  14.  
  15.         <br />
  16.         运算结果：{{add()}}
  17.     </body>

结果:

循环遍历

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/angular.min.js" ></script>
  7.         <script>
  8.             var app = angular.module("myApp",[])
  9.             app.controller("mycontroller",function($scope){
  10.                 $scope.list = [
  11.                 {name:"zhangsan",age:18,sex:"man"},
  12.                 {name:"lisi",age:17,sex:"woman"},
  13.                 {name:"wangwu",age:16,sex:"boy"}
  14.                 ];
  15.             })
  16.         </script>
  17.     </head>
  18.     <body ng-app="myApp" ng-controller="mycontroller">
  19.         <table>
  20.             <tr>
  21.                 <td>姓名</td>
  22.                 <td>年龄</td>
  23.                 <td>性别</td>
  24.             </tr>
  25.             <tr ng-repeat="p in list">
  26.                 <td>{{p.name}}</td>
  27.                 <td>{{p.age}}</td>
  28.                 <td>{{p.sex}}</td>
  29.             </tr>
  30.         </table>
  31.     </body>
  32. </html>

结果:

一些其他的补充

$scope是angular.js内置对象

$scope有请求数据 也有响应数据

ng-init angular.js 中 只要页面一执行 页面加载首先执行的ng-init 中操作

var app=angular.module('app',[]) // 定义了一个模块叫app 定义以后一定要在body 标签上声明使用的模块名称

ng-click 鼠标点击事件

<tr ng-repeat="q in list">

$http 也是angular.js的内置对象 主要作用发送http 请求 并且是发送ajax

$http.get 发送get请求

$event 可以获取当前操作的事件是什么 复选框 ----》复选框哪个被勾选

Angular框架入门的更多相关文章

  1. Angular 快速入门

    Angular 快速入门 AngularJS 官方网址 Angular:https://www.angular.cn/ Angular官网:https://angularjs.org/ Angular ...

  2. (转载)从Java角度理解Angular之入门篇：npm, yarn, Angular CLI

    本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...

  3. AG-Admin微服务框架入门

    AG-Admin微服务框架入门  @qq群:一群: 837736451  二群 169824183 一 概要介绍 AG-Admin后台地址:https://gitee.com/minull/ace-s ...

  4. Angular.js 入门（一）

    最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...

  5. CI框架入门1

    CI框架入门: 1.url的特点             2.目录结构/布局             3.MVC分别在哪里,如何依葫芦画瓢             4.安全性             ...

  6. 初始angular框架（1）

    作为一个从来没有使用过的angular框架的小白  第一步肯定是 看文档!  没错就是看文档了!

  7. 【原创】NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战

    概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能. ...

  8. 【原创】NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战

    前言 本文将演示一个iOS客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo.服务端将分别用MINA2和Netty4进行实现,而通信时服务端你只需选其一就行了.同 ...

  9. 【原创】NIO框架入门(二)：服务端基于MINA2的UDP双向通信Demo演示

    前言 NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能.这其中最流行的无非就是MINA和Netty了,MINA目前的主要版本是MINA2.而Netty的主要版本是Netty3和Netty ...

随机推荐

  1. Apache + WordPress 从 0 搭建

    引言 又到周末了,周末小编一般不更新系列文章,原因嘛是因为要攒稿子,年底工作比较忙,不攒点稿子是要断更的:( 所以周末一般聊点简单轻松加愉快的东西,小编现在的博客站是由 HEXO 进行搭建的,最近随着 ...

  2. nginx的一些知识(一)

    第8章 web网站的搭建 curl -Lv 网站地址:查看网站的请求信息和响应信息,并且会将结果输出出来 8.1 web网站的的传输原理过程 会进行DNS的解析 进行客户端和服务端进行三次握手协议 客 ...

  3. 【关注图像采集视频传输】之CYUSB3014 EZ-USB FX3 Software Development Kit

    网址:http://www.cypress.com.与之前的High Speed FX2相比,新的产品叫Super Speed  FX3,沿用了之前的命名习惯.FX2芯片内嵌一个8051核,FX3则内 ...

  4. ES6，箭头函数 (=>)注意点

    函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. 不可以使用arguments对象,该对象在函数体内不存 ...

  5. 【MyBatis】动态 SQL

    [MyBatis]动态 SQL 转载: 目录 ========================================== 1.if 2.choose when otherwise 3.tri ...

  6. 廉价OpenVZ的VPS如何在solusvm下保证永不死

    行业里面有openvz架构的其实是一个不错的架构,资源的利用效率挺高的,当然也有一些限制,同时也带来一些缺点,其中最大的缺点莫过于超售了,卖1G的RAM可能连128都没有,这样的直接后果就是某些不良玩 ...

  7. 重载和重写的区别？构造器 Contructor 构造器是否可被 override？

    重载 发生在同一类,方法名必须相同,参数类型不同,顺序不同,类型不同,方法返回值和返回类型可以不同 重写 发生在子父类,方法名.参数名参数列表必须相同.返回值范围小于等于父类,抛出异常范围小于等于父类 ...

  8. [译]C# 7系列，Part 3: Default Literals 默认文本表达式

    原文:https://blogs.msdn.microsoft.com/mazhou/2017/06/06/c-7-series-part-3-default-literals/ C#的default ...

  9. [译]C# 7系列，Part 6: Read-only structs 只读结构

    原文:https://blogs.msdn.microsoft.com/mazhou/2017/11/21/c-7-series-part-6-read-only-structs/ 背景 在.NET世 ...

  10. mkdir()提示No such file or directory错误的解决方法

    转自:http://www.02405.com/program/php/1692.html 在php中使用mkdir()方法创建文件夹时报错:No such file or directory,出错代 ...