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 相关文章推荐
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
JavaScript简单编程实例学习
Feb 14 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
PHP 快速排序算法详解
2014/11/10 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
python查看列的唯一值方法
2018/07/17 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
.net面试题
2016/09/17 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
物流仓储计划书
2014/01/10 职场文书
企业环保标语
2014/06/10 职场文书
学习普通话的体会
2014/11/07 职场文书
初中家长评语大全
2014/12/26 职场文书
项目经理岗位职责
2015/01/31 职场文书
工程部文员岗位职责
2015/02/04 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript