angular初印象

发布时间:2019-06-11 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angular初印象脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1: Angular的基本概念
1: @R_126_666@是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', ['$scope', function($scope)             {
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildController', ['$scope',     function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);

a.css

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

结果:

angular初印象

通过以上例子,主要学习以下几点知识:

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里面初始化它们,比如:

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

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

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的angular初印象全部内容,希望文章能够帮你解决angular初印象所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。