angular 入门教程1

使用angularjs也有一年之久了。从初识angularjs时的激动和兴奋到现在淡定的使用，这其中也是有不少的心酸（刚用的时候和各种js插件的配合使用快把我弄疯了）。

细想起来。用MVVM的这种js框架也有3年之久了。从最初的knockout到现在的angularjs，对于前端框架的使用确实能够提交开发效率，更能提升用户体系。所有的交互都通过异步来交互。对于现在的移动互联网，尤其需要这些。有了这些框架我们可以更轻松的开发webapp和H5的各类应用。而angular 更是其中的佼佼者。

下面来简单介绍一下基本的概念和基本的使用场景和方法

1：angular是什么(其实这个我没必要写，你们百度就行，但为了承上启下还是写上吧)

用一句话总结介绍：angular是一个由google研发的。MVVM的前端js框架。支持双向绑定和依赖注入，后台程序员是不是很熟悉，没有错它就是专门为后端程序员而生的前端框架。所以如果你是后端程序员那么你们对于思路上的你们很容易就能切入进去。前端的程序员也别慌。就是一堆js而且。很容易就能看懂。下面开始正式开说。

2：双向绑定

这个应该是最实用的效果了（之前knockout教程里面也有写到过）简单来说就是我们可以通过双向绑定来动态的更新页面上的数据。可以实现局部刷新（可能之前你是拼的html来实现的）这样你就可以很简单得实现整个页面都是异步的进行加载。对于双向绑定原来性的东西。大家可以去官网查看源码来了解。我这里呢主要是在使用方面进行讲解。

废话不多说先上代码。

<ANY
  ng-bind="">
...
</ANY>

这个就是进行双向绑定的语法。ng-bind 是angular 内置的 directive 后面我会讲到什么是directive 现在你们只要知道我通过这个语法可以对数据进行绑定。

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  Enter name: <input type="text" ng-model="name"><br>
  Hello <span ng-bind="name"></span>!
</div>

上面的代码是angular js部分的。大概意思创建一个叫做bindexample 的模块在创建一个叫做exampleController 的控制器。在控制器里面赋值了一个变量

html的部分的结构从上到的意思是。通过ng-controller来确定控制器的作用域。在这里作用域之内呢。我们可以使用angular对于的控制器里的变量和方法。

看到这，后端的程序员是不是觉得怎么像是MVC框架的控制器。那有model吗？答案呢是肯定的。当然有啦。在上面的html代码中就有一个angular 命令（对应directive后文中以命令来代替）ng-model用来绑定数据模型。你就可以把他理解为MVC 的model。因为在这里他们的作用和语义上确实是大同小异的。至于view当然就是对应的页面了。对于angular 的语法你可以参考官网。最简单的controller定义就是如上面的那种形式了。这也是最标准的写法。除此之外你还可以这样写

<script>
var app=angular.module('bindExample', [])
app.controller('ExampleController',function($scope) {
      $scope.name = 'Whirled';
    });
</script>

这样看起来是是不是容易理解点。但是要注意。这种写法是不支持js压缩的也就是说如果你的项目比较大最好还是按照标准的写法来写。

在实际的项目使用当中来说。往往不会直接把控制器的定义和app模块的定义都放到一个js里面。一般来说是这种结构。

templates/
    _login.html
    _feed.html
app/
    app.js
    controllers/
        LoginController.js
        FeedController.js
    directives/
        FeedEntryDirective.js
    services/
        LoginService.js
        FeedService.js
    filters/
        CapatalizeFilter.js

在前端也进行业务和逻辑分层。方便管理和维护。在上面呢我通过双向绑定来引出了angular具体的使用方式和一些基本的语法。可能有些你还不太理解。先不要着急

先这么用。至于为什么这么用我会在后面进行讲解。当然在使用的过程中可能你们自己也就顿悟了哈哈。

3：控制器

接着上面的说在上面的例子中多次使用了controller 关于控制器是什么我先给出比较官方的解释:"控制器是一个Javascript函数（类型/类），用来增强除了根作用域意外的作用域实例的。当你或者AngularJS本身通过scope.$new俩创建一个新的子作用域对象时，有一个选项能让你将它当做参数传递给控制器。这能使AngularjS将控制器和这个作用域联系起来，增强作用域的行为。" 是不是看完还是云里雾里的。那我用大白话来给大家解释下什么是控制器。

其实说白了就是一个普通js函数对象。它是有作用域的，它的作用域呢是通过声明的方法来指定的。它有面向对象的特性支持控制器之间的继承。继承的子控制器可以取到父控制器的方法和对象。

先看看普通的控制器是什么样的

<body ng-controller="SpicyCtrl">
 <button ng-click="chiliSpicy()">Chili</button>
 <button ng-click="jalapenoSpicy()">Jalapeño</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.chiliSpicy = function() {
   $scope.spice = 'chili';
 }
 $scope.jalapenoSpicy = function() {
  $scope.spice = 'jalapeño';
 }
}

上面的代码呢我先用大白话解释一下就是定义了一个叫SpicyCtrl（命名规范是控制器名称+Ctrl）的控制器。里面定义了两个方法。然后通过ng-click内置指令来调用，点击按钮进行双向绑定，“{{}}”这种语法也是绑定写法的一种但是我不推荐这么写。原因呢留给你们去思考。很容易就会得出结论。

对于上面代码需求注意的几点是。

ngController指令是用来（隐式地）为模板创建作用域的。并且使用命令中指定的spicyCtrl控制器来增强这个作用域。
spicyCtrl只是一个纯Javascript函数。使用了驼峰式命名法（可选）命名并以Ctrl或者Controller结尾。
对作用域对象赋予一个新的属性会创建或者更新模型。
控制器方法能够直接通过赋格作用域对象这个方式创建（如例子中的chiliSpicy方法）。
控制器中的所用方法都能在模板中调用（在body元素或者子元素中）

接来下继续讲解关于控制器方法传参的问题。

<body ng-controller="SpicyCtrl">
 <input ng-model="customSpice" value="wasabi">
 <button ng-click="spicy('chili')">Chili</button>
 <button ng-click="spicy(customSpice)">Custom spice</button>
 <p>The food is {{spice}} spicy!</p>
</body>

function SpicyCtrl($scope) {
 $scope.spice = 'very';
 $scope.spicy = function(spice) {
   $scope.spice = spice;
 }
}

SpicyCtrl控制器只定义了一个叫spicy的方法，它接受一个叫做spice的参数。和这个控制器相关的模板在第一个按钮事件中传递了一个chili常量给控制器方法，在第二个按钮中传递一个模型属性。（可以理解为model的一个字段）

最后呢是关于控制器继承的例子.

<body ng-controller="MainCtrl">
 <p>Good {{timeOfDay}}, {{name}}!</p>
 <div ng-controller="ChildCtrl">
   <p>Good {{timeOfDay}}, {{name}}!</p>
   <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
</body>

function MainCtrl($scope) {
 $scope.timeOfDay = 'morning';
 $scope.name = 'Nikki';
}

function ChildCtrl($scope) {
 $scope.name = 'Mattie';
}

function BabyCtrl($scope) {
 $scope.timeOfDay = 'evening';
 $scope.name = 'Gingerbreak Baby';
}

注意我们是如何在模板中嵌套我们的ngController指令的。这个模板结构会使得AngularJS为视图创建四个作用域：

根作用域
MainCtrl作用域，它包含了模型timeOfDay和模型name。
ChildCtrl作用域，它继承了上层作用域的timeOfDay，复写了name。
BabyCtrl作用域，复写了MainCtrl中定义的timeOfDay和ChildCtrl中的name。

控制器的继承和模型继承是同一个原理。所以在我们前面的例子中，所有的模型都用返回相应字符串的控制器方法代替。

注意：常规的原型继承对控制器来说不起作用。因为正如我们之前提到的，控制器不是直接实例化的，而是对作用域对象调用的。

以上呢就是控制器的几种用法了。当然这里说的都是最基础的用法了。后面我会继续讲到一些实际项目中的一些用法包括路由和注入。服务调用等等。

看到这相信你对于angular的整体和基本的使用方式都有了一定的理解了。时间有限第一篇的教程就写到这里就结束了。有不足之处欢迎指正。

posted @ 2015-06-17 18:57 先问后学阅读(343) 评论(0) 编辑收藏举报

刷新页面返回顶部

angular 入门教程1

公告