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的controllerHTML 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的名字。
$scope.timeOfDay = 'morning';$scope.name = 'Nikki';
有时候,我们也会对这些数据有操作修改的需求,那也是通过在$scope上定义相应的方法来完成。在html里面我们就可以通过angular的语法,两个大括号来取得这些变量的值,比方说:
Good {
{timeOfDay}}, { {name}}! // Good morning, Nikki!
以上例子,其实还想说明的一点是,angular的controller定义的scope就跟一般的编程语言的scope一样:子元素可以访问到父元素定义的变量或者方法,如果重名,使用自己的。