前端框架之Angular (一)

一、Angular特点:

1、双向数据绑定,主打卖点

2、MVVM 模型,把视图和逻辑分开

3、依赖注入

个人感觉,在Angular中,视图对应 HTML 模板,视图逻辑对应directive 和 controller。

二、模块

Angular 中通过模块来管理命名空间,可以通过不同的模块来隔离不同页面的逻辑。所虽然它称作 “module”,但其实更像是一个命名空间,或者叫一个包。

通过 angular.module(“name”, [/依赖/]) 来声明一个模块。Angular中的模块声明周期分两步,一个是配置阶段,一个是运行阶段。

angular.module(“app-name”, [])
.config(function() { //配置阶段,先执行
})
.run(function() { //运行阶段,后执行
});

一般我们给按页面划分模块,也可以把整个应用都声明成一个模块,然后通过模块来启动整个页面的逻辑。

可以把run当做main函数,如果有一些在应用启动时需要执行的代码,比如判断当前有没有登录,可以放在run函数中。

三、双向数据绑定

双向数据绑定是 Angular 的主打特色。一般我的数据都是单向绑定的,也就是当JS中的变量发生变化的时候更新到DOM,但是大部分时候并不会在DOM中的值变化的时候去自动更新JS中的变量。

看一个双向绑定的例子:

 <input ng-model=“user.name" type="text" placeholder="Your name">
 <h1>Hello {{ user.name }}</h1>

这样就实现了一个双向绑定,当在input中输入值的时候,h1中的值会立刻发生变化。

因为JS传值的问题,建议绑定的时候总是通过对象属性而不是通过直接传值的方式来做。

四、控制器(controller)

在 Angular 中,控制器的作用就是创建新的作用域,Angular创建一个控制器的时候都会为其创建一个$scope这个$scope就是一个新的作用域。当然你可以声明这个作用域和父作用域的关系,到底是隔离还是继承。

在angular中这样声明一个控制器:

 app.module(“home”, [])
      .controller(“MyController”, function($scope) {
           $scope.name = “Mr Lee”;
      });

在HTML中这样使用

 <div MyController>{{name}}</div>
 <!— 或者这样 —>
 <MyController>{{name}}</div>
 <!— 还有通过class或者注释等方式都可以使用 —>

Angular 是一个 MVVM 模型,即 Model - View - ViewModel,其中的 ViewModel 是视图对应的Model,在Angular中就是 $scope。因此 $scope的作用就是存放与对应视图相关的数据。比如上例中我们就是存储了一个名字,如果是一个个人名片,我们存储的就是这个人的基本信息。

在 Angular 中 , 存在一个$rootScope,所有的其他$scope形成了一颗以$rootScope为根节点的树。每一个 $scope 都负责对应视图的数据存储,业务逻辑等。

在一个 controller 的作用域范围内,可以直接使用 $scope 上的属性,比如你的$scope是这样声明的:

 $scope = { name: “Lily”, sayName: function(){alert($scope.name{});

那么你在HTML中可以这么使用 scope

 <h2>name: {{name}}</h2>
 <button ng-click=“sayName()”>say name</button>
时间: 2024-10-13 19:34:12

前端框架之Angular (一)的相关文章

如何选择前端框架:ANGULAR VS EMBER VS REACT

最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发布了0.14版本.还有很多流行的前端框架,像Backbone .Knockout及Aurelia.如果你想开发一个Web app,建议采用Angular,Ember或React三种框架中的一个.这三个框架可以说是安全级别最高,技术非常成熟的框架,而且有很多技术社区支持.所以你又开始纠结了,开发Web

前端框架之Angular(三)

这节说一下Angular的脏检查.功能和服务. 一.脏检查 Angular 内部通过 dirty check 来跟踪数据变化,这是双向数据绑定的实现基础. 所谓脏检查,就是 angular 会给每一个数据绑定一个 watcher,当到"特定检查阶段"时,angular就会逐个询问 watcher 它对应的数据有没有发生变化,如果有,则运行对应的监视器.直到没有任何脏数据为止.这个过程称为 digest 循环. 注意,并不是有一个定时线程来不停做脏检查.Angular 只有当特定的事件发

angular前端框架

总所周知,在前端开发中,大家用的比较多的框架就是angular,vue,react等,今天就为大家讲一下angular大家框架的原理及运用 1.本次所举的例子是以依赖require.js的, <script src="js/libs/require-2.3.3.min.js" data-main="main" charset="utf-8"></script> <script> document.documen

前端框架Vue、angular、React的优点和缺点

学习web前端开发中,会有很多的框架,那么目前流行的框架有哪些呢? 一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库. Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统. Vue.js的特性如下:    1.轻量级的框架    2.双向数据绑定    3.指令    4.插件化 优点: 1. 简单:官方文档很清晰,比 Angular 简单易学.  2. 快速:异步批处理方式更新 DOM.  3. 组合:用解

2017年前端框架、类库、工具大比拼

相比于JavaScript开发人员的数量,目前JavaScript框架.类库和工具的数量似乎更多一些.截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目.npmjs.org有50万个可用的软件包,每月下载量近100亿次. 本文将会讨论目前最为流行的客户端JavaScript框架.类库和工具以及它们之间的基本差异.也许本文无法告诉你哪个是最好的,但是最适合自己项目的,就是最好的. 类库 类库是一个有组织的功能集合.典型的类库包括字符串处理.日期.HTML D

程序员Web面试之前端框架等知识

基于前面2篇博客: 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门. 但是要动手干,还需要了解一些已有的前端框架.UI套件,即要站在巨人肩膀上而不是从轮子开始造汽车. 下面就Web开发用到的前端框架.UI套件.UI插件一一列举(排名不分先后): jQuery UI jQuery UI以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.包含了许多维持状态的小部件(Widget)

如何挑选适合的前端框架

来源于:https://github.com/RubyLouvre/agate/issues/8 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,是第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法. 在五六年,移动端还没有兴起,我们没有什么选择,就是jQuery.有人会说,jQuery只是类库,不是框架;但那时前端业务还没有像今天这么繁重,原本是后端干的事,全部挪到前端来,因为光是jQuery就可以包打天下.jQuer

2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那么些部分不符合心意,如果自己扩展,那就不是一般的工作量了. 然后是wex5,宣传上是最强大的移动开发框架,一旦测试,采用java的模式,将一个简单的工作直接变成了另一个windows编程的学习,那是一次痛苦的体验.当然也是因为wex5主要目标是app,而我要的仅仅是移动wap端.(wap这个词实际上

第八章 前端框架

源代码GitHub:https://github.com/ZhaoRd/Zrd_0001_AuthorityManagement 一.介绍 本Demo主要使用的前端框架有 bootstrap.angularjs.angle.bootstrap是推特公司的开源css框架,提供优美的界面元素;angularjs是google推出的前端js框架,最为核心的是:MVVM.模块化.双向数据绑定.依赖注入等等;angle是一个前端admin的管理框架,包括了诸多组件的使用方式,具有Angular/html/