zoukankan      html  css  js  c++  java
  • angular学习笔记(二)-创建angular模块

    如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块.

    模块有助于把东西从全局命名空间中隔离.

    今天学习如何自定义创建模块:

    <!DOCTYPE html>
    <html>
    <head>
      <title>2.1模块</title>
      <meta charset="utf-8">
      <script src="../angular.js"></script>
      <script src="script.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
        <div ng-controller="TextController">
          <h1>{{text.message}}</h1>
          <h1>{{text.name}}</h1>
        </div>
      </div>
    </body>
    </html>
    var messages = {};
    messages.message = 'hi';
    messages.name = 'code_bunny';
    var myAppModule = angular.module('myApp',[]);
    myAppModule.controller('TextController',function($scope){
        $scope.text = messages;
    });



    <
    div ng-app="myApp">:

      1. ng-app可以加在任何元素上,表示使用这个模块来管理这个元素中的所有内容,

      2. 一个页面里只能有一个ng-app,不能有多个,不同的页面可以运用不同的ng-app模块,但是可以在同一个js里定义多个模块

      

    var messages = {};
    messages.message = 'hi';
    messages.name = 'code_bunny';
    
    var myAppModule = angular.module('myApp',[]);
    myAppModule.controller('TextController',function($scope){
        $scope.text = messages;
    });
    
    var otherAppModule = angular.module('otherApp',[]);
    otherAppModule.controller('TextController',function($scope){
        $scope.text = messages;
        $scope.text.name = 'white-bunny';
    });

      3. ng-app="模块名"

          然后在js中使用如下方法来扩展模块:     

    var myAppModule = angular.module('模块名',[]);

      angular.module()中的第二个参数是必须是一个数组,用于定义该模块依赖的模块,数组的值是字符串,也就是依赖的模块的名字.一旦写入了依赖的模块,那么该模块也就拥有了依赖的模块的指令,方法,等...

      比如常用的ngResource模块:

    var HttpREST = angular.module('HttpREST',['ngResource']);
    
    HttpREST.factory('cardResource',function($resource){
        return $resource('/card/user/:userID/:id',{userID:123,id:'@id'},{charge:{method:'POST',params:{charge:true},isArray:false}})
    });

    在这里依赖了ngResource模块,就可以使用$resource服务了.(当然需要加载angular-resource.min.js这个文件)

    又比如:

    //myRecipe.service模块用来定义服务
    var
    service = angular.module('myRecipe.service',['ngResource']); service.factory('Recipe',['$resource',function($resource){ return $resource('/recipe/:id',{id:'@id'}); }]); service.factory('loadRecipes',['Recipe','$q',function(Recipe,$q){ return function(){ ... } }]); service.factory('loadRecipe',['Recipe','$q','$route','$routeParams',function(Recipe,$q,$route,$routeParams){ return function(){ ... } }]);
    //myRecipe.directive模块用来定义指令
    var
    directive = angular.module('myRecipe.directive',[]); directive.directive('focus',function(){ return { ... } }); directive.directive('loading',['$rootScope',function($rootScope){ return { ... } }]);
    //在myRecipe中就可以使用myRecipe.service和myRecipe.directive里面的服务和指令了.
    var app = angular.module('myRecipe',['myRecipe.service','myRecipe.directive']);

      4. 可以在自己扩展的模块下添加控制器: 

    myAppModule.controller('TextController',function($scope){
        ...
    });

       

    $scope.text = messages;

    text是$scope作用域下的一个对象,但是message却是一个外部的对象,使用这种方式来定义作用于下的对象,而不是直接在作用域中声明,这样,同一个变量,可以在多个模块或多个控制器中被使用



    相关代码托管:

    https://github.com/OOP-Code-Bunny/angular



      

  • 相关阅读:
    (转)IntelliJ IDEA 插件 阿里巴巴Java开发手册(Alibaba Java Coding Guidelines)
    idea快捷键整理
    (转)mysql使用Navicat 导出和导入数据库
    (转)Intellij Idea工具栏添加打开选中文件的资源管理器位置
    Intellij IDEA设置类注释和方法注释
    mavn jar包依赖冲突解决
    我的Keras使用总结(3)——利用bottleneck features进行微调预训练模型VGG16
    我的Keras使用总结(2)——构建图像分类模型(针对小数据集)
    我的Keras使用总结(1)——Keras概述与常见问题整理
    数据竞赛实战(5)——方圆之外
  • 原文地址:https://www.cnblogs.com/liulangmao/p/3711047.html
Copyright © 2011-2022 走看看