Angular.js基础学习之初始化

一、绑定初始化，自动加载

通过绑定来进行angular的初始化，会把js代码侵入到html中。

ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。

<body ng-app="myApp">
 <div ng-controller="myCtrl">
  {{ hello }}
 </div>
 <script type="text/javascript">
  var myModule = angular.module("myApp",[]);
  myModule.controller("myCtrl",function($scope){
   $scope.hello = "hello,angular!";
  });
 </script>
</body>

二、手动初始化

如果想对对初始化有更多的控制权，可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情，比如改变模板某些内容。

Angular中也提供了手动绑定的api——bootstrap，它的使用方式如下：

angular.bootstrap(element, [modules], [config]);

其中第一个参数element:是绑定ng-app的dom元素；

  • modules：绑定的模块名字
  • config：附加的配置

值得注意的是：

  • angular.bootstrap只会绑定第一次加载的对象。
  • 后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示。
<html>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<body id="body">
 <div ng-controller="myCtrl">
  {{ hello }}
 </div>
 <script type="text/javascript">
  var app = angular.module("bootstrapTest",[]);
  app.controller("myCtrl",function($scope){
   $scope.hello = "hello,angular from bootstrap";
  });

  // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
  angular.bootstrap(document,['bootstrapTest']);
 </script>
</body>
</html>
<html>

 <head>
 <script src="angular.js"></script>
 <script>

 // 创建moudle1
 var rootMoudle = angular.module('moudle1', []);
 rootMoudle.controller("controller1",function($scope){$scope.name="aty"});

 // 创建moudle2
 var m2 = angular.module('moudle2', []);
 m2.controller("controller2",function($scope){$scope.name="aty"});

 // 页面加载完成后,再加载模块
 angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById("div1"),["moudle1"]);
  angular.bootstrap(document.getElementById("div2"),["moudle2"]);
 });

 </script>

 <head>
 <body>
 <div id="div1" ng-controller="controller1">div1:{{name}}</div>
 <div id="div2" ng-controller="controller2">div2:{{name}}</div>
 </body>

</html>

总结

以上就是关于angular.js初始化的全部内容了，希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 手动初始化Angular的模块与控制器

    在上面的文章中,都是在html元素上绑定ng-app="myApp",然後使用angular.module('myApp',[]);来初始化模块的操作,下面我们来用angular.bootstrap方法手动初始化模块. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • Angularjs在初始化未完毕时出现闪烁问题的解决方法分析

    本文实例讲述了Angularjs在初始化未完毕时出现闪烁问题的解决方法.分享给大家供大家参考,具体如下: 方法1: 使用ng-cloak指令,在绑定数据的区域使用该指令并设置该指令的样式为隐藏即可,如下所示: Html: <body ng-controller="QuberController" ng-cloak class="ng-cloak"> Css: .ng-cloak { display: none; } 方法2: 使用ng-bind指令来代替

  • AngularJS使用ng-Cloak阻止初始化闪烁问题的方法

    本文实例讲述了AngularJS使用ng-Cloak阻止初始化闪烁问题的方法.分享给大家供大家参考,具体如下: 在做angular的SPA开发时,我们经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({% raw %} {{ express }} {% endraw %} ),或者是模块(div)的闪烁.对于这个问题由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready).对于angular会在DOM ready完会才回去解析html view Templ

  • AngularJS初始化静态模板详解

    AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model.ng-click给动态添加的dom元素绑定数据和事件,怎么办? 动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串

  • AngularJS初始化过程分析(引导程序)

    概览 这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化. AngularJS的 <script> 标签 这个示例展示了我们推荐的整合AngularJS的方法,它被称之为"自动初始化". 复制代码 代码如下: <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app>     <body>         ..

  • Angular.js基础学习之初始化

    一.绑定初始化,自动加载 通过绑定来进行angular的初始化,会把js代码侵入到html中. ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的. <body ng-app="myApp"> <div ng-controller="myCtrl"> {{ hello }} <

  • Angular.js指令学习中一些重要属性的用法教程

    Angular指令 定义一个指令的方法非常简单,只需要调用`directive`方法即可: var app=angular.module('myapp',[]); app.directive(name,fn) 1. 基础指令 var app=angular.module('myapp',[]); app.run(function($templateCache){ $templateCache.put('cache','<h3>模板内容来源于缓存</h3>') }); app.dir

  • Three.js基础学习教程

    Three.js基础学习教程

    一.Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件 (To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.) 大致意思是使用

  • Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head> <meta charset="utf-8"> <title>Vue test</title> <style type="text/css"> body {font-family: Verdana;} p { fo

  • Three.js基础学习之场景对象

    前言 本文主要给大家介绍了关于Three.js场景对象的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 通过这一段时间的学习,发现还没有介绍过场景的基本组件.这一节就简单的介绍一下相关的内容: 如果我们想让物体显示出来,首先,我们需要有一个渲染器(new THREE.WebGLRenderer() )来渲染模型和相机. 渲染的模型需要放到场景(THREE.Scene() )对象中,场景对象就是专门放置模型等一系列组件的地方,必须有一个模型和一个光源才可以显示出来模型.

  • Js基础学习资料

    1.防止不支持js的浏览器出问题可以这样处理JS代码 <script type="text/javascript"> <!-- document.write("Hello World!"); //--> </script> 2.JS放置位置: header:确保脚本被调用时已经加载 body:页面载入时就调用 外部js文件:不包含<script>标签 用法:<script src = "xxx.js&q

  • Angular.js初始化之ng-app的自动绑定与手动绑定详解

    前言 众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap() . 本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍. 一.传统的绑定初始化 <html> <head> <meta http-equiv="Co

  • Angular.Js之Scope作用域的学习教程

    scope是什么? 大家都知道在AngularJS 中作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-

  • Angular.js自定义指令学习笔记实例

    本文给大家分享angular.js学习笔记之自定义指令实例代码讲解,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6

  • Javascript入门学习第一篇 js基础第1/2页

    Javascript学习第一篇 js基础 1 , javascript字符集: javascript采用的是Unicode字符集编码. 为什么要采用这个编码呢? 原因很简单,16位的Unicode编码可以表示地球人的任何书面语言.这是语言 国际化的一个重要特征.(大家也许见过用中文写脚本,比如:function 我的函数() {}  ); Javascript中每个字符都是用2个字节表示的.(因为是16位编码) 2 ,大小写敏感: js是一种区分大小写的语言. 注意下:以前我也犯过的错误. HT

随机推荐