Angularjs 基础入门

针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写，所以这里我就按照一种简单的思路开始写

1.angular.element
2.angular.Bootstrap

我们非常清楚ng-app应用到节点，angular自动帮你初始化，初始化的过程分为如下几个步骤

1.angular会在document load的时候自动初始化，首先会找到ng-app这个指令指定的节点。
2.加载与module相关的指令
3.创建与应用相关的injector(依赖管理器)
4.以制定的ng-app为根节点，开始对Dom进行compile

现在我们自己初始化一下，做一个等同于ng-app这个指令的东西。angular.element这个就是包装,包装原始DOM元素或HTML字符串作为jQuery元素。angular.Bootstrap可以手动初始化脚本，我们用这两个来初始化这个脚本

代码如下:

<!DOCTYPE HTML>
  <html lang="zh-cn">
  <head>
  <meta charset="UTF-8">
  <title>Bootstrap-manual</title>
  <style type="text/css">
  .ng-cloak {
  display: none;
  }
  </style>
  </head>
  <body>
  这里是ng-app外面的~~{{1+2}}
  <div id="widuu" >这里是ng-app里面~~~ {{1+2}}</div>
  <script src="angular.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  angular.element(document).ready(function() {
  angular.bootstrap(angular.element(document.getElementById("widuu")));
  });
  </script>
  </body>
  </html>

2.compiler

我们清楚的看到angularjs的官方文档上边都是驼峰式命名法，譬如ngApp、ngModule、ngBind等等这些都是相关的指令，其中html compiler就是允许我们自己定义元素 属性和标签，Angular将这些附加行为称为directives。
官方文档对compiler的解释是这样的

代码如下:

Compiler
  Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.

Compile: traverse the DOM and collect all of the directives. The result is a linking function.

Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.

Some directives such as ng-repeat clone DOM elements once for each item in a collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.

compiler是angular的一个(service),负责遍历dom节点和查找属性，编译分为两个阶段：

1.编译：遍历节点和收集所有的directives，返回一个链接函数linking function
2.链接：将directives绑定到一个作用域（scope）中，创建一个实况视图（live view）。在scope中的任何改变，将会在视图中得到体现（更新视图）；任何用户对模版的活动（改变），将会体现在scope model中（双向绑定）。这使得scope model能够反映正确的值。
一些directives，诸如ng-repeat，会为每一个在集合（collection）中的元素复制一次特定的元素（组合）。编译和链接两个阶段，使性能得以提升。因为克隆出来的模版(template)只需要编译一次，然后为每一个集合中的元素进行一次链接（类似模版缓存）。

3.一步一步创建自己的directive

1.了解directive
首先了解，directive是按照驼峰式命名法，如ngModule,当编译的时候匹配是这样的，举例如下：

代码如下:

<input ng-model="foo">
  <input data-ng:model="foo">

directive可以使用x-或者data-作为前缀，可以使用:, -, 或者 _等分隔符来转换驼峰式命名方法，如下所示：

代码如下:

<span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>

一般我们使用ng-bind对应ngBind，这种格式
$compile可以匹配directive基于元素名称,属性,类名以及注释

代码如下:

<my-dir></my-dir>
  <span my-dir="exp"></span>
  <!-- directive: my-dir exp -->
  <span class="my-dir: exp;"></span>

　在编译过程中，compiler通过$interpolate服务匹配文本与属性中的嵌入表达式（如{{something}}）。这些表达式将会注册为watches，并且作为digest cycle的一部分，一同更新。下面是一个简单的interpolation：
<img src="img/{{username}}.jpg"/>Hello {{username}}!
  
2.编译的步骤

HTML“编译”的三个步骤：

1. 首先，通过浏览器的标准API，将HTML转换为DOM对象。这是很重要的一步。因为模版必须是可解析（符合规范）的HTML。这里可以跟大多数的模版系统做对比，它们一般是基于字符串的，而不是基于DOM元素的。
2. 对DOM的编译（compilation）是通过调用$comple()方法完成的。这个方法遍历DOM，对directive进行匹配。如果匹配成功，那么它将与对应的DOM一起，加入到directive列表中。只要所有与指定DOM关联的directive被识别出来，他们将按照优先级排序，并按照这个顺序执行他们的compile() 函数。directive的编译函数（compile function），拥有一个修改DOM结构的机会，并负责产生link() function的解析。$compile()方法返回一个组合的linking function，是所有directive自身的compile function返回的linking function的集合。
3. 通过上一步返回的linking function，将模版与scope连接起来。这反过来会调用directive自身的linking function，允许它们在元素上注册一些监听器（listener），以及与scope一起建立一些watches。这样得出的结果，是在scope与DOM之间的一个双向、即时的绑定。scope发生改变时，DOM会得到对应的响应。

代码如下:

var $compile = ...; // injected into your code
  var scope = ...;
  var html = '<div ng-bind='exp'></div>';
  // Step 1: parse HTML into DOM element
  var template = angular.element(html);
  // Step 2: compile the template
  var linkFn = $compile(template);
  // Step 3: link the compiled template with the scope.
  linkFn(scope);

ngAttr属性绑定

代码如下:

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
  </svg>

今天就写到这里，明天开始写创建directive ~~~控制篇幅不要太长，这章主要概念的多~~~

赞 (0)

相关推荐

  • AugularJS从入门到实践(必看篇)

    AugularJS从入门到实践(必看篇)

    前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法.(引用百度百科) 例如: 使用双大括号{{}}语法进行数据绑定: 使用DOM控制结构来实现迭代或者隐藏DOM片段: 支持表单和表单的验证: 能将逻辑代码关联到相关的DOM元素上: 能将HTML分组成可重用的组件. 本篇学习主要

  • AngularJS实用基础知识_入门必备篇(推荐)

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q

  • AngularJs 60分钟入门基础教程

    AngularJs 60分钟入门基础教程

    AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了

  • Angularjs 基础入门

    针对于这个其实我不太清楚应该针对于哪些人或者说不知道从哪开始写,所以这里我就按照一种简单的思路开始写 1.angular.element 2.angular.Bootstrap 我们非常清楚ng-app应用到节点,angular自动帮你初始化,初始化的过程分为如下几个步骤 1.angular会在document load的时候自动初始化,首先会找到ng-app这个指令指定的节点. 2.加载与module相关的指令 3.创建与应用相关的injector(依赖管理器) 4.以制定的ng-app为根节

  • 一看就懂的ReactJs基础入门教程-精华版

    一看就懂的ReactJs基础入门教程-精华版

    一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/re

  • AngularJS基础 ng-if 指令用法

    AngularJS ng-if 指令 AngularJS 实例 取消选中,并移除内容: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <b

  • JavaScript_object基础入门(必看篇)

    之前写Java时老是有点蒙,大部分都是用jQuery,但原理还不是很清楚,最近一段时间在系统的学习JavaScript,有什么问题或错误请指出,多谢..................... Object所有类的基础类 var obj = new Object(); var obj = {}; //实例化对象 给对象设置属性分为两种: 1.使用直接量的方式:对象.属性/方法,这种方式直观.易懂 obj.name = '张三'; obj.age = 20; obj.sex = '男'; obj.s

  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

  • Bootstrap零基础入门教程(二)

    Bootstrap零基础入门教程(二)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

  • React Native基础入门之初步使用Flexbox布局

    前言 在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小步>. 在本篇里,让我们一起来了解一下,什么是Flexbox布局,以及如何使用. 一.长度的单位 在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示"与设备像素密度无关的逻辑像素点". 这个怎么理解呢? 我们知道,屏幕上一

  • Android开发之InetAddress基础入门简介与源码实例

    最近在学习soket编程中,看到有需要获取到IP地址之类的需求,所以就去看了下如何获取到主机名的IP地址. 其实就是需要用到一个类InetAddress.他是在java.net包下面. InetAddress类的对象用于IP地址和域名,该类提供以下方法: getByName(String s):获得一个InetAddress 类的对象,该对象中含有主机的IP地址和域名,该对象用如下格式表示它包含的信息:www.sina.com.cn/202.108.37.40: String getHostNa

  • MySQL数据库基础入门之常用命令小结

    本文实例讲述了MySQL数据库基础入门之常用命令.分享给大家供大家参考,具体如下: 接上一篇:MySQL数据库主从同步实战过程 mysql命令介绍 mysql 是数据库管理命令 通过mysql --help来查看相关参数及使用说明 mysql --help #mysql数据库管理命令 Usage: mysql [OPTIONS] [database] #语法格式 --help #查看帮助文档 --auto-rehash #自动补全功能 -A, --no-auto-rehash #不需自动补全 -

  • Android 基础入门教程——开发环境搭建

    Android 基础入门教程——开发环境搭建

    现在主流的Android开发环境有: Eclipse + ADT + SDK Android Studio + SDK IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的Eclipse,而谷歌宣布不再更新ADT后,并且官网也去掉了集成Android开发环境的Eclipse下载链接,各种现象都表示开发者最后都终将过渡到Android Studio,当然这段过渡时间会很长,但如果你是刚学Android的话建议直接冲Android Studio着手:而且很多优秀的开源项目都是基于

随机推荐