南宁企业网站建设:开始使用AngularJS-慕枫南宁网络公司

新闻详情

南宁企业网站建设:开始使用AngularJS

每隔一段时间出现一个新工具,就像突然出现,它渗透到遗忘。 不 AngularJS 虽然。 虽然被Misko约自2009年创立以来,与尊敬听取 AngularJS已经获得很多的关注在过去的几个月 。

人们谈论它,开发人员已经集成在他们的作品和作者写书,获得大量的现金。 所以, AngularJS是什么和你为什么要跳 吗? 改变生活吗? 的确是! 让我来告诉你为什么。

注意: 南宁企业网站建设强烈建议你先熟悉JavaScript在深入研究AngularJS之前。 如果你不熟悉 MVC 和 DOM ,我建议进一步阅读更多关于他们在继续之前,否则你可能会感到困惑与大多数在本文中使用的术语。

推荐阅读: 学习编程:10的误解,都不是真的

AngularJS是什么?

AngularJS不仅仅是另一个JavaScript框架。 当然,我们有骨干,灰烬,最热的jQuery,但AngularJS在很多方面是不同的。

数据绑定和建造为单页面应用程序(SPA)

首先,AngularJS 一个是专为水疗的数据绑定框架 。 意思,您可以轻松地构建一个应用程序不使用任何其他库,因为它已经有你所需要的一切。 它还维护同步模型和视图。

建立一个温泉的美妙之处在于,它模仿桌面页面是相同的所有经验,仅仅更改视图以及URL - AngularJS处理路由以及观点。 这是 更快更流畅 这种方式。 就好像你刚开了一个桌面应用程序,所需的一切。

另一件事是, 不像其他水疗,浏览器历史实际上是 。 举个例子,如果你想点击后退按钮回到之前的观点,AngularJS会带你回到前面的视图。 大多数温泉不工作。

模型-视图-控制器实现了对吧

AngularJS实现MVC美丽。 大多数使用MVC框架 需要单独的应用程序分成多个模块,然后编写代码,将连接在一起 。 而这背后的原因是使工作更加灵活和可重用的代码,这导致许多编码恐怖,特别是对于懒惰的开发人员(或昏昏欲睡)。 AngularJS处理这种美丽只需需要j 您的应用程序分割成不同的模块 。 然后处理。

动画

当然一个单页面应用程序不能没有适当的动画很好看。 如前所述,AngularJS是一个功能丰富的框架,有你需要的所有东西在构建通用的应用程序。 因此, 它提供了一个简单的方法来介绍动画 在每一个视图一样jQuery。

这是一个 很好的例子 AngularJS如何处理的动画。

但这只是AngularJS的表面。 这里更多的是它能做什么:

· 

数据验证

· 

· 

依赖注入

· 

· 

处理自定义逻辑

· 

· 

多元化的指令

· 

· 

之间共享数据的控制器

· 

· 

提高HTML

· 

· 

DOM操作的帮助下jQlite(内置)

· 

· 

AJAX

· 

· 

路由

· 

· 

测试

· 

· 

和许多更多

· 

一个比较

现在,让我们来看一看如何AngularJS作品通过比较常规的JavaScript和jQuery。

香草JavaScript

不使用任何JavaScript库 就是这个样子,你输入实时显示数据。

1

2

3.

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20.

21

<超文本标记语言>

    <头>

    <标题> < /香草JavaScript标题>

    头>

 

    <身体>

        名称:<输入 id=“textInput” 类型=“文本” />

        <br/>

        你的名字是<跨度 id=“名称”> < /跨度>

         

        <脚本>

            var textInputElement = . getelementbyid (“textInput”),

            nameElement = . getelementbyid('名称');

            textInputElement.addEventListener(“弹起”,函数(){

            var文本= textInputElement.value;

            nameElement。 innerHTML =文本;

            });

        脚本>

         

    身体>

超文本标记语言>

JQuery

使用jQuery,显示您输入的数据 变得更简单 因为来回的大部分是由jQuery。 因此,使您能够编写更少的代码。

1

2

3.

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<超文本标记语言>

    <头>

        <标题jQuery > < /标题>

        <脚本 src=“http://code.jquery.com/jquery-2.1.1.min.js”> < /脚本>

    头>

     

    <身体>

    名称:<输入 id=“textInput” 类型=“文本”/>

    <br/>

    你的名字是<跨度 id=“名称”> < /跨度>

     

    <脚本>

        $ (' # textInput ')。(“弹起”,函数(){

        $(' #名称'). html ($ (' # textInput) .val ());

         });

    脚本>

    身体>

     

超文本标记语言>

AngularJS

AngularJS让一切一个较高的等级。 不仅是轻量级框架, 你写你的HTML变得更容易 了。

1

2

3.

4

5

6

7

8

9

10

11

12

13

14

< ! DOCTYPE html >

 

<超文本标记语言 ng-app >

    <头>

        <脚本 src=“angular.min.js”> < /脚本>

        <标题> AngularJS < /标题>

    头>

     

    <身体>

        名称:<输入 类型=“文本” ng-model=“名称” />

        <br />

        你的名字是{{名称}}

    身体>

超文本标记语言>

如上所述,AngularJS在于的美丽 让你编写的代码更少,同时保持应用程序的完整性 。 几乎没有来回代码,因为大多数的模块是通过AngularJS串接起来。 另一个值得注意的事情是 你不需要操纵控制器为了改变视图 。

AngularJS的局限性

AngularJS并不全是阳光和彩虹。 如果你是 旨在创建一个应用程序,简单的计算 ——一个计算器,拼图游戏、动画、动态形式等,那么AngularJS是你正在寻找的框架。

然而,如果你正在建设一个大型和密集的应用程序像一个管理工具,你可能想要偏离从AngularJS并不发达,或者至少在结合使用其他框架。

AngularJS是 为快速原型建造 ,专门为通用的应用程序,但存在这样的情况:您可以使用它来构建应用程序的大尺度,但尚未获得声望。

AngularJS资源

学习的基础 在CodeSchool AngularJS 。 这是一个免费的课程,是由谷歌。 它 教一个如何使用AngularJS从许多不同的角度 。 别忘了检查 AngularJS的YouTube频道 开发人员自己发布教程和新闻更新。

但如果你是更多的 一种文档的开发人员 ,您可能希望查看 AngularJS API文档 。 精通JavaScript的人来说,这个文档应该容易的微风。

你不需要重新发明轮子 有很多模块,您可以使用和改进 在 ngmodules.org的库 。

如果你有资金,并认真学习AngularJS,我强烈推荐检查 AngularCourse.com 与它的 7小时的高清视频 课程 这将帮助您构建一个真实的产品。

你是redditor吗? 如果你是,你可以查看 / r / angularjs 为 社区讨论和支持 。

AngularJS在行动

ngSweetAlert

这是一个 很甜蜜的替换 JavaScript的单调的“警报”。

 

Angular-nvD3图表

如前所述,您可以使用AngularJS中间计算简单。 使用 Angular-nvD3 ,您可以根据您的需要定制您的图表。

南宁企业网站建设 

颤抖的登录表单

你甚至可以让表单时验证。 别忘了检查 教程 !

 

AngularJS滑动和词搜索难题

 简单的拼图 显示了如何灵活和简单AngularJS。 别忘了叉 GitHub 也

 

2048游戏

还记得这个游戏吗? 这是 2048 数量已经不见踪影了,因为我不想再次上瘾。 游戏使用AngularJS被重塑。 这太酷了,不是吗? 检查 教程 为自己和学习!

 

结论

AngularJS是 一个强大的框架,南宁企业网站建设可以帮助开发人员加快开发web应用程序 。 AngularJS的使用是越来越受欢迎的日子,我强烈推荐跳跃在趋势是一个动态的和有帮助的社区等你加入!

 


联系电话 400-6065-301

微信咨询 寒总监