Angular JS--Angular的引入和初始化

1.Angular JS简介

　　Angular JS是Google开发的一个前端JS框架。最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入。

　　文档网站：http://www.angularjs.net.cn/

　　视频学习地址：http://www.imooc.com/learn/156

2.Angular JS下载

　　官方网站：https://code.angularjs.org/

　　选择最新的版本，然后下载

　　

3.页面中如何使用Angular JS

　　在HTML页面底部通过<script>标签进行引入。放置在页面底部的好处是：避免HTML加载时被Angular JS滞带

<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
    ...
    <script src="angular.js">
  </body>
</html>

　　如果要在项目中自动启动Angular，那就把ng-app放入根节点中，通常是<html>标签<html ng-app>

　　如果项目要在IE7上运行，就加上id="ng-app"像这样<html ng-app id="ng-app">

4.自动初始化

　　1.在DOMContentLoaded事件触发

　　2.在angular.js脚本被执行的同时将document.readyState设置为"complete"

　　过程：初始化时，Angular会去找ng-app这个指明应用开始所在的指令，如果ng-app被找到，Angular就会加载ng-app指令所指定的模块，然后根据ng-app所在的根节点遍历和编译DOM树，然后创建所需要的injector

5.手动初始化

<!doctype html>
<html xmlns:ng="http://angularjs.org">
  <body>
    Hello World!
    <script src="http://code.angularjs.org/angular.js"></script>
    <script>
       angular.element(document).ready(function() {
         angular.module('myApp', []);
         angular.bootstrap(document, ['myApp']);
       });
    </script>
  </body>
</html>

 

　　　

posted @ 2017-10-18 16:14  孟夏草木长  阅读(680)  评论(0)  编辑  收藏  举报