AngularJs学习笔记系列第一篇，希望我可以坚持写下去。本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容，但也加入些许自己的理解与尝试结果。

一、总括

本文用于解释Angular初始化的过程，以及如何在你有需要的时候对Angular进行手工初始化。

二、Angular <script> 标签

本例用于展示如何通过推荐的路径整合Angular，实现自动初始化。

 
 <!doctype html>

 <html xmlns:ng="http://angularjs.org" ng-app>

 <body>

  ...

 <script src="angular.js">

 </body>

 </html>
 
  • 将sciprt标签放置于页面底部。这样做能避免因为加载angular.js而阻挡HTML的加载，从而降低应用的加载时间。我们可以在http://code.angularjs.org中获取到最新版本的angularJs。出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。但如果仅仅是研究学习使用的话，直接连接也无妨。
    • 选择：angular-[version].js 是方便阅读的一个版本，适合日常开发、调试使用。
    • 选择：angular-[version].min.js 是压缩、混淆后的版本，适合最终产品使用。
  • 放置”ng-app”到应用的根节点中，如果你想让angular自动启动你的应用，通常可以放置于<html>标签中。
<html ng-app>
  • 如果我们需要使用老派风格的directive语法”ng:”，那么我们需要加入一个xml-namespace到html标签中以“取悦”IE。（这个是一个历史原因，我们也不推荐使用ng:）
<html xmlns:ng="http://angularjs.org">

三、自动初始化

Angular会在DOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到，Angular会做以下事情：

  • 加载与module相关的directive。
  • 创建应用相关的injector（依赖管理器）。
  • 以ng-app指定根节点，开始对DOM进行相关“编译”工作。换言之，可以将页面的其中一部分（非<html>）作为根节点，从而限制angular的作用范围。
 
<!DOCTYPE HTML>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Bootstrap-auto</title>

    <style type="text/css">

        .ng-cloak {

            display: none;

        }

    </style>

</head>

<body>

    这里是ng-app外面的~~{{1+2}}

    <div ng-app class="ng-cloak">这里是ng-app里面~~~{{1+3*2}}</div>

    <script src="../angular-1.0.1.js" type="text/javascript"></script>

</body>

</html>
 

注：里面的”ng-cloak”，这个是用于在angular.js编译完成之前（对！没错！是编译完成之前，不是angularjs加载完成之前。所以，如果想很好地避免这个情况，最好的办法是优化应用的加载流程，或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器，所以最好使用class=”ng-cloak”的方式。编译完成后，这个class或属性会被删除。）隐藏模版，避免在页面显示原模版。

四、手工初始化

如果我们想进一步控制初始化进程(例如你需要通过script loader加载angular.js或者在angular编译页面前做一些操作)，那么我们可以用一个手工调用的启动方法去代替。

以下例子等同于使用ng-app这个directive：

 
<!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="rootOfApp" class="ng-cloak">这里是ng-app里面~~~{{1+3*2}}</div>

    <script src="../angular-1.0.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        angular.element(document).ready(function() {

            angular.bootstrap(angular.element(document.getElementById("rootOfApp")));

        });

    </script>

</body>

</html>
 

就是说，我们的代码可以按照以下步骤编写：

1. 在页面和其他代码加载完成后，找到应用模版的根节点；

2. 调用angular.bootstrap，让angular去将模版编译为一个可执行的，双向绑定的应用！

  1. AngularJs学习笔记--bootstrap
  2. AngularJs学习笔记--html compiler
  3. AngularJs学习笔记--concepts
  4. AngularJs学习笔记--directive
  5. AngularJs学习笔记--expression
  6. AngularJs学习笔记--Forms
  7. AngularJs学习笔记--I18n/L10n
  8. AngularJs学习笔记--IE Compatibility
  9. AngularJs学习笔记--Modules
  10. AngularJs学习笔记--Scope
  11. AngularJs学习笔记--Dependency Injection
  12. AngularJs学习笔记--Understanding the Model Component
  13. AngularJs学习笔记--Understanding the Controller Component
  14. AngularJs学习笔记--E2E Testing
  15. AngularJs学习笔记--Understanding Angular Templates
  16. AngularJs学习笔记--Using $location
  17. AngularJs学习笔记--Creating Services
  18. AngularJs学习笔记--Injecting Services Into Controllers
  19. AngularJs学习笔记--Managing Service Dependencies
  20. AngularJs学习笔记--unit-testing

AngularJs学习笔记--bootstrap的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  6. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  7. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  8. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

  9. AngularJs学习笔记--Managing Service Dependencies

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.managing_dependencies angular允许service将其他ser ...

随机推荐

  1. Windows程序设计之Hello，Windows 98程序的声音调试记录

    最近在Window程序设计第五版,刚看到第三章,第三章中有一个程序调用了一个多媒体对象库winmm.lib库,由于该库不再默认项目中,如果不手动添加,编译时会提示错误而无法运行,但是书上用的是Visu ...

  2. 获取月份对应的day

    function getDaysInMonth(month, year) { , , , , , , , , , , , ]; //主要处理二月份的天数 ) && (year % == ...

  3. UCOS2_STM32F1移植详细过程（三）

    Ⅰ.概述 上一篇文章是讲述ST芯片相关的配置和OS裁剪相关的配置,接着上一篇文章来讲述关于UCOS的移植,该文主要针对uC/OS-II Ports下面os_cpu_a.asm.os_cpu_c.c和o ...

  4. 1.html5究竟是什么

    1.html5的起源,历史背景…… 按照一般的套路,我这里应该对html5的起源和发展历史,其优越性等大书特书一番.但既然你有意识地专门去找类似的文章,说明你早有相应的认识,就算没有,类似的东西网上也 ...

  5. Moses创建一个翻译系统的基本过程记录，以后会按照每个过程详细说明，并给出每个步骤的参数说明

    软件需求: 首先你必须要有Moses(废话哈哈).然后要有GIZA++用作词对齐(traning-model.perl的时候会用到).IRSTLM产生语言模型 大致步骤: 大体的步骤如下: 准备Par ...

  6. public、private、protected 与 默认 等访问修饰符

    1)public(公共的):被public修饰的属性和方法可以被所有类访问. 2)private(私有的):被private修饰的属性和方法只能在改类的内部使用. 3)protected(受保护的): ...

  7. Helloworld模块之内核makefile详解

    Hello World 模块以及对应的内核makefile详解 hello.c: #include <linux/module.h> //所有模块都需要的头文件 #include < ...

  8. viewPager+Handler+Timer简单实现广告轮播效果

    基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...

  9. Object C学习初步

    最近乘着项目不太紧张的时候,赶紧给自己冲了一下电.其实我自己最熟悉的平台应该是.net,所以当初上手windows phone的话是很快,我记得当初是一边跟着项目进展,一边自己开始学习前台的XAML语 ...

  10. Go中的指针与函数接收器

    Go中使用*号表示指针,但是没有指针算数,不能对其进行加减.同时内存管理都由Go来负责,不需要拖动释放内存. Go中的函数接收者,可以为值类型,也可以是引用类型. 看代码: package main ...