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:

            Good {{timeOfDay}}, {{name}}!               Good {{timeOfDay}}, {{name}}!                   Good {{timeOfDay}}, {{name}}!

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

结果：

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

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的语法，两个大括号来取得这些变量的值，比方说：

 Good {{timeOfDay}}, {{name}}! // Good morning, Nikki!

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

关键字：angularjs, angular, scope, timeofday

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！