zoukankan      html  css  js  c++  java
  • AngularJS学习之模块

    1.模块定义了一个应用程序;模块是应用程序中不同部分的容器;模块是应用控制器的容器;控制器通常属于一个模块

    2.创建模块:你可以通过AngularJS的angular.module函数来创建模块:

     <div ng-app="myApp">...</div>

    <script>

    var app=angular.module("myApp",[]);

    </script>

    3.添加控制器:可以使用ng-controller指令来添加应用的控制器:

    <div ng-app="myApp" ng-controller="myCtrl">

    {{firstName+" "+lastName}}

    </div>

    <script>

    var app=angular.module("myApp",[]);

    app.controller("myCtrl",function($scope){

      $scope.firstName="John";

      $scope.lastName="Doe";

    });

    </script>

    4.添加指令:AngularJS提供了很多内置的指令,你可以使用它们来为你的应用添加功能;

    <div ng-app="myApp" runoob-directive></div>

    <script>

    var app=angular.module("myApp",[]);

    app.directive("runoobDirective",function(){

      return{

        template:"我在指令构造器中创建!"

      };

    });

    </script>

    5.模块和控制器包含在JS文件中:通常AngularJS应用程序将模块和控制器包含在JavaScript文件中

    <!DOCTYPE html>

    <html>

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

    {{firstName+" "+lastName}}

    </div>

    <script src="myApp.js"></script>   //"myApp.js"包含了应用模块的定义程序

    <script src="myCtrl.js"></script>   //"myCtrl.js"文件包含了控制器

    </body>

    </html>

    6.函数会影响到全局命名空间:

    **javaScript中应避免使用全局函数,因为他们很容易被其他脚本文件覆盖

    **AngularJS模块让所有函数的作用域在该模块下,避免了该问题;

    **对于HTML应用程序,通常建议把所有的脚本都放置在<body>元素的最底部,这会提高网页加载速度,因为HTML加载不受制于脚本加载;

    **AngularJS在<head>元素中被加载,因为对angular.module的调用只能在库加载完成后才能进行;

  • 相关阅读:
    java实现字符串和LIST,MAP转换
    JAVA发送HttpClient请求及接收请求结果
    JVM内存溢出分析
    tomcat启动问题 严重: End event threw exception
    解决oracle11G密码过期问题
    查看和开启服务器端口
    tongweb安装后无法启动问题
    intellij与eclipse默认快捷键对比
    java实现pdf按页切分成图片
    ORACLE在IMP时候出现数据丢失
  • 原文地址:https://www.cnblogs.com/hqutcy/p/6092382.html
Copyright © 2011-2022 走看看