zoukankan      html  css  js  c++  java
  • AngularJS学习篇(十五)

    AngularJS 模块

    模块定义了一个应用程序。

    模块是应用程序中不同部分的容器。

    模块是应用控制器的容器。

    控制器通常属于一个模块。

    创建模块

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

    <div ng-app="myApp">...</div>
    
    <script>
    
    var app = angular.module("myApp", []); 
    
    </script>

    注意:模块的定义[]是定义模块之间依赖关系,中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字

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

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

    <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>

    对于 HTML 应用程序,通常建议把所有的脚本都放置在 <body> 元素的最底部。

    这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

    在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。

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

    另一个解决方案是在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:

    <!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>
    <script src="myCtrl.js"></script>
    
    </body>
    </html>
    //myApp.js
    var
    app = angular.module("myApp", []);
    //myCtrl.js
    app.controller("myCtrl", function($scope) {
        $scope.firstName    = "John";
        $scope.lastName= "Doe";
    });
  • 相关阅读:
    无缝滚动效果实现
    js模拟滚动条插件一二
    powerDesigner15.1破解
    解决asp.net 中GridView中隐藏过长的数据(使用ToolTip)
    IE6下弹出div覆盖select下拉框
    sql中的常用函数结合实现截取替换功能
    【.NET重修计划】数组,集合,堆栈的问题
    Redis可视化工具推荐
    Redis中String类型的相关命令操作
    Redis的五大数据类型以及key的相关操作命令
  • 原文地址:https://www.cnblogs.com/dehuachenyunfei/p/6738969.html
Copyright © 2011-2022 走看看