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 学习笔记(十六) js事件
Feb 01 Javascript
js indexOf()定义和用法
Oct 21 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 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
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
vue下跨域设置的相关介绍
2017/08/26 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python实现从web抓取文档的方法
2014/09/26 Python
收集的几个Python小技巧分享
2014/11/22 Python
python删除列表中重复记录的方法
2015/04/28 Python
python实现抖音点赞功能
2019/04/07 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python 如何实现访问者模式
2020/07/28 Python
Python内置函数及功能简介汇总
2020/10/13 Python
python基于opencv实现人脸识别
2021/01/04 Python
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
动物科学专业毕业生的自我评价
2013/11/29 职场文书
区三好学生主要事迹
2014/01/30 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
查摆问题整改措施
2014/10/24 职场文书
圆明园观后感
2015/06/03 职场文书
python基础之文件处理知识总结
2021/05/23 Python
python 如何用terminal输入参数
2021/05/25 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技