`

Angularjs的基本结构

阅读更多

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>"
      }
});

 

 

 

分享到：
| Linux用户及文件权限管理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics