AngularJs每天学习之总体介绍

网络编程 2024/11/17 佚名

3 1 2

这周末在家呆了两天，正好中午闲暇时间继续分享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应用都是由控制器、服务、指令、路由、过滤器等模块类型构成，下面要我用一个图表示关系：

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="/UploadFiles/2021-04-02/angular.js">

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,介绍

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“AngularJs每天学习之总体介绍”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

AngularJs每天学习之总体介绍

JS判断微信扫码的方法

关于webpack2和模块打包的新手指南（小结）

评论“AngularJs每天学习之总体介绍”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接