AngularJs每天学习之总体介绍


Posted in Javascript onAugust 07, 2017

这周末在家呆了两天,正好中午闲暇时间继续分享Angularjs相关,今天主要分享Angularjs总体介绍及数据绑定部分内容,下面直接进入主题。

1、基本概念:

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事,通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足。

2、版本

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应用都是由控制器、服务、指令、路由、过滤器等模块类型构成,下面要我用一个图表示关系:

AngularJs每天学习之总体介绍

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上面,大家可以下载。

今天就给大家分享怎么多的内容吧,下次把数据绑定和控制器相关内容分享给大家,在此感谢大家的支持,并有什么不妥之处欢迎大家指正!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Node 自动化部署的方法
Oct 17 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 #Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 #Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 #Javascript
bootstrap Table插件使用demo
Aug 07 #Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 #Javascript
React进阶学习之组件的解耦之道
Aug 07 #Javascript
详解前端路由实现与react-router使用姿势
Aug 07 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
python pickle 和 shelve模块的用法
2013/09/16 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
24岁生日感言
2014/01/13 职场文书
大学生创业感言
2014/01/25 职场文书
主题班会演讲稿
2014/05/22 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
大学生年度个人总结
2015/02/15 职场文书
医学生自荐信范文
2015/03/05 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
手残删除python之后的补救方法
2021/06/26 Python
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python