欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Angularjs的基本结构 博客分类： angularjs  

程序员文章站 2024-02-10 12:43:10
...

AngularJS是一款非常强大的前端MVC框架。大概可以分为这三类：

        1.Directive（指令）

        2.Controller（控制器）
        3.Service （服务）

一、首先是服务(service)

       它是一个单例，就是无论这个服务注入到任何地方，对象始终只有一个实例。它不想我们平时在js中用的function函数，因为服务被定义在一个模块中，所以它的使用范围是可以被管理的。这也就避免了对全局的污染。

       一般在写angular框架的时候，基本就是如下样式：

      html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet"  type="text/css"  href="../css/index.css" />
    <script src="../lib/angular-1.5.8/angular.min.js"></script>
    <script src="../services.js"></script>
</head>
<body ng-app='routingDemoApp' ng-controller="myCtrl">
<div>
 <-- //定义好 ng-view -->
    <div ng-view></div>
<div my-Directive></div>
</div>
</body>
</html>

这里就先不讲路由了。

 

 

写service：

 

var app = angular.module('routingDemoApp',['ngRoute']);
app.service('myservice',function() {
       var service = {
              return  { name: Jack };
       }
       return  service;
})

  ng里还有很多内置的服务如$location等，上例写的是一个简单的自定义服务，返回的是一个对象。

二、控制器(controller):

   angular是但页面应用，通过不同的控制器来渲染不同的页面，一般情况下都是一个页面对应着一个控制器

   controller:

app.controller('myctrl',function(myservice,$scope) {
       $scope.page = myservice;
})

 三、Directive：

app.directive("myDirective", function () {
    return {
        restrict: 'EA',
        controller: 'myctrl',
        template: "<p>{{page}}</p>"
      }
});

 

 

 

上一篇： PHP求给定数组的组合

下一篇：

推荐阅读