关于html:如何快速上手-angularjs

摘要:angular.js 精确的来说,应该不是一个框架,是一个 js 库,一个依赖于 jQuery 的进一步封装,去除繁琐的 DOM 操作,应用数据驱动的 MVC 模块化库。

哎,很好受,间断两个大坑,都被我碰上了,以前没有写过 angular,还认为 angular 就是跟 vue, react 一样的框架,没想到 angular.js 跟 angular2 ,居然没有半毛钱关系,我是服了。居然是一个老古董我的项目。

只能退一步想了,先把根底地基打好了,前面再深刻框架原理。

还是依照三大步骤:

  • what: 什么是 angular.js
  • why: 为什么要应用 angular.js
  • how: 如何应用 angular.js

什么是 angular.js

angular.js 精确的来说,应该不是一个框架,是一个 js 库,一个依赖于 jQuery 的进一步封装,去除繁琐的 DOM 操作,应用数据驱动的 MVC 模块化库。

这里扯到 MVC 这个词语,也不是很分明,我本人的了解 M 其实就是 Module 模块,一个 .html 就是一个模块, V 其实就是咱们 .html 外面那些 DOM 元素, C 就是咱们用来操作 V 那些 js 脚本。

我大略画了一个简略的草图:

不晓得对不对,如果不对,恳请各位大佬,提出贵重的倡议,让我有更大的晋升,谢谢。

为什么要应用 angular.js

额,我必须要吐槽一下,为毛还要应用 angular.js,为毛不应用 angular2,好歹让我入门 ts 也好啊,好了,既来之,则安之。

用这个 js 库的一个要害起因就是因为能够去除繁琐的 DOM 操作。
应用数据驱动视图的形式,进行开发,十分高效。

如何应用 angular.js

  • ng-app 加载一个入口利用模块

var app = angular.module('ngApp', []);

  • ng-init 初始化数据,有点相似,Vue 我的项目的 let app = new Vue();

<div ng-app="ngApp" ng-init="message='hello world'"></div>

  • ng-controller 控制器有点相似 Vue 中的 data() 属性。
  • ng-controller 控制器
<div ng-app="ngApp" ng-init="message='hello world'" ng-controller="ngController"></div>

<script type="text/javascript">
var app = angular.module('ngApp', [])
var controller app.controller('ngController', function($scopr) {})
</script>
  • ng-bind 数据绑定

有点相似 Vue 中的 v-bind

  • ng-model 数据双向绑定

有点相似 Vue 中的 v-model

 <input type="text" ng-model="message">
  • ng-repeat 数据循环
    有点相似 Vue 中的 v-for

 <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
      <p>应用 ng-repeat 来循环数组</p>
      <ul>
        <li ng-repeat="x in names">
          {{ x }}
        </li>
      </ul>
    </div>
  • ng-if 为HTML减少抉择性能,只有在表达式值为true时,以后元素才增加到DOM树
    有点相似 Vue 中的 v-if
  • ng-show 有点相似 v-show
  • ng-src 有点相似 :src
  • ng-click 有点相似 @click
  • ng-style 有点相似 :style
  • ng-class 有点相似 :class
  • ng-show/ng-hide 有点相似 jq 的中 show(),hide()
  • ng-disabled 有点相似 :disabled
  • ng-checked 有点相似 :checked
  • $scope 有点相似 Vue 中的 data() 属性
  • filter 过滤器,有点相似 Vue 中的 filter
  • $scope.$watch 有点相似 Vue 中的 watch 属性

明天就先到这里吧,其实应该是有些先入为主了,因为其实 Vue 是学了 angular.js 的思维的。

这里有一个很重要的思考形式就是迁徙思考。

点击关注,第一工夫理解华为云陈腐技术~

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据