AngularJS入门.docVIP

AngularJS入门 一、总括 本文用于解释AngularAngular进行手工初始化。 二、Angular?script? 本例用于展示如何通过推荐的路径整合Angular !doctype html html xmlns:ng= ng-app body ... script src=angular.js /body /html 将sciprtangular.js而阻挡HTML的加载，从而降低应用的加载时间。我们可以在中获取到最新版本的angularJs。出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。但如果仅仅是研究学习使用的话，直接连接也无妨。 选择：angular-[version].js? 选择：angular-[version].min.js? 放置”ng-app”到应用的根节点中，如果你想让angularhtml标签中。 html ng-app 如果我们需要使用老派风格的directive”ng:”，那么我们需要加入一个xml-namespacehtml标签中以“取悦”IE。（这个是一个历史原因，我们也不推荐使用ng:） html xmlns:ng= 三、自动初始化 AngularDOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到，Angular会做以下事情： 加载与moduledirective。 创建应用相关的injector 以ng-appDOM进行相关“编译”工作。换言之，可以将页面的其中一部分（非html）作为根节点，从而限制angular的作用范围。 !DOCTYPE HTML html lang=zh-cn head meta charset=UTF-8 titleBootstrap-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.jsangularjs加载完成之前。所以，如果想很好地避免这个情况，最好的办法是优化应用的加载流程，或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器，所以最好使用class=”ng-cloak”的方式。编译完成后，这个class 四、手工初始化 如果我们想进一步控制初始化进程(script?loader加载angular.js或者在angular编译页面前做一些操作)，那么我们可以用一个手工调用的启动方法去代替。 以下例子等同于使用ng-appdirective： !DOCTYPE HTML html lang=zh-cn head meta charset=UTF-8 titleBootstrap-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.bootstrapangular去将模版编译为一个可执