angular初印象

1: Angular的基本概念
1: angular是MV**的框架，所以并不是所谓的MVC框架
2: angular的View：鼓励你创建自己的新的HTML元素，这些元素拥有自己的属性和行为。在angular里面叫Directives，这个其实就是React里面的component。
3: angular的Model：angular的model就是一个个纯的javaScript object。
4: angular的Scope: angular的一个重要思想two-way Data Binding，也就是双向数据绑定。这个双向是指View和Model之间。如果Model发生了变化，自然View会反应这种变化，而他们俩之间的这种作出反应靠的是angular的Scope在其中作为种胶水的角色。

2: Angular的 M.V.C
1: angular的controller

HTML code:

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="a.css">
    <script src="angular-1.0.1.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <div class="spicy">
        <div ng-app="scopeInheritance" ng-controller="MainController">
            <p>Good {{timeOfDay}},{{name}}!</p>

            <div ng-controller="ChildController">
               <p>Good {{timeOfDay}},{{name}}!</p>

               <div ng-controller="GrandChildController">
                   <p>Good {{timeOfDay}},{{name}}!</p>
               </div>
            </div>    
        </div>
    </div>
</body>
</html>

app.js

var myApp = angular.module('scopeInheritance',[]);
myApp.controller('MainController',['$scope',function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildController',function($scope)             {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController',function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);

a.css

div.spicy div {
  padding: 5px;
  border: solid 1px green;
}

结果：

通过以上例子，主要学习以下几点知识：

1: angular里面的module的概念

假如说把一个angular应用程序比喻为一个银河系，那module就是一个一个独立的星球，比方说地球。地球是一个载体，它拥有阳光，空气，水等一系列构成一个生态圈的各种条件。那module就像地球，它是controllers，services，filters，directives等的container.也可以把module看作是一个上下文（context），所以就像上面的代码一样，在html里面，我们通过ng-app='scopeInheritance' (其中‘scopeInheritance’是module的名字)来指定接下来在这个div里面出现的任何东西都是在这个context下面的，也是如此，我们之后也才能在这个context下面找到定义在这个module里的controller（MainController，ChildController，GrandChildController）。

2: angular的controller

首先，html和angular的controller通过ng-controller='MainController'来进行绑定，其中MainController是想要绑定的controller的名字。
当把一个controller和某个html的tag绑定的时候，angular会根据这个controller的构造函数来实例化一个对象。一个scope也会被创建，而且这个scope会作为这个controller的构造函数的一个可注入参数。
所以，我们会在这个scope上定义我们的数据model，在controller里面初始化它们，比如：

$scope.timeOfDay = 'morning';
$scope.name = 'Nikki';

有时候，我们也会对这些数据有操作修改的需求，那也是通过在$scope上定义相应的方法来完成。在html里面我们就可以通过angular的语法，两个大括号来取得这些变量的值，比方说：

<p>Good {{timeOfDay}},{{name}}!</p> // Good morning,Nikki!

以上例子，其实还想说明的一点是，angular的controller定义的scope就跟一般的编程语言的scope一样：子元素可以访问到父元素定义的变量或者方法，如果重名，使用自己的。

原文地址：https://www.jb51.cc/angularjs/149161.html

相关推荐