AngularJs学习笔记1——总体介绍
这周末在家呆了两天，正好中午闲暇时间继续分享Angularjs相关，今天主要分享Angularjs总体介绍及数据绑定部分内容，下面直接进入主题。
angualrjs1.x：目前比较稳定版本。
angularjs2.x:基于typescript编写，他在1.x基础上改动很大，偏向于移动端的开发，ES6标准编写
angularjs4.x 最新版本
目前版本2.x不是在1.x的基础上升级的，基本上说是颠覆性的，目前开始两个版本来维护，2.x开始把1.x版本基本上重新架构，并优化了大量的东西，并更提倡组件化变成，这方面跟Vue，React类似。
3、核心特性
MVC（或MVVM）设计思想：
很多人会想Angularjs是前端MVC框架，我认为MVC只是一个设计思想，我认为可以说有MVVM的影子在里面，因为MVVM是在MVC的基础上升级的，加了数据双向绑定功能，不过这只是我个人意见，请大神们指正。
双向数据绑定：
数据双向绑定不是AngularJs提出的，是很早就有的，有微软的WPF中运用MVVM思想、前端框架Knockoutjs都有数据双向绑定概念。
模块化和依赖注入
模块化和依赖注入是AngularJs的核心内容，也是Angular的亮点。
指令系统
指令体统也是Angular的核心，指令系统分内置指令和自定义指令，其中我认为自定义指令的功能很强大，能实现很多强大的功能，细节到讲解指令时详细讲解。
4、擅长领域
1）单页面应用程序Single Page Application（SPA）
2）CRUD程序
有可能有些园友有可能对单页面应用不是很理解，简单举一个例子，比如我们传统的通过Iframe框架的属于多页面应用MPA，多页面应用的弊端为多次加载多个页面，单页面应用都通过Html段来加载或者切换方式。这里对MPA，SPA不做过多的介绍，大家可以百度一下就理解。
AngularJs适合于CRUD的应用系统，不适合于页面频繁交互的应用或者图形化页面及游戏类系统不适合该框架。
5、AngularJs应用构成
任何一个ng应用都是由控制器、服务、指令、路由、过滤器等模块类型构成，下面要我用一个图表示关系：
6、模块（module）
在AngularJS中module是一个核心的存在，包括了很多方面，比如controller, config, service, factory, directive, constant, 等等。
模块的创建方式：
angular.module(‘myApp’,[]);
模块的使用：
在需要的地方（html某个标签上）添加ng-app
使用模块的好处：
1）保持全局命名空间的清洁；
2）编写测试代码更容易；
3）易于在不同的应用程序之间复用代码。
4）使用声明的方式，让人更加容易理解。
7、在应用中使用AngularJs
1）在应用中使用Angular时首先在页面中引用angular框架的js库代码。
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--引用AngularJs库 -->
<script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js"></script> </head>
2）在应用Angular范围的html元素上添加ng-app模块，需要添加控制器的话加ng-controller，这个不一定是在body元素上，可以任意元素上，这个就是表明使用Angular的应用边界。
<body ng-app="myapp" ng-controller="myCtrl">
<!-- 1、表达式绑定 -->
<h1>{{expression}}</h1>
<!-- 2、指令绑定-->
<h2>{{ngmodel}}</h2>
<input type="text" ng-model="ngmodel">
<!-- 3、ng-bind绑定-->
<h3 ng-bind="ngbind"></h3>
<h3 class="ng-bind:ngbind"></h3>
<!-- 4、ng-bind-html绑定-->
<h4 ng-bind-html="htmlbind"></h4>
<!-- 5、ng-bind-template -->
<h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>
3、添加js代码，并定义模块及控制器等内容
<script>
//模块定义
// 第一个参数：应用名称，第二个参数：应用依赖模块
var app = angular.module('myapp', ['ngSanitize']); // 控制器定义
// 第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能
app.controller('myCtrl', function($scope) {
$scope.expression = "hello expression";
$scope.ngbind = "hello ng-bind";
$scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
$scope.subCtrl = "hello subCtrl"; }); </script>
从以上代码段可以看出怎么定义模块及控制器的方法，并每个参数的意义都写了注释，大家可以看一下。
到时候给大家把源代码分享到GitHub上面，大家可以下载。
今天就给大家分享怎么多的内容吧，下次把数据绑定和控制器相关内容分享给大家，在此感谢大家的支持，并有什么不妥之处欢迎大家指正！
AngularJs学习笔记1——总体介绍的更多相关文章
- angularjs学习笔记1-angular总体简介及其特点
以前开发(web或者移动端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用.而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--Guide教程系列文章索引
在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
随机推荐
- jenkins 集成钉钉机器人
最早做Jenkins发布完成以后通过邮件发送信息通知相关的联系人,发现邮件会受限于大家接收的设置,导致不能及时的看到相关的发布内容,公司使用钉钉做为公司内部的通讯工具,所以想通过Jenkins发布完成 ...
- js事件小结
首先事件绑定分为2种方法 一种为"DOM0级"方法,这里我理解为事件指定 var oDiv = document.getElementById("div1"); ...
- Automated Front End Test - Xvfb, Chromedriver, Selenium, Jenkins
1. Install Xvfbm, google-chrome-stable and chromedriver in Jenkins sudo apt-get install -y xvfb goog ...
- 《安卓网络编程》之第二篇 java环境下网络通信的综合应用
经过前面内容的学习,我们了解了Java技术中实现网络通信的基本知识.下面将通过一个具体视力的实现过程,讲解客户端和服务器端通信的流程. 服务器端的实现文件是 Server.java,代码如下: imp ...
- 详解Linux进程(作业)的查看和杀死
目录: 引入进程 进程 线程 PS命令 TOP命令 其他查看进程命令 进程的优先级 作业控制机制 kill命令 一.引入进程 1.内存划分为:用户空间和内核空间 1.在用户空间里运行的进程,就是用户进 ...
- springboot 1.5.2 thymeleaf 标签未关闭异常解决办法
org.thymeleaf.exceptions.TemplateInputException: Exception parsing document: template="login&qu ...
- python内置的全局变量
print(__doc__) # 文件注释print(__file__) # 当前文件的绝对路径print(__package__) # 当前文件所在的包 当前文件: None 导入其他的文件:指定文 ...
- Winform调用WebKitBrowser，基于chrome内核WebKit的浏览器控件
在C#中,默认的WebBrowser控件默认使用的是IE的core,而IE的种种遭人吐槽的诟病使我不敢轻易使用WebBrowser,因此,打算使用Chrome的内核替换IE.Chrome的内核使用的是 ...
- jquery each 遍历
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法. $().each 在dom处理上面用的较多.如果页面有多个input标签类型为checkbox,对于这时用$ ...
- JVM-7.Java内存模型与高效并发
更多内容参见<并发与同步>系列 一.引子 二.JMM 三.Java中的线程 四.线程安全 五.锁优化 一.引子 运算能力 摩尔定律:晶体管数量,代表的CPU的频率 Amdahl ...