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

最新推荐文章于 2022-12-14 09:47:59 发布

转载最新推荐文章于 2022-12-14 09:47:59 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/-scl/p/7687278.html

文章标签：

#javascript #前端 #ViewUI

本文介绍了AngularJS的基础概念，包括其核心特性如MVVM、模块化等，并提供了官方网站及学习资源链接。同时，详细讲解了如何在HTML页面中引入AngularJS，以及如何手动初始化AngularJS应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

转载于:https://www.cnblogs.com/-scl/p/7687278.html