人生若只如初见—angularJS初识

发布于 / 代码 / 19 条评论

angularJS01

angularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
在百度百科中是这样介绍的:AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小部分,而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD(增删改查)。构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。这些都是angularJS的重要功能,我们的学习也是围绕着angularJS的这些功能来学习的。
当然有优点肯定也是有缺点的,Angularjs提供了页面开发更高层次的抽象,简化了应用程序的开发。 同时也损失了一些灵活性,所以,游戏,图形编辑等网页应用不适合使用Angularjs来实现。、
而在w3c的菜鸟网是这样介绍angularJS的:AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。,这是说明angularJS的CURD不再像以前那样使用多个页面,每个页面完成自己的功能,而是我们所有的功能都会在一个页面内完成。其实angularJS的本质就是讲HTML的功能通过angularJS的引擎再次的渲染,使得HTML更加的强大。说了也很多了,那么angularJS到底应该怎么写呢?下面我们来看看吧:
要使用angularJS开发页面,首先要创建web项目,这个就不说了,谁都会的,其次就是要引入angularJS的js文件:

在开发的时候,建议大家使用没有压缩的,因为查看源代码容易些,但是项目上线后,一定要使用压缩版的,因为这样可以节省流量和减轻页面响应的时间。
Hello_angular.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>hello angularjs</title>
 <!--
 时间:2016-10-16
 描述:导入angularJS的库文件
 -->
 <script src="js/angular.js" type="text/javascript"></script>
 <script>
 </script>
</head>
<body>
 <!--
 时间:2016-10-16
 描述:ng-app表示这个div是一个由angularJS所创建接管的应用部分
 -->
 <div ng-app>
 <!-- 
 ng-model表示 ng-model指令
 绑定了 HTML表单元素到 scope 变量中。
 如果 scope 中不存在变量, 将会创建它。
 -->
 <input type="text" ng-model="username"><br>
 <!--
 时间:2016-10-16
 描述:{{}}两个大括号是angularJS的表达式
 这个表达式会输出scope中的变量值
 注意:angularJS中是实现双向绑定的
 -->
 <h1>hello {{username}}</h1>
 <input type="text" ng-model="username" />
 </div>
</body>
</html>

当我们中的一个值在发生变化时,同时其他的也在发生变化,这就是angularJS中的数据的双向绑定。

转载原创文章请注明,转载自: 造梦先生 » 人生若只如初见—angularJS初识
  1. avatar

    ❓ 😛 🙁 👿 ❗ 🙂 😳 😀 😮 啦啦啦

    1. avatar
      @孙李博 哈哈哈
  2. avatar

    [url=http://dlaw-firm.com/index.php?option=com_k2&view=itemlist&task=user&id=403790]bestwebcam[/url]

  3. avatar

    [url=http://dlaw-firm.com/index.php?option=com_k2&view=itemlist&task=user&id=403790]bestwebcam.us.com[/url]

  4. avatar

    wh0cd393889 [url=http://valtrex2019.com/]valtrex[/url]

  5. avatar

    wh0cd393889 [url=http://xenical2019.com/]xenical2019[/url]

  6. avatar

    wh0cd393889 [url=http://xenical2019.com/]xenical 120mg no prescription[/url]

  7. avatar

    wh0cd393889 [url=http://lisinopril2019.com/]lisinopril2019.com[/url]

  8. avatar

    wh0cd615788 [url=http://propecia2019.com/]propecia generic[/url]

  9. avatar

    wh0cd615788 [url=http://tetracycline2019.com/]tetracycline[/url]

  10. avatar

    wh0cd615788 [url=http://prednisone2019.com/]prednisone[/url]

  11. avatar

    wh0cd837687 [url=http://atenolol.in.net/]atenolol[/url]

  12. avatar

    wh0cd837687 [url=http://stratterabest.us.com/]generic atomoxetine[/url]

  13. avatar

    wh0cd837687 [url=http://atarax.icu/]buy atarax online[/url]

  14. avatar

    wh0cd1059586 [url=http://tadalafil.bio/]tadalafil[/url]

  15. avatar

    wh0cd1059586 [url=http://neurontin.icu/]medication neurontin[/url]

  16. avatar

    wh0cd171990 [url=http://zoloft.team/]zoloft[/url]

  17. avatar

    wh0cd171990 [url=http://atarax.icu/]atarax[/url]

  18. avatar

    wh0cd393889 [url=http://stratterabest.us.com/]Strattera[/url]