Angular JS知识小总结

1.什么是Angular JS?

AngularJS 是一个为动态WEB应用设计的 JavaScript结构框架.

2.Angular JS的用处?

--它是为了克服HTML在构建应用上的不足而设计;

--适用于CRUD应用,是为了消除页面上的DOM操作而生.它的核心理念是借鉴了MVC框架,但是它其实更接近于MVVM.viemmodel是一个原生的javascript对象,angularJS把view和model加到viemmodel上,从而实现数据的绑定.而且这种绑定是双向的,即view变化,对应的model也会变化,同样model发生变化也会引起相应的view的变化.

--主要用来开发单页面应用,它支持浏览器历史操作,向前向后按钮,单页应用中的收藏操作。

--并不是所有的应用都适合用AngularJS来做,如游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用。

3.Angular JS的特性

--双向数据绑定: 这是AngularJS模块的核心功能——**绑定**,ng-model和{{}}实现的是双向绑定,如果controller和ng-model都存在于一个输入框或元素上的话,页面加载完后,对应元素里会显示controller里设置的默认值,一旦在view人工修改,ng-model就会发生作用.controller控制器,可以实现单向绑定.

--模块化:在AngularJS中,一个模板就是一个HTML文件。AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。

--服务和依赖注入:AngularJS拥有内建的依赖注入(DI)子系统,DI允许你请求你的依赖,而不是自己找寻它们,即"被动接受",也就是说如果你需要一个对象或者变量,只要angularJS中自有的,只要声明它,就可以使用.

--指令:Angular JS有很多自有的ng-directives,可以帮助我们操作DOM,另外,我们还可以自定义指令,用angular模块的directive方法.

4.几个重要的物件

-- ng-app:一般家在最外层的根元素上,定义了angularJS脚本的作用域;
-- ng-model:把view上的标签或属性绑定到viemmodel中;
-- {{}}:angularJS的表达式,作用就是把viewmodel中的model显示到view中.
--$scope:这个是angularJS的核心对象,即viewmodel对象,这个对象不能更改,依赖注入方式获得.

5.编写angularJS的基本流程:

页面
-- 首先用<script>标签,导入angular.min.js文件;
-- 一般在根元素<html>里定义angularJS脚本的作用域`<html ng-app="myAPp">`;
-- 定义控制器的作用域,在标签里`ng-controller="myController"`;
-- 数据要绑定到viemmodel的话,在对应的标签上用ng-model指令;或者要显示用{{}}.

js
-- 加载需要的模块`var myApp = angular.module("myApp",[])`;第二个参数,是该模块所依赖的模块,没有的话,可不填写
-- myApp.controller("MyController",function($scope){...};控制器方法调用,回调函数的一个参数务必是$scope,这样才能获取到$scope,从而操纵数据.

时间: 11-18

Angular JS知识小总结的相关文章

angular JS知识记录

E - 元素名称: <my-directive></my-directive> A - 属性名: <div my-directive="exp"></div> C - class名: <div class="my-directive:exp;"></div> M - 注释 : <!-- directive: my-directive exp -->

开发Ionic应用前Angular js必备知识

Angular js是一个Web应用框架,它极其流行,已经成为目前使用最广泛的Javascript工具之一.Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要.Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其他的移动端友好的特性. 本篇文章会带你了解AngularJS的核心知识并介绍一些基础知识.我们学会控制器,顾名思义,它会控制(control)你的数据.接着我们介绍作用于,它会连接控制器和用户

Asp.Net Mvc+Angular.Js自测小Demo

参考:http://www.cnblogs.com/eedc/p/6082052.html 一.引用anguler: 1.angular.js 2.angular-route.js 3.app.js (下面会讲到) 二._Layout.cshtml:母版声明angular应用 ng-app="myApp" <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"

angular js jquery中post请求的一点小区别

这也是最近遇到的坑,还是之前那个项目,现在要实现登录功能. 背景:注册功能之前已经跑通了.前端用的是jquery后台是springMVC.鉴于注册和登录有些接口功能是类似的(比如注册确保邮箱是没有注册过,而登录是确保注册过),于是后台还准备用注册的那套接口. 登录的接口get请求是没问题的,但是post却出了问题:后台收不到请求体里的内容. 后来发现是jquery和angular的post行为有些区别,于是我做了个实验. <!DOCTYPE html> <html lang="

精通 Angular JS 第一天——Angular 之禅

简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用.大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量. 2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀.AngularJS主页(http://www.a

初识angular.js之爱恨情仇

angular.js Angular.JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好. 简单概括:MV*模型的js框架 angular.js之爱恨情仇 爱恋之际 MV*模式 职责清晰.层次分明,例如页面样式变化仅改变View代码,其它层次结构代码无需改动. 数据绑定 数据视图绑定(单.双向数据绑定),无需反锁的改变DOM的值或修

Angular JS + Express JS入门搭建网站

3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后台主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便. 由此在项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS. 同时自己实现了一个最简单的Angular

Angular.js中处理页面闪烁的方法详解

Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.".

angular.js初探

2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这里使用的是bootstrap提供的cdn <script src="http://cdn.bootcss.com/angular.js/1.4.3/angular.js"></script> 接下来是自己的js代码 1 //bbsController 2 bbsAp